Next.js Discord

Discord Forum

Opt out of using next/image for image files in `import` statements?

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
I have a project where next/image provides little value, but would like to bundle some SVG files. By default imports yield something with any type, and the helpful message "Use any to avoid conflicts with @svgr/webpack plugin or babel-plugin-inline-react-svg plugin." This is not expected or desired behavior. In fact I would rather use one of the the plugins being avoided! The returned object does have a property with a packed url for the image, but it feels really unstable/hacky to use an undocumented property on an any object.

Does anyone have any experience modifying the webpack configruation? Are we even still using webpack?

3 Replies

Asian black bearOP
It looks like webpack is still in the tech stack! Removing any loaders configured to use next-image seems like a good start!

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack:(config, options) =>{
        config.module.rules=config.module.rules.filter (rule=>!rule?.loader==='next-image-loader')
        return config;
    }
}
Asian black bearOP
Some bibliographical info: https://github.com/vercel/next.js/issues/48177
Asian black bearOP
This is about next.js 11, but the part about how to override next-env.d.ts still works, and is conspicuously missing from the next 13 docs. https://duncanleung.com/next-js-typescript-svg-any-module-declaration/