You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I had an issue with trying to get @svgr/webpack working with the latest rc (6.3-rc.10). Basically, I couldn't get @svgr/webpack to work, even though it worked fine before, and works fine with the latest nextjs (v11).
The issue turned out to be that the default asset loader was taking priority over the configured svgr/webpack loader. I tried modifying the config in two ways - using unshift, and using push. Neither let me override the default. I ended up just hacking the test:
webpackFinal: (config)=>{// find and disable the default loader for svg filesconstassetLoader=config.module.rules.find((rule)=>rule.test.test(".svg"),);assetLoader.test=/\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
Once I did that, the loader worked just fine. Thought I'd share in case anyone has a similar issue, or maybe even has a better way.
Here's my whole config for context (it also has a way to enable readable classnames in storybook output - this should be the default):
webpackFinal: (config)=>{// find and disable the default loader for svg filesconstassetLoader=config.module.rules.find((rule)=>rule.test.test(".svg"),);assetLoader.test=/\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;// Make class properties readableconstsassLoader=config.module.rules.find((rule)=>rule.test.test(".scss"),);consti=sassLoader.use.findIndex((ldr)=>ldr.loader&&/css\-loader/.test(ldr.loader),);sassLoader.use[i].options={importLoaders: 1,url(url,resourcePath){// Disable handling links to static assets in /publicif(url.startsWith("/"))returnfalse;returntrue;},modules: {compileType: "module",mode: "local",auto: true,exportGlobals: true,localIdentName: "[name]__[local]--[hash:base64:5]",},};config.module.rules.unshift({test: /\.svg$/,oneOf: [{dependency: {not: ["url"]},use: ["babel-loader",{loader: "@svgr/webpack",options: {svgoConfig: {plugins: [{removeViewBox: false,},],},},},"new-url-loader",],issuer: {and: [/\.(js|ts)x?|\.(scss|css)$/],},},{type: "asset",},],});returnconfig;},
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I had an issue with trying to get @svgr/webpack working with the latest rc (6.3-rc.10). Basically, I couldn't get @svgr/webpack to work, even though it worked fine before, and works fine with the latest nextjs (v11).
The issue turned out to be that the default asset loader was taking priority over the configured svgr/webpack loader. I tried modifying the config in two ways - using unshift, and using push. Neither let me override the default. I ended up just hacking the test:
Once I did that, the loader worked just fine. Thought I'd share in case anyone has a similar issue, or maybe even has a better way.
Here's my whole config for context (it also has a way to enable readable classnames in storybook output - this should be the default):
Beta Was this translation helpful? Give feedback.
All reactions