Closed jaysoo closed 11 months ago
If it helps, I have the same error on 1.11.0 using Vite (SWC/esbuild/Rollup) under the hood. Reverting to 1.10.0 did not cause an error, which leads me to believe something changed in the recent minor version.
Have you tried adding your 'design' module to nextConfig.transpilePackages? I think that may be required to get this to work in monorepos.
This is because Next doesn't allow importing of typescript files outside of the app root by default
Try adding externalDir to your nextConfig:
const nextConfig = {
experimental: {
externalDir: true,
},
// ...
};
Alternatively, probably a better solution is to treat it as a package and as suggested use transpilePackages
.
const nextConfig = {
transpilePackages: ["@x/design"],
// ...
};
Add a package.json
inside the design folder:
{
"name": "@x/design",
"version": "0.1.0",
"private": true,
"main": "src/index.ts"
}
Then add workspaces to your root package.json
, pointing to the design folder
"workspaces": [
"design"
],
Then run npm i
your workspace package should be linked up and you can import { Box } from '@x/design'
same as @azuline I am facing a similar error with Vite, using these versions:
"@vanilla-extract/vite-plugin": "^3.9.0",
"@vanilla-extract/css": "^1.13.0",
Some error with an unexpected token
error during build:
file.css.ts
return <span className={base3} {...props} />;
SyntaxError: Unexpected token '<
(will try to take a look)
Just did some more debugging on my end and my issue was related to the TS Config file. It is a monorepo setup, and I realized the Vanilla Extract errors had JSX bits on them, and once I checked the UI library TS Config, I noticed it was missing a "JSX" config key 😅 setting it to "react-jsx" fixed my issue.
cc @azuline in case it helps.
Closing as https://github.com/vanilla-extract-css/vanilla-extract/issues/1079#issuecomment-1563774558 is a working fix for the issue in the reproduction. Docs for this will be added in https://github.com/vanilla-extract-css/vanilla-extract/pull/1213.
Describe the bug
I'm having an issue when using Next.js and
vanilla-extract
in a monorepo. The problem seems to stem from the component being outside of the Next.js project folder.I've attached the reproduction of this issue where one page works because it is using a component inside of the
next-app/components
folder, where as the second page breaks because it imports fromdesign/src/index.ts
(which is outside of the Next.js folder). The workspace layout is as follows:On
http://localhost:3000/broken
I get this error:After debugging, I noticed that in the broken instance the
Box.tsx
file is never transformed due to this line https://github.com/vanilla-extract-css/vanilla-extract/blob/9cfb9a1/packages/webpack-plugin/src/loader.ts#L78-L84. I'm not sure what the root cause is as I'm not familiar with how the loader is supposed to work.Note: The original issue was opened on the Nx repo. If there is something we need to do from the Nx side to make this work let me know! https://github.com/nrwl/nx/issues/16587
Reproduction
https://github.com/jaysoo/issue-16587
System Info
Used Package Manager
npm
Logs
Validations