asset/inline not working in next 12

[Risbot]

Verify canary release

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

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Home
Binaries:
Node: 16.14.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.1.6
react: 17.0.2
react-dom: 17.0.2

warn - Latest canary version not detected, detected: "12.1.6", newest: "12.1.7-canary.6".
Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When add a webpack configuration

config.module.rules.push({
  test: /\.svg/,
  type: 'asset/inline'
});

I get error when try to build:

./pages/index.js
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

Build will be executed sucessfuly with import images in the base64

To Reproduce

1. Create new empty project
2. Create folder assets and adds some svg imege
3. Import image to page/index.js
4. Add webpack configuration for asset/inline to next js config
5. execute yarn build

[gyarasu]

I'm also having this issue.

[timothympace]

Ran across this issue and went down the rabbit hole of debugging...

The webpack configuration that is created by nextjs uses the global module.generator.asset configuration option to set the filename on asset modules. This can be seen here

Webpack will use module.generator.asset to merge any options defined in it into any asset type (asset/inline, etc), which can be seen here

So now, my question is whether this is a nextjs bug or a webpack bug. IMO, I believe this is a webpack bug. Setting options for asset that are incompatible with asset/inline should not be merged to the local options.

Anyways, for now, I have this in my nextjs webpack config to unblock me:

    config.module.generator['asset/resource'] = config.module.generator['asset'];
    config.module.generator['asset/source'] = config.module.generator['asset'];
    delete config.module.generator['asset'];

There's probably a cleaner way to handle that, but it is good enough for now for me.

[timothympace]

Opened a bug with webpack: webpack/webpack#16063

[timothympace]

Sounds like nextjs should either avoid using config.module.generator.asset.filename OR it's left to people to modify the webpack config in next.config: webpack/webpack#16063 (comment)

[longzheng]

This problem still remains in Next.js 13 (13.0.4 as of writing)

I also wanted to use asset/inline and could not.

I tried using @timothympace's solution in my next.config.js

    webpack(config, context) {
        config.module.rules.push(
            // rule for inlining bitmap images with the query parameter ?inline (e.g. test.png?inline)
            {
                test: /\.png/,
                type: 'asset/inline',
                resourceQuery: /inline/,
            },
        );

        // workaround for Next.js overriding webpack `config.module.generator` which breaks asset/inline
        // https://github.com/vercel/next.js/discussions/36981#discussioncomment-3167331
        config.module.generator['asset/resource'] = config.module.generator['asset'];
        config.module.generator['asset/source'] = config.module.generator['asset'];
        delete config.module.generator['asset'];

        return config;
    },

but the output is always a base64 of some metadata, not the actual image file. For example I was seeing

data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgeyJzcmMiOiIvX25leHQvc3RhdGljL21lZGlhL2lhYi10ZWNoLWxhYi1zZWFsX05FV19mb290ZXIuZDExZjQ5ZTQucG5nIiwiaGVpZ2h0Ijo0MDAsIndpZHRoIjozMjAsImJsdXJEYXRhVVJMIjoiL19uZXh0L2ltYWdlP3VybD0lMkZfbmV4dCUyRnN0YXRpYyUyRm1lZGlhJTJGaWFiLXRlY2gtbGFiLXNlYWxfTkVXX2Zvb3Rlci5kMTFmNDllNC5wbmcmdz02JnE9NzAiLCJibHVyV2lkdGgiOjYsImJsdXJIZWlnaHQiOjh9Ow==

which is actually this decoded

export default {"src":"/_next/static/media/iab-tech-lab-seal_NEW_footer.d11f49e4.png","height":400,"width":320,"blurDataURL":"/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fiab-tech-lab-seal_NEW_footer.d11f49e4.png&w=6&q=70","blurWidth":6,"blurHeight":8};

EDIT: Turns out this is because the next-image-loader loader was running first and was already manipulating the output, so by the time my custom asset/inline rule gets to it, it is base64 encoding the result from next-image-loader.

[longzheng]

I figured out a workaround by patching the default Next.js webpack config to disable the next-image-loader from running if ?inline is specified (as well as fixing the config.module.generator bug discovered by @timothympace

I have something like

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    webpack(config, context) {
        patchNextjsWebpackImageLoaderForInline(config);
        return config;
    }
}

module.exports = nextConfig

function patchNextjsWebpackImageLoaderForInline(config) {
    // workaround for Next.js overriding webpack `config.module.generator` for all of "asset" module types
    // although it works for "asset/resource" and "asset/source" types, it breaks asset/inline
    // https://github.com/vercel/next.js/discussions/36981#discussioncomment-3167331
    config.module.generator['asset/resource'] = config.module.generator['asset'];
    config.module.generator['asset/source'] = config.module.generator['asset'];
    delete config.module.generator['asset'];

    // find the Next.js image loader rule configured by Next.js automatically
    // disable it for imports with a query parameter ?inline
    const imageRule = config.module.rules.find((rule) => rule.loader === 'next-image-loader');
    imageRule.resourceQuery = { not: /inline/ };

    // add a custom rule for importing bitmap files with a query parameter ?inline
    // to use the webpack asset/inline module
    config.module.rules.push({
        test: /\.(jpg|gif|png)$/i,
        resourceQuery: /inline/,
        type: 'asset/inline',
    });
}

And now I can use

import image from 'images/test.png?inline'; // the query parameter ?inline controls this behaviour

export default function Page() {
    return <img src={image} alt="" />; // src is "data:image/png;base64,iVBORw0..."
}

[kutsan]

I'm also having trouble with asset/inline loader in Next.js v14. Do you guys have a solution?

[jeremy-code]

Did you have any problems with the above solutions?

[mattrigg9]

Heads up, for NextJS 15, I had to adapt the workaround. The new 'next-image-loader' looks like this:

{
  test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,
  loader: 'next-image-loader',
  issuer: { not: /\.(css|scss|sass)$/ },
  dependency: { not: [ 'url' ] },
  resourceQuery: {
    not: [
      /__next_metadata__/,
      /__next_metadata_route__/,
      /__next_metadata_image_meta__/
    ]
  },
  options: {
    isDev: true,
    compilerType: 'server',
    basePath: '',
    assetPrefix: ''
  }
}

So we need to push /inline/ to the resourceQuery.not rule, rather than overwriting it:

  const imageRule = config.module.rules.find(
    (rule) => rule.loader === "next-image-loader",
  );

  imageRule.resourceQuery.not.push(/inline/);

Here is the new, full patch for NextJS 15:

const patchNextjsWebpackImageLoaderForInline = (config) => {
  // workaround for Next.js overriding webpack `config.module.generator` for all of "asset" module types
  // although it works for "asset/resource" and "asset/source" types, it breaks asset/inline
  // https://github.com/vercel/next.js/discussions/36981#discussioncomment-3167331
  config.module.generator["asset/resource"] = config.module.generator.asset;
  config.module.generator["asset/source"] = config.module.generator.asset;
  delete config.module.generator.asset;

  // find the Next.js image loader rule configured by Next.js automatically
  // disable it for imports with a query parameter ?inline
  const imageRule = config.module.rules.find(
    (rule) => rule.loader === "next-image-loader",
  );

  imageRule.resourceQuery.not.push(/inline/);

  // add a custom rule for importing bitmap files with a query parameter ?inline
  // to use the webpack asset/inline module
  config.module.rules.push({
    test: /\.(jpg|gif|png|webp)$/i,
    resourceQuery: /inline/,
    type: "asset/inline",
  });
};


const nextConfig = {
    webpack(config, context) {
        patchNextjsWebpackImageLoaderForInline(config);
        return config;
    }
}