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
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
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
widthandheightof your image based on the imported file. These values are used to prevent Cumulative Layout Shift while your image is loading.