Webpack loader error when importing vanilla extract powered components into a server component NextJS app

[westmark]

Current Behavior

See repro repo here: https://github.com/westmark/next-vanilla-extract-ts-bug

> nx serve main

Navigate to http://localhost:4200 and http://localhost:4200/wontwork. On the first page, a vanilla extract component will be imported from the Next app itself. On the second page, identical code will instead be imported from a @nrwl/react library package. The following error will be displayed

../design/src/components/card/Card.css.ts
ModuleParseError: Module parse failed: Unexpected token (5:5)
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 clsx from 'clsx';
| 
> type Sprinkles = Parameters<typeof sprinkles>[0];
| interface Atoms extends Sprinkles {
|   className?: string | string[];

It seems when importing from a package, the loader doesn't recognise Typescript.

Possibly related: #16516

Expected Behavior

It should be possible to import from separate libraries.

GitHub Repo

https://github.com/westmark/next-vanilla-extract-ts-bug

Steps to Reproduce

1. yarn
2. > nx serve main
3. Navigate to http://localhost:4200/wontwork

Nx Report

Node : 18.15.0
OS   : darwin arm64
yarn : 1.22.19

nx                      : 15.9.2
@nrwl/js                : 15.9.2
@nrwl/linter            : 15.9.2
@nrwl/workspace         : 15.9.2
@nrwl/cli               : 15.9.2
@nrwl/devkit            : 15.9.2
@nrwl/eslint-plugin-nx  : 15.9.2
@nrwl/next              : 15.9.2
@nrwl/react             : 15.9.2
@nrwl/tao               : 15.9.2
typescript              : 4.9.5

Failure Logs

../design/src/components/card/Card.css.ts
ModuleParseError: Module parse failed: Unexpected token (5:5)
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 clsx from 'clsx';
| 
> type Sprinkles = Parameters<typeof sprinkles>[0];
| interface Atoms extends Sprinkles {
|   className?: string | string[];

Additional Information

• patch-package is used to patch [email protected] so that it will start under v15.9.2.
• Same error occurs under 16.0.0-beta8.

[jaysoo]

Looks like the files are not being processed because of this guard: https://github.com/vanilla-extract-css/vanilla-extract/blob/master/packages/webpack-plugin/src/loader.ts#L78-L84

Not sure what exactly the problem is. Will check if this is coming from Nx or needs to be patched on the vanilla-extract project.

[jaysoo]

Upon more investigation, it is not an Nx issue, but seems to be related to vanilla-extract and using source outside of the Next.js project root. I put together this example without Nx that shows the exact same problem.

https://github.com/jaysoo/issue-16587

I opened an issue on the vanilla-extract repo: vanilla-extract-css/vanilla-extract#1079

I will close this issue since it isn't an Nx bug. If there is something we can do to help on our end we will add it as a future enhancement.

[westmark]

Thanks @jaysoo for the prompt investigation 💪

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.