webpack errors after update to 3.0.0-beta.16

Environment

• Linaria version: 3.0.0-beta.16
• Bundler (+ version): webpack 5.65.0
• Node.js version: 17.2.0
• OS: Linux

Description

Hi there,

after upgrading to 3.0.0-beta.16, there are some errors in my webpack build that I cannot quite figure out on my own.

The first error is

Conflict: Multiple chunks emit assets to the same filename styles.css (chunks 179 and 532)

This seems to be related to my optimization.splitChunks.cacheGroups option that I have configured to include the CSS for lazy-loaded chunks into the main CSS chunk:

styles: {
  name: 'styles',
  idHint: 'styles',
  test: /\.css$/,
  chunks: 'all',
  enforce: true,
}

If I comment that out, the actual webpack build seems to work fine again (and there is only one CSS chunk, so I’m not sure if that option is even still necessary) - but then I run into errors when starting webpack-dev-server (using React Fast Refresh):

ERROR in ./src/ui/main/main-container.tsx (./src/ui/main/main-container.linaria.css!=!../node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js!./src/ui/main/main-container.tsx)
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Cannot read properties of undefined (reading 'exports')
    at tryRunOrWebpackError (/home/michael/git/remote-mixer/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/michael/git/remote-mixer/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/home/michael/git/remote-mixer/node_modules/webpack/lib/Compilation.js:4936:18)
    at /home/michael/git/remote-mixer/node_modules/webpack/lib/Compilation.js:5007:20
    at symbolIterator (/home/michael/git/remote-mixer/node_modules/neo-async/async.js:3485:9)
    at done (/home/michael/git/remote-mixer/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/home/michael/git/remote-mixer/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/michael/git/remote-mixer/node_modules/webpack/lib/Compilation.js:4914:43
    at symbolIterator (/home/michael/git/remote-mixer/node_modules/neo-async/async.js:3482:9)
    at timesSync (/home/michael/git/remote-mixer/node_modules/neo-async/async.js:2297:7)
-- inner error --
TypeError: Cannot read properties of undefined (reading 'exports')
    at Object.getModuleExports (/home/michael/git/remote-mixer/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js:10:58)
    at Module.<anonymous> (/home/michael/git/remote-mixer/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!/home/michael/git/remote-mixer/node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js!/home/michael/git/remote-mixer/frontend/src/ui/main/main-container.tsx:23:62)
    at /home/michael/git/remote-mixer/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval (eval at create (/home/michael/git/remote-mixer/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/michael/git/remote-mixer/node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (/home/michael/git/remote-mixer/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/michael/git/remote-mixer/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/home/michael/git/remote-mixer/node_modules/webpack/lib/Compilation.js:4936:18)
    at /home/michael/git/remote-mixer/node_modules/webpack/lib/Compilation.js:5007:20
    at symbolIterator (/home/michael/git/remote-mixer/node_modules/neo-async/async.js:3485:9)

Reproducible Demo

I have created a branch in my remote-mixer project: https://github.com/kryops/remote-mixer/tree/linaria3-beta16-error (Edit: Now with 2 commits on top to fix the issues)

Going back one commit shows that 3.0.0-beta.15 does not seem to be affected.

You can use the following commands to reproduce the problems:

• yarn to install the dependencies
• yarn frontend build runs a normal webpack build (you can verify that the result is ok by running yarn build and then yarn start:prod)
• yarn start starts the dev server

Thanks for looking into it!

[malash]

@kryops I’v reviewed your repo and got the following conclusion:

1. The `Cannot find module ‘undefined’ error should be fixed in https://github.com/callstack/linaria/pull/890 and is waiting to be released.

2. You should use [name].css for the filename of mini-css-extract-plugin, although you may want to extra all CSS into one file, the output filename should be determined by cacheGroups.

       new ExtractCssPlugin({
         ignoreOrder: true,
-        filename: 'styles.css',
+        filename: '[name].css',
       }),

By changing that line, there should be two CSS file been generated to frontend/dist folder. And if you force them to style.css, a conflict error thrown.

1. So what if you do want to use one CSS file in dist folder ? You can use the type field of cacheGroups.

        cacheGroups: {
           styles: {
             name: 'styles',
             idHint: 'styles',
-            test: /\.css$/,
+            type: 'css/mini-extract',
             chunks: 'all',
             enforce: true,
           }
        }

1. The root cause of this issue, is when Linaria changed to use inline match resource after #879 , the .linaria.css became a virtual module, its module.nameForCondition() which is used by SplitChunksPlugin also changed from path/to/xxx.linaria.css to path/to/xxx.tsx. The test: /\.css$/ cannot match these CSS files anymore.

In conclusion, this issue happened because of an outdate Webpack config and a bug in latest Linaria v2/v3 https://github.com/callstack/linaria/pull/890

cc @Anber

[ntucker]

Regarding [React Refresh] Failed to get exports for module: undefined. - this is fundamentally limited to react-refresh injecting itself into virtual modules like the following:

{
  layer: null,
  request: '/home/ntucker/src/anansi/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!/home/ntucker/src/anansi/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!/home/ntucker/src/anansi/node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js?cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js!/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
  userRequest: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx.webpack[javascript/auto]!=!/home/ntucker/src/anansi/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!/home/ntucker/src/anansi/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!/home/ntucker/src/anansi/node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js?cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js!/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
  rawRequest: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx.webpack[javascript/auto]!=!!!/home/ntucker/src/anansi/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!/home/ntucker/src/anansi/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!/home/ntucker/src/anansi/node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js?cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js!/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
  loaders: [
    {
      loader: '/home/ntucker/src/anansi/node_modules/css-loader/dist/cjs.js',
      options: [Object],
      ident: 'ruleSet[1].rules[6].oneOf[1].use[1]'
    },
    {
      loader: '/home/ntucker/src/anansi/node_modules/postcss-loader/dist/cjs.js',
      options: [Object],
      ident: 'ruleSet[1].rules[6].oneOf[1].use[2]'
    },
    {
      loader: '/home/ntucker/src/anansi/node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js',
      options: 'cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js',
      ident: undefined
    }
  ],
  resource: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
  context: '/home/ntucker/src/anansi/examples/linaria/src',
  matchResource: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
  resourceResolveData: {
    _ResolverCachePluginCacheMiss: true,
    context: {
      issuer: '/home/ntucker/src/anansi/examples/linaria/src/App.linaria.css',
      issuerLayer: undefined,
      compiler: undefined
    },
    path: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
    request: undefined,
    query: '',
    fragment: '',
    module: false,
    directory: false,
    file: false,
    internal: false,
    fullySpecified: false,
    descriptionFilePath: '/home/ntucker/src/anansi/examples/linaria/package.json',
    descriptionFileData: {
      name: 'example-linaria',
      version: '3.0.21',
      private: true,
      scripts: [Object],
      devDependencies: [Object],
      dependencies: [Object],
      browserslist: [Array]
    },
    descriptionFileRoot: '/home/ntucker/src/anansi/examples/linaria',
    relativePath: './src/App.tsx',
    __innerRequest_request: undefined,
    __innerRequest_relativePath: './src/App.tsx',
    __innerRequest: './src/App.tsx'
  },
  settings: { type: 'javascript/auto' },
  type: 'javascript/auto',
  parser: JavascriptParser {
    hooks: {
      evaluateTypeof: [HookMap],
      evaluate: [HookMap],
      evaluateIdentifier: [HookMap],
      evaluateDefinedIdentifier: [HookMap],
      evaluateCallExpressionMember: [HookMap],
      isPure: [HookMap],
      preStatement: [Hook],
      blockPreStatement: [Hook],
      statement: [Hook],
      statementIf: [Hook],
      classExtendsExpression: [Hook],
      classBodyElement: [Hook],
      classBodyValue: [Hook],
      label: [HookMap],
      import: [Hook],
      importSpecifier: [Hook],
      export: [Hook],
      exportImport: [Hook],
      exportDeclaration: [Hook],
      exportExpression: [Hook],
      exportSpecifier: [Hook],
      exportImportSpecifier: [Hook],
      preDeclarator: [Hook],
      declarator: [Hook],
      varDeclaration: [HookMap],
      varDeclarationLet: [HookMap],
      varDeclarationConst: [HookMap],
      varDeclarationVar: [HookMap],
      pattern: [HookMap],
      canRename: [HookMap],
      rename: [HookMap],
      assign: [HookMap],
      assignMemberChain: [HookMap],
      typeof: [HookMap],
      importCall: [Hook],
      topLevelAwait: [Hook],
      call: [HookMap],
      callMemberChain: [HookMap],
      memberChainOfCallMemberChain: [HookMap],
      callMemberChainOfCallMemberChain: [HookMap],
      optionalChaining: [Hook],
      new: [HookMap],
      expression: [HookMap],
      expressionMemberChain: [HookMap],
      unhandledExpressionMemberChain: [HookMap],
      expressionConditionalOperator: [Hook],
      expressionLogicalOperator: [Hook],
      program: [Hook],
      finish: [Hook]
    },
    sourceType: 'auto',
    scope: undefined,
    state: undefined,
    comments: undefined,
    semicolons: undefined,
    statementPath: undefined,
    prevStatement: undefined,
    currentTagData: undefined
  },
  parserOptions: undefined,
  generator: JavascriptGenerator {},
  generatorOptions: undefined,
  resolveOptions: undefined
}

My issue https://github.com/callstack/linaria/issues/897 is the same problem, manifested differently due to me overriding the entry module.

While making the injection check in react-refresh-webpack-plugin like so match(moduleData.matchResource || moduleData.resource) && it solves some of the cases, but the above module is still getting through and should be excluded at this step.

It would be helpful if someone understood the nature of .webpack[javascript/auto] type files. I couldn’t find anything on the internet so I’m a bit stumped for now.