Cannot build a next app with Turbopack (Styles were unable to be assigned to a file) #1367
Comments
askoufis
added
nextjs
|
@nicolassanmar Thanks for raising an issue. As documented in the turbopack documentation, using webpack-based Next.js plugins as-is from next.config.js is not yet supported. Until we can actually write plugins for turbopack (I don't think this is possible just yet), the VE next plugin will not work with |
|
@askoufis Thanks! Seems reasonable then.
|
|
@askoufis Is there any news on that ? Is there a chance that vanilla-extract will work with Turbopack in the near future? |
|
@zecka Probably not. Webpack plugins aren't supported, nor are they planned to be supported apparently. Webpack loaders can be configured, but only a subset of webpack's loader API is available. It was mentioned in this post that Vanilla Extract doesn't work yet, but they're looking into what's required to support it, however we haven't heard anything from them about this. Maybe they're working on something on their end, who knows 🤷. |
- tailwind 만의 css 문법이 있는데 외울게 가중되고 일관성도 없어서 제로초님이 좋아하지 않는다함
- vanilla-extract 는 기존 css 문법을 거의 그대로 활용함
- npm i @vanilla-extract/css
- npm install --save-dev @vanilla-extract/next-plugin
- next.config.ts에 export 할 때 withVanillaExtract로 감싸주기
- terbopack으로 하면 안되는 이슈 있음
"dev": "next dev --turbopack", -> "dev": "next dev",
vanilla-extract-css/vanilla-extract#1367
- styled-components 와 다르게 vanilla-extract는 SSR 이 잘된다는데
검색해보니 styled-component도 좀 설정해주면 되는거 같긴한데
html에 css 흔적이 들어가 있으면 잘된다고 판단하면 된다고 함
- 자식 스타일 주기보단, 새로 스타일 하나 만드는게 권장되는 방법이라함
- :hover 그룹화는 좋네
- @media 쿼리도 그룹화 되네
- ':disabled:hover':{} 연달아 나오는건 안되니까
selecters:{'&:disabled:hover':{}} 이렇게 해야함
- selecters는 자기 자신이 타깃인 것만 작동
안되는 예 -> '& > a'
되는 예 -> 'a &'
- (beforeLogin)까지만 적용함
Describe the bug
I'm trying to run my
nextapp with the--turboflag as it drastically improves build times.This builds the project using Turbopack. This tool is still in beta, but more than 99% of its tests are passing: https://areweturboyet.com/. I never got any issues in projects that are not using vanilla extract.
Unfortunately running
next dev --turbowill cause the app to fail with the following error:I created this simple reproduction repo, where I just ran
create-next-appand installed vanilla extract:https://github.com/nicolassanmar/vanilla-extract-turbopack-issue/tree/main
Reproduction
https://github.com/nicolassanmar/vanilla-extract-turbopack-issue/tree/main
System Info
System: OS: Linux 5.15 Zorin OS 16.3 CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz Memory: 4.26 GB / 23.27 GB Container: Yes Shell: 5.0.17 - /bin/bash Binaries: Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm pnpm: 8.13.1 - ~/.local/share/pnpm/pnpm Browsers: Chrome: 122.0.6261.94 npmPackages: @vanilla-extract/css: ^1.14.1 => 1.14.1 @vanilla-extract/next-plugin: ^2.3.7 => 2.3.7Used Package Manager
pnpm
Logs
Validations
The text was updated successfully, but these errors were encountered: