Upgrading from next@11 to next@12 breaks css-loader support

[bragle]

Verify canary release

• [X] I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:

• Platform: win32
• Arch: x64
• Version: Windows 10 Pro

Binaries:

• Node: 16.13.1
• npm: 8.1.2
• Yarn: 1.22.10
• pnpm: N/A

Relevant packages:

• next: 12.0.11-canary.21
• react: 17.0.2
• react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The monaco editor comes with CSS files. Up until next@12, it has been possible to include these with the css-loader-package. After upgrading from next@11 to next@12, that is no longer possible, and I get the following error message:

./node_modules/css-loader/dist/cjs.js!./node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css
Module not found: ValidationInvalid generator object. Asset Modules Plugin has been initialized using a generator object that does not match the API schema.
 - generator has an unknown property 'filename'. These properties are valid:
   object { dataUrl? }
   -> Generator options for asset/inline modules.

Expected Behavior

I'd expect it to build as it would in next@11

To Reproduce

Try building next-11 and next-12 here: https://github.com/bragle/css-loader-issue-example. next-11 builds as expected, while next-12 does not. The only difference between the files in the folders are the next version

[sanniassin]

Added this snippet into webpack config in next.config.js as a temporary workaround until it's fixed.

webpack: config => {
  // 'filename' is specific to 'asset/resource' type only, but incompatible with 'asset/inline',
  // see https://webpack.js.org/guides/asset-modules/#custom-output-filename.
  // Here we rename generator['asset'] into generator['asset/resource'] to avoid conflicts with inline assets.
  if (config.module.generator?.asset?.filename) {
    if (!config.module.generator['asset/resource']) {
      config.module.generator['asset/resource'] = config.module.generator.asset
    }
    delete config.module.generator.asset
  }
  return config
}

[rodrigonzalz]

I've been getting same error since 12.0, causing me many issues to upgrade my application. I will try now with @sanniassin workaround but I hope this gets fixed soon.

[bragle]

Works for me, @sanniassin. Thanks a bunch! Will use this till the issue gets resolved 😸

[balazsorban44]

This seems to be a duplicate of #31692, so I'm closing in favor of that.

[sanniassin]

@balazsorban44 Though both https://github.com/vercel/next.js/issues/31692 and this issue refer to monaco-editor, I don't think they are related because I use custom CSS config without monaco-editor and still face the same issue.

Here's a minimal repo. It's actually using an inline background image that breaks the build: https://github.com/sanniassin/next12-custom-css-assets-bug/blob/master/styles/globals.css#L3

[rodrigonzalz]

@balazsorban44 I don't see at all how can you say this is a duplicate of #31692 when they don't seem to be anywhere related, not even close. I don't use monaco-editor either and I face this issue. Please check @sanniassin repo and re open this issue so it can be properly fixed and closed.

[balazsorban44]

At the time of closing this issue, the only reproduction was from the OP, which very specifically is about monaco-editor, hence marked as a duplicate (based on this comment https://github.com/vercel/next.js/issues/31692#issuecomment-996204970). So the OP's issue should be fixed at the root, as described in #31692

I don't use monaco-editor either and I face this issue.

Keep in mind, you talk about your own use case, but this issue was opened by someone else, with their own reproduction, being specific about monaco-editor. https://github.com/vercel/next.js/issues/34501#issuecomment-1046771478 is unfortunately insufficient information to infer that your use case is related. Could you please add your own reproduction? That's always the biggest help to us resolving an issue. :pray:

Part of my comment from https://github.com/vercel/next.js/issues/31692#issuecomment-1063046912 still applies here. When using a custom webpack config, you deliberately try to override Next.js rules that might have changed between 11 and 12, so without a proper reproduction, it is hard to tell how to accommodate for that.

I'll now look at @sanniassin's reproduction and see if it's similar in any case :+1:

Let's reopen then for further investigation.

[skitsanos]

Had the same issue today with using Ant.Design, the piece provided by @sanniassin did the trick, thank you big time.

So, if anyone the whole next.config.js assembled to work with Ant.Design, here it is:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = async (phase, {defaultConfig}) =>
{
    return {
        ...defaultConfig,

        webpack: config =>
        {
            // 'filename' is specific to 'asset/resource' type only, but incompatible with 'asset/inline',
            // see https://webpack.js.org/guides/asset-modules/#custom-output-filename.
            // Here we rename generator['asset'] into generator['asset/resource'] to avoid conflicts with inline assets.
            if (config.module.generator?.asset?.filename) {
                if (!config.module.generator['asset/resource']) {
                    config.module.generator['asset/resource'] = config.module.generator.asset
                }
                delete config.module.generator.asset
            }

            config.resolve.alias['@'] = path.resolve(__dirname, 'src');

            config.plugins.push(new MiniCssExtractPlugin({
                filename: 'static/[name].css'     // this is the secret sauce to play nice with the Next dev server
            }));

            config.module.rules.push({
                    test: /\.(css)$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /\.(less)$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'less-loader',
                            options: {
                                lessOptions: {
                                    javascriptEnabled: true,
                                    math: 'always'
                                }
                            }
                        }
                    ]
                });

            return config;
        }
    };
};

[jankaifer]

Is this something people still experience in next@13?

[bragle]

@JanKaifer I have added a next-13 example to https://github.com/bragle/css-loader-issue-example. Unfortunately, I get the same error as I got in next-12. @sanniassin's solution still works, though.

[jankaifer]

Thanks for checking.

[bkingery]

I ran into this error today trying to inline images in next@13.5.5.

Error:

[NEXT] Module not found: Invalid generator object. Asset Modules Plugin has been initialized using a generator object that does not match the API schema.
[NEXT]  - generator has an unknown property 'filename'. These properties are valid:
[NEXT]    object { dataUrl? }
[NEXT]    -> Generator options for asset/inline modules.

next.config.js:

{
  ...
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(png|jpg|jpeg)$/i,
      resourceQuery: /inline/,
      type: 'asset/inline',
    });
    return config;
  },
  ...
}

@sanniassin's solution worked for me.

[Chenalejandro]

Using monaco-editor-webpack-plugin can solve this issue (with next.js 14). I submitted a PR to add an example template

[bragle]

@Chenalejandro, unfortunately, your example doesn't address the main issue here. This problem specifically pertains to webpack loaders. While your solution successfully enables the import of CSS from monaco-editor using the tailwindcss-package, it doesn't resolve the core issue with the loaders.