Cannot 'resolveSync' because the fileSystem is not sync

[jantimon]

Environment

@linaria/webpack5-loader/node_modules/enhanced-resolve/lib/Resolver.js:242
                        throw new Error(
                        ^
Error: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'!

• Linaria version: "3.0.0-beta.13",
• Bundler (+ version): next": "11.0.1" (with webpack 5)
• Node.js version: v14.16.1
• OS: OS-X

Description

Can't get linaria up and running as the @linaria/webpack-loader throws an error:

Error: /my-project/src/foo.tsx: An unexpected runtime error occurred during dependencies evaluation: 
/my-project/node_modules/@linaria/webpack5-loader/node_modules/enhanced-resolve/lib/Resolver.js:242
                        throw new Error(
                        ^

Error: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'!
It may happen when your code or third party module is invalid or uses identifiers not available in Node environment, eg. window. 
Note that line numbers in above stack trace will most likely not match, because Linaria needed to transform your code a bit.

Reproducible Demo

Here is a reproduction of the bug: bug.zip

related issues:

• add api for async module resolution babel/babel#13798
• change jsconfig-paths-plugin to resolve paths synchronously vercel/next.js#29410

[J-env]

I had the same problem.

next.js: 11.1.2, 11.1.0 (with webpack 5, with webpack 4)

[jantimon]

Here is a reproduction of the bug: bug.zip

It is caused by a Resolve plugin which gets injected automatically by the jsconfig-paths-plugin as soon as you specify paths inside tsconfig.js to resolve dependencies:

https://github.com/vercel/next.js/blob/2271cd841d9840b703f57fb8d791b4e3b373430d/packages/next/build/webpack/plugins/jsconfig-paths-plugin.ts#L215

I asked the next team to fix it on their side: vercel/next.js#29410

[J-env]

@jantimon
Manual test /node_modules/@linaria/webpack5-loader replace with @linaria/webpack-loader 3.0.0-beta.7(webpack5-loader.zip) solves this problem.

v3.0.0-beta.13 resolveSync code:https://github.com/callstack/linaria/blob/c49df269ebbbc956d43720b007a92f9f865662c5/packages/webpack5-loader/src/index.ts#L59

v3.0.0-beta.7 resolveSync code:
https://github.com/callstack/linaria/blob/d4812e9a67841379a6553effbacbc0e387a616af/packages/webpack5-loader/src/index.ts#L64

but npm i -D @linaria/webpack-loader@3.0.0-beta.7 cannot install the specified version

[jantimon]

@J-env webpack-loader is only a small helper to load either webpack4-loader or webpack5-loader

the resolve code of linaria is not the problem - linaria is using webpacks resolving logic. unfortunately the webpack resolving logic is sometimes sync and sometimes async depending on the webpack config.

next js ships with a webpack config which will be sync by default but async as soon as tsconfig includes a paths mapping

as soon as enhanced-require detects an async resolution hook it throws

the best solution on linaria side would be to go from sync to async but that's not possible right now as babel does not allow aysnc path resolution (babel/babel#13798)

[Anber]

Thank you @jantimon and @J-env
This is a regression from #830. I don't see any solution for that case. I have to think.

[jantimon]

@Anber I managed to fix it on nextjs side: vercel/next.js#29421

I also found a solution which is probably better than the current one as it has the following advantages:

• comes with integrated caching (no need to maintain linaria-cache and cache invalidation anymore)
• works with sync & async path resolvers
• doesn't require deprecated webpack apis

however it comes also with disadvantage:

• it's only supported for webpack 5
• would take some effort to migrate the current code

the solution would be to use webpacks this.importModule loader api which was developed exactly for cases like linaria

The flow would look like this (simplified):

[Anber]

@jantimon that's an interesting proposal!

it's only supported for webpack 5

It's not a problem, since we have different packages for v4 and v5.

would take some effort to migrate the current code

It can be a problem, but maybe we can use those changes in other loaders too.

[jantimon]

Cool :) I'll try to find some time for a POC this week

[jantimon]

I have a first (very very limited) POC up and running 🎉
Right now it is blocked by a bug in css-loader: webpack-contrib/css-loader#1381

If you like we can have a short call next week to take a look :)

[Anber]

Hi @jantimon!

Looks like the problem is deeper than a simple bug in css-loader. Do you have any updates?

[jantimon]

I found a workaround for now but I'll also file a webpack bug

[Anber]

So… is it still possible to implement a fix for webpack 5?

[jantimon]

Yes I have a first POC up and running for webpack 5.
It is a single loader which makes use of webpacks internal caching layers.

When the webpack loader is called for a source file 'foo.js' it will:

1. use this.importModule to execute 'foo.js?linaria-css' with node js
2. babel will transpile 'foo.js?linaria-css' in a way that the meta data and css is exported
3. babel will transpile 'foo.js' and will prepend 'import {className} from 'placeholder.module.css?extract=foo.js"'
4. the webpack loader will be called for 'placeholder.module.css?extract=foo.js"' and return only css

it would be easier to demonstrate and elaborate on next steps in a call - @Anber do you have time for a call next week?

[jantimon]

Next v11.1.3-canary.66 ships with a fix https://github.com/vercel/next.js/releases/tag/v11.1.3-canary.66 (it's only a stop gap solution and might not work in all cases)

[Anber]

I've just added a fallback to the default configuration if an async plugin is detected. I hope it will allow releasing 3.0 without introducing significant changes suggested by @jantimon. However, I'm still interested in a better solution. @jantimon, can you open a PR with the implementation of your approach?

[jantimon]

It's rather a POC than a working PR.. but right now I set it on hold because Vercel is moving away from Babel..
This means using Linaria for NextJs will slow down the build by upto 10 times 😕

[morriq]

I can confirm nextjs 12 works with linaria @ beta

[Anber]

Ok, let's close this issue for now. Maybe I'll find time for supporting SWC.