Module not found: Invalid generator object. Asset Modules Plugin has been initialized using a genera-CodePudding

Getting an error with nextjs when using 'asset/inline' Asset Module Type in custom webpack config when running yarn dev. I was trying to use the 'asset/inline' asset module type to export the URI of the imported image inline but got this error. However, using 'asset' instead of 'asset/inline' shows no error.

Error:

error - ./pages/index.js:2:0
Module not found: Invalid 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.
  1 | import React from 'react';
> 2 | import test from '../test.jpeg'
  3 | 
  4 | const Page = () => {
  5 |     return (

https://nextjs.org/docs/messages/module-not-found

package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0"
  }
}

next.config.js:

module.exports = {
    webpack: (config, options) => {
      config.module.rules.push({
        test: /\.jpeg/,
        type: 'asset/inline',
      })
  
      return config
    },
  }

pages/index.js:

import React from 'react';
import test from '../test.jpeg'

const Page = () => {
    return (
        <>
            <div>Index Page</div>
            <img src={test} alt="pulkit"/>
        </>
    )
}

export default Page;

Folder Structure:

app
  |--node_modules
  |--package.json
  |--test.jpeg
  |--next.config.js
  |--pages
         |--index.js

CodePudding user response：

UPDATED

This article also mentioned your related configs

https://survivejs.com/webpack/loading/images/

type: "asset/inline" emits your resources as base64 strings within the emitted assets. The process decreases the number of requests needed while growing the bundle size. The behavior corresponds with url-loader.

You can try this out instead

config.module.rules.push({
      test: /\.jpeg/,
      type: 'asset',
      parser: { dataUrlCondition: { maxSize: 15000 } },
})

If you are concerned about the image performance, you can try next/image which has a bundle of image performance helpers.

Another aspect, I'd also like to tell you that with asset/inline, all your images will be converted to base64 and embedded in HTML which will increase your initial web loading time. (https://bunny.net/blog/why-optimizing-your-images-with-base64-is-almost-always-a-bad-idea/)

OLD ANSWER

From my understanding, asset/inline is for data URIs with prefix like this data: (https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs). The problem with your case is images are in bytes and cannot convert to correct formats for display (if your images are base64, you may be able to use asset/inline)

I'm personally using asset/resource instead to have URIs

You can modify your configs this way

module.exports = {
    webpack: (config, options) => {
      config.module.rules.push({
        test: /\.jpeg/,
        type: 'asset/resource',
      })
  
      return config
    },
  }

Here is a very useful article to help you understand it deeper https://dev.to/smelukov/webpack-5-asset-modules-2o3h

I found how we use assets in Webpack 5 here too

{
   test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
   type: 'asset/resource'
},
{
   test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
   type: 'asset/inline'
},

Hopefully, it can help you to solve your problem

CodePudding user response：

You don't need the extra custom webpack configuration to import images, Next.js already provides a built-in way to statically import local images.

Remove your custom webpack config, then modify your component's code according to the following snippet.

import React from 'react';
import test from '../test.jpeg'

const Page = () => {
    return (
        <>
            <div>Index Page</div>
            <img src={test.src} alt="pulkit"/>
        </>
    )
}

export default Page;

In addition to the src field, you also have access to the width and height of the image if you wish to use that in the <img> element.

From the Image Optimization documentation:

Next.js will automatically determine the width and height of your image based on the imported file. These values are used to prevent Cumulative Layout Shift while your image is loading.