Next-plugins: Error with Yarn PNP and next-css

[JiDai]

Hi

I push a small repo to demonstrate the error :
https://github.com/JiDai/test-nextjs-css-pnp

I just created a NextJS app with Next-CSS. It works well until I add Yarn PNP feature (last commit).
When I run next build I get an error :

{ Error: Package "[email protected]" (via "/Users/jordid/Library/Caches/Yarn/v6/npm-mini-css-extract-plugin-0.4.3-98d60fcc5d228c3e36a9bd15a1d6816d6580beb8-integrity/node_modules/mini-css-extract-plugin/dist/index.js") is trying to require the package "webpack" (via "webpack") without it being listed in its dependencies (loader-utils, schema-utils, webpack-sources, mini-css-extract-plugin)
    at makeError (/Users/jordid/GitHome/test-nextjs-css-pnp/test-nextjs-css-pnp/.pnp.js:55:17)
    at Object.resolveToUnqualified (/Users/jordid/GitHome/test-nextjs-css-pnp/test-nextjs-css-pnp/.pnp.js:8939:17)
    at Object.resolveRequest (/Users/jordid/GitHome/test-nextjs-css-pnp/test-nextjs-css-pnp/.pnp.js:9010:31)
    at Function.Module._resolveFilename (/Users/jordid/GitHome/test-nextjs-css-pnp/test-nextjs-css-pnp/.pnp.js:9192:30)
    at Function.Module._load (/Users/jordid/GitHome/test-nextjs-css-pnp/test-nextjs-css-pnp/.pnp.js:9108:31)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/jordid/Library/Caches/Yarn/v6/npm-mini-css-extract-plugin-0.4.3-98d60fcc5d228c3e36a9bd15a1d6816d6580beb8-integrity/node_modules/mini-css-extract-plugin/dist/index.js:7:16)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
  code: 'UNDECLARED_DEPENDENCY',
  data:
   { request: 'webpack',
     issuer:
      '/Users/jordid/Library/Caches/Yarn/v6/npm-mini-css-extract-plugin-0.4.3-98d60fcc5d228c3e36a9bd15a1d6816d6580beb8-integrity/node_modules/mini-css-extract-plugin/dist/index.js',
     issuerLocator: { name: 'mini-css-extract-plugin', reference: '0.4.3' },
     dependencyName: 'webpack',
     candidates:
      [ 'loader-utils',
        'schema-utils',
        'webpack-sources',
        'mini-css-extract-plugin' ] } }
error Command failed with exit code 1.

Am I missing something ?

[ghost]

+1

[BasixKOR]

It seems like next-css does not satisfies peerDependencies of mini-css-extract-plugin. I think it can be solved by just put webpack in dependencies, although it really isn't a good solution.

[milesrichardson]

I'm having this same issue after upgrading to yarn 2.0 which uses pnp. Here's the full trace (running latest of everything):

➤ YN0000: Done with warnings in 1.24m                                                            root@c560875b1737:/src/js/catalog# yarn dev                                                      [ wait ]  starting the development server ...                                                    
[ info ]  waiting on http://localhost:3000 ... 
Error: A package is trying to access a peer dependency that should be provided by its direct ance
stor but isn't                                                                                                                                                                                    
Required package: webpack (via "webpack")       
Required by: mini-css-extract-plugin@virtual:1d9168c037c08506cad690e29fd976d3b38a884a672b631ce328
ba655d35796417317af720f12d57f0e7cd3ab2976fc12b60f56238e7a04aa9afa12f9ac77003#npm:0.4.3 (via /src/
js/.yarn/$$virtual/mini-css-extract-plugin-virtual-cebe464182/3/root/.yarn/berry/cache/mini-css-e
xtract-plugin-npm-0.4.3-a350360081-1.zip/node_modules/mini-css-extract-plugin/dist/)             

Require stack:                                         
- /src/js/.yarn/$$virtual/mini-css-extract-plugin-virtual-cebe464182/3/root/.yarn/berry/cache/min
i-css-extract-plugin-npm-0.4.3-a350360081-1.zip/node_modules/mini-css-extract-plugin/dist/index.j
s                                                             
- /src/js/.yarn/$$virtual/mini-css-extract-plugin-virtual-cebe464182/3/root/.yarn/berry/cache/min
i-css-extract-plugin-npm-0.4.3-a350360081-1.zip/node_modules/mini-css-extract-plugin/dist/cjs.js - /root/.yarn/berry/cache/@zeit-next-css-npm-1.0.1-1d9168c037-1.zip/node_modules/@zeit/next-css/css-loader-config.js             
- /src/js/.yarn/$$virtual/@zeit-next-less-virtual-9758d3c093/3/root/.yarn/berry/cache/@zeit-next-
less-npm-1.0.1-5d1bc10f7e-1.zip/node_modules/@zeit/next-less/index.js
- /src/js/catalog/next.config.js     
- /src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04b
c32-1.zip/node_modules/next/dist/next-server/server/config.js
- /src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04bc32-1.zip/node_modules/next/dist/next-server/server/next-server.js                               - /src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04b
c32-1.zip/node_modules/next/dist/server/next.js
- /src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04b
c32-1.zip/node_modules/next/dist/server/lib/start-server.js                                      - /src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04b
c32-1.zip/node_modules/next/dist/cli/next-dev.js
- /src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04b
c32-1.zip/node_modules/next/dist/bin/next
    at Object.makeError (/src/js/.pnp.js:23776:24)
    at resolveToUnqualified (/src/js/.pnp.js:32623:35)                                               at resolveRequest (/src/js/.pnp.js:32716:27)                                                     at Object.resolveRequest (/src/js/.pnp.js:32784:26)
    at Function.module_1.Module._resolveFilename (/src/js/.pnp.js:32014:34)                          at Function.module_1.Module._load (/src/js/.pnp.js:31899:40)                                 

    at Object.<anonymous> (/src/js/.yarn/$$virtual/mini-css-extract-plugin-virtual-cebe464182/3/root/.yarn/berry/cache/mini-css-extract-plugin-npm-0.4.3-a350360081-1.zip/node_modules/mini-css-extract-plugin/dist/index.js:7:16)
    at Module._compile (internal/modules/cjs/loader.js:1151:30) {
  code: 'MODULE_NOT_FOUND',
  pnpCode: 'MISSING_PEER_DEPENDENCY',
  data: {
    request: 'webpack',
    issuer: '/src/js/.yarn/$$virtual/mini-css-extract-plugin-virtual-cebe464182/3/root/.yarn/berry/cache/mini-css-extract-plugin-npm-0.4.3-a350360081-1.zip/node_modules/mini-css-extract-plugin/dist/',
    issuerLocator: {
      name: 'mini-css-extract-plugin',
      reference: 'virtual:1d9168c037c08506cad690e29fd976d3b38a884a672b631ce328ba655d35796417317af720f12d57f0e7cd3ab2976fc12b60f56238e7a04aa9afa12f9ac77003#npm:0.4.3'
    },
    dependencyName: 'webpack'
  },
  requireStack: [
    '/src/js/.yarn/$$virtual/mini-css-extract-plugin-virtual-cebe464182/3/root/.yarn/berry/cache/mini-css-extract-plugin-npm-0.4.3-a350360081-1.zip/node_modules/mini-css-extract-plugin/dist/index.js',
    '/src/js/.yarn/$$virtual/mini-css-extract-plugin-virtual-cebe464182/3/root/.yarn/berry/cache/mini-css-extract-plugin-npm-0.4.3-a350360081-1.zip/node_modules/mini-css-extract-plugin/dist/cjs.js',
    '/root/.yarn/berry/cache/@zeit-next-css-npm-1.0.1-1d9168c037-1.zip/node_modules/@zeit/next-css/css-loader-config.js',
    '/src/js/.yarn/$$virtual/@zeit-next-less-virtual-9758d3c093/3/root/.yarn/berry/cache/@zeit-next-less-npm-1.0.1-5d1bc10f7e-1.zip/node_modules/@zeit/next-less/index.js',
    '/src/js/catalog/next.config.js',
    '/src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04bc32-1.zip/node_modules/next/dist/next-server/server/config.js',
    '/src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04bc32-1.zip/node_modules/next/dist/next-server/server/next-server.js',
    '/src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04bc32-1.zip/node_modules/next/dist/server/next.js',
    '/src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04bc32-1.zip/node_modules/next/dist/server/lib/start-server.js',
    '/src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04bc32-1.zip/node_modules/next/dist/cli/next-dev.js',
    '/src/js/.yarn/$$virtual/next-virtual-8de21a2ae1/3/root/.yarn/berry/cache/next-npm-9.2.1-9e2a04bc32-1.zip/node_modules/next/dist/bin/next'
  ]

[Ciantic]

Same error I think, although weird addition at the bottom:

yarn run dev   
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
{ Error: A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

Required package: webpack (via "webpack")
Required by: mini-css-extract-plugin@virtual:1d9168c037c08506cad690e29fd976d3b38a884a672b631ce328ba655d35796417317af720f12d57f0e7cd3ab2976fc12b60f56238e7a04aa9afa12f9ac77003#npm:0.4.3
Require stack: ...
command not found: next

Adding webpack didn't help, I did yarn add webpack and same error.

[Kinbaum]

I am having an issue with Yarn 2 and PNP, but the error I get is a bit different. In my _app.js file, I am importing a global .less file at the top like so:

// pages/_app.js
import './components/styles/main.less';

This causes the Module not found: Something that got detected as your top-level application (because it doesn't seem to belong to any package) tried to access a package that is not declared in your dependencies error.

next.config.js

// next.config.js
const withCSS = require('@zeit/next-css');
const withLess = require('@zeit/next-less');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const { version } = require('./package.json');

module.exports = withCSS(withLess({
    lessLoaderOptions: {
        javascriptEnabled: true
    },
    publicRuntimeConfig: {
        env: process.env.ENV
    },
    generateBuildId: async () => version,
    webpack(config) {
        // Suppressing specific warnings in the console
        config.plugins = [
            ...config.plugins,
            new FilterWarningsPlugin({
                exclude: /extract-css-chunks-plugin[^]*Conflicting order between:/
            })
        ];

        return config;
    }
}));

When I comment out the .less import, then everything resolves (obviously left with an un-styled page). Is there something I need to add to my next config to handle the .less import for Yarn 2? The config I provided above was enough for Yarn 1 / npm to work.

[ilangorajagopal]

Running yarn add webpack didn't work for me either. So I instead updated .yarnrc.yml file telling yarn that mini-css-extract-plugin depends on webpack:

packageExtensions:
  'mini-css-extract-plugin@*':
    dependencies:
      'webpack': '*'

[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.