Error when importing outside of Next.js project folder in a monorepo

[jaysoo]

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 from design/src/index.ts (which is outside of the Next.js folder). The workspace layout is as follows:

.
├── design              (using this breaks)
│   ├── src
│   │   ├── box
│   │   │   ├── Box.tsx
│   │   │   └── index.ts
│   │   ├── index.ts
│   │   └── styling
│   └── tsconfig.json
├── next-app
│   ├── components      (this one works fine)
│   │   ├── box
│   │   │   ├── Box.tsx
│   │   │   └── index.ts
│   │   ├── index.ts
│   │   └── styling
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── pages
│   │   ├── broken.tsx
│   │   ├── index.tsx
│   │   └── works.tsx
│   ├── public
│   ├── styles
│   └── tsconfig.json
├── package-lock.json
├── package.json
└── tsconfig.base.json

On http://localhost:3000/broken I get this error:

../design/src/box/Box.tsx
Module parse failed: Unexpected token (4:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { atoms, extractAtoms } from '../styling/atoms';
| 
> declare module 'react' {
|   // eslint-disable-next-line @typescript-eslint/ban-types
|   function forwardRef<T, P = {}>(

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

System:
    OS: macOS 13.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 2.26 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.13.0 - ~/.asdf/installs/nodejs/18.13.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.13.0/.npm/bin/yarn
    npm: 8.19.3 - ~/.asdf/plugins/nodejs/shims/npm
    Watchman: 2023.04.10.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 112.0.5615.137
    Edge: 112.0.1722.58
    Firefox: 109.0.1
    Safari: 16.4
  npmPackages:
    @vanilla-extract/css: ^1.11.0 => 1.11.0
    @vanilla-extract/next-plugin: ^2.1.2 => 2.1.2
    @vanilla-extract/sprinkles: ^1.6.0 => 1.6.0

Used Package Manager

npm

Logs

../design/src/box/Box.tsx
Module parse failed: Unexpected token (4:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { atoms, extractAtoms } from '../styling/atoms';
| 
> declare module 'react' {
|   // eslint-disable-next-line @typescript-eslint/ban-types
|   function forwardRef<T, P = {}>(

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[azuline]

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.

[graup]

Have you tried adding your 'design' module to nextConfig.transpilePackages? I think that may be required to get this to work in monorepos.

[renrizzolo]

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'

[TheMightyPenguin]

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)

[TheMightyPenguin]

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.

[askoufis]

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.