Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot build a next app with Turbopack (Styles were unable to be assigned to a file) #1367

Open
2 tasks done
nicolassanmar opened this issue Mar 20, 2024 · 2 comments
Open
2 tasks done

Cannot build a next app with Turbopack (Styles were unable to be assigned to a file) #1367

nicolassanmar opened this issue Mar 20, 2024 · 2 comments
Labels
nextjs Issue related to NextJS upstream issue Issue caused by a required upstream dependency

Comments

@nicolassanmar
Copy link

Describe the bug

I'm trying to run my next app with the --turbo flag 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 --turbo will cause the app to fail with the following error:
image

I created this simple reproduction repo, where I just ran create-next-app and 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.7

Used Package Manager

pnpm

Logs

✓ Compiled / in 899ms
 ⨯ Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
    at Object.getFileScope (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/@vanilla-extract+css@1.14.1/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.cjs.dev.js:35:11)
    at generateIdentifier (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/@vanilla-extract+css@1.14.1/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:175:49)
    at Object.style (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/@vanilla-extract+css@1.14.1/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:374:19)
    at /home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[root of the server]__87cd9b._.js:125:86
    at [project]/styles/vanilla-extract.css.ts [ssr] (ecmascript) (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[root of the server]__87cd9b._.js:129:3)
    at instantiateModule (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[turbopack]_runtime.js:488:23)
    at getOrInstantiateModuleFromParent (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[turbopack]_runtime.js:539:12)
    at esmImport (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[turbopack]_runtime.js:113:20)
    at /home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[root of the server]__87cd9b._.js:141:132
    at [project]/pages/index.tsx [ssr] (ecmascript) (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[root of the server]__87cd9b._.js:430:3)
    at instantiateModule (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[turbopack]_runtime.js:488:23)
    at getOrInstantiateModuleFromParent (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[turbopack]_runtime.js:539:12)
    at esmImport (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[turbopack]_runtime.js:113:20)
    at /home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/node_modules__pnpm_af8e7b._.js:6683:112
    at [project]/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/esm/build/templates/pages.js/(INNER_PAGE)/[project]/pages/index.tsx [ssr] (ecmascript) (ecmascript) (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/node_modules__pnpm_af8e7b._.js:6718:3)
    at instantiateModule (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[turbopack]_runtime.js:488:23)
    at instantiateRuntimeModule (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[turbopack]_runtime.js:547:12)
    at Object.getOrInstantiateRuntimeModule (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/chunks/[turbopack]_runtime.js:562:12)
    at Object.<anonymous> (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/.next/server/pages/index.js:6:26)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/cjs/helpers:119:18)
    at requirePage (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require.js:109:84)
    at /home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/load-components.js:98:84
    at async loadComponentsImpl (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/load-components.js:98:26)
    at async DevServer.findPageComponentsImpl (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:664:36)
    at async DevServer.findPageComponents (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/next-dev-server.js:565:20)
    at async DevServer.renderPageComponent (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1832:24)
    at async DevServer.renderToResponseImpl (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1882:32)
    at async DevServer.pipeImpl (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:895:25)
    at async NextNodeServer.handleCatchallRenderRequest (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:269:17)
    at async DevServer.handleRequestImpl (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:791:17)
    at async /home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/next-dev-server.js:331:20
    at async Span.traceAsyncFn (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:151:20)
    at async DevServer.handleRequest (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
    at async invokeRender (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:174:21)
    at async handleRequest (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:353:24)
    at async requestHandlerImpl (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:377:13)
    at async Server.requestListener (/home/nicolassanmar/trabajo/repos/vanilla-extract-turbopack-issue/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/start-server.js:140:13) {
  page: '/'
}

Validations
@askoufis askoufis added nextjs Issue related to NextJS upstream issue Issue caused by a required upstream dependency and removed pending triage labels Mar 23, 2024
@askoufis
Copy link
Contributor

@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 next --turbo.

@nicolassanmar
Copy link
Author

@askoufis Thanks! Seems reasonable then.
It would be great if the webpack plugin got ported to turbopack.
Reading this section seems to indicate that they are the ones writing these plugins, and Turbopack is not configurable yet:

Turbopack is in beta, so very few of these decisions are set in stone. In its current state, Turbopack cannot yet be configured - so plugins are not available yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
nextjs Issue related to NextJS upstream issue Issue caused by a required upstream dependency
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@askoufis @nicolassanmar