Using pnpm + next-css: Module not found: Error: Can't resolve 'extracted-loader'

[elliottsj]

I'm using pnpm, which has a stricter node_modules structure than npm / yarn. When I install react + react-dom + next + next-css with yarn or npm, packages are flattened to the root node_modules folder, approximately like this:

node_modules/
  @babel/
  @zeit/next-css/
  extracted-loader/
  next/
  react/
  react-dom/
  ... many more packages

However with pnpm, there is no flattening, so the structure looks more like npm<=2's:

node_modules/
  @zeit/next-css/
  next/
  react/
  react-dom/

Due to this structure, when I run my Next.js app, this error occurs:

ModuleNotFoundError: Module not found: Error: Can't resolve 'extracted-loader' in 'myrepo/packages/myapp'
    at factory.create (myrepo/packages/myapp/node_modules/.registry.npmjs.org/webpack/4.20.2/node_modules/webpack/lib/Compilation.js:798:10)
    at factory (myrepo/packages/myapp/node_modules/.registry.npmjs.org/webpack/4.20.2/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (myrepo/packages/myapp/node_modules/.registry.npmjs.org/webpack/4.20.2/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (myrepo/packages/myapp/node_modules/.registry.npmjs.org/webpack/4.20.2/node_modules/webpack/lib/NormalModuleFactory.js:337:24)
    at myrepo/packages/myapp/node_modules/.registry.npmjs.org/neo-async/2.5.2/node_modules/neo-async/async.js:2817:7
    at myrepo/packages/myapp/node_modules/.registry.npmjs.org/neo-async/2.5.2/node_modules/neo-async/async.js:6783:13
    at myrepo/packages/myapp/node_modules/.registry.npmjs.org/neo-async/2.5.2/node_modules/neo-async/async.js:2817:7
    at done (myrepo/packages/myapp/node_modules/.registry.npmjs.org/neo-async/2.5.2/node_modules/neo-async/async.js:2914:13)
    at resolver.resolve (myrepo/packages/myapp/node_modules/.registry.npmjs.org/webpack/4.20.2/node_modules/webpack/lib/NormalModuleFactory.js:447:23)
    at doResolve (myrepo/packages/myapp/node_modules/.registry.npmjs.org/enhanced-resolve/4.1.0/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (myrepo/packages/myapp/node_modules/.registry.npmjs.org/enhanced-resolve/4.1.0/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (myrepo/packages/myapp/node_modules/.registry.npmjs.org/tapable/1.1.0/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (myrepo/packages/myapp/node_modules/.registry.npmjs.org/enhanced-resolve/4.1.0/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (myrepo/packages/myapp/node_modules/.registry.npmjs.org/enhanced-resolve/4.1.0/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (myrepo/packages/myapp/node_modules/.registry.npmjs.org/tapable/1.1.0/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (myrepo/packages/myapp/node_modules/.registry.npmjs.org/enhanced-resolve/4.1.0/node_modules/enhanced-resolve/lib/Resolver.js:238:5)

webpack sees 'extracted-loader' in its config, so it tries to resolve 'extracted-loader' relative to my application rather than relative to next-css.

Suggested fix

Loaders should be resolved directly in next-css (and other Next.js enhancers), rather than by webpack. Generally, require.resolve can do this. e.g. for next-css, we can replace this:

!isServer && dev && 'extracted-loader',

with this:

!isServer && dev && require.resolve('extracted-loader'),

[slice]

Just ran into this issue.

[AHBruns]

Still seeing this

[RDeluxe]

Yes that's a common problem with a lot of next plugins.
I'm going to take a look at other plugins which may have issues, @elliottsj did a great job !

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as the plugins have been deprecated in favor of the built-in support.