SVG loading stops working when upgrading from 18.0.4 to 18.0.5 for @nx/next #22362
Comments
|
By migrating from the v17 to v18 of NX I got also an error to use ReactComponent from svg imports. The workaround is to set/override with the right rules. You can do it in the next.config.js file, in the nextConfig you can add such thing : webpack: (config) => {
config.module.rules = config.module.rules.filter((rule) => {
return !rule.test?.toString().includes('.svg');
});
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.(js|ts|md)x?$/,
use: [
{
loader: '@svgr/webpack',
options: { svgo: false, titleProp: true, ref: true },
},
{
loader: 'file-loader',
options: { name: '[name].[hash].[ext]' },
},
],
});
return config;
}First it will remove the existing rules for svg, then set the right rules to import as before. It requires the packages svgr and file-loader to be installed ofc |
|
Having same issue. I had to downgrade to 18.0.4. |
|
Seems something was added in 18.0.5 related to svg, #21761. Pretty sure, that's causing it to break, as I modified my with-nx.js locally to what was there previously. It works fine. |
You can do the same thing without the deprecated file-loader by setting the webpack: (config) => {
config.module.rules = config.module.rules.filter((rule) => {
return !rule.test?.toString().includes('.svg');
});
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.(js|ts|md)x?$/,
use: [
{
loader: '@svgr/webpack',
options: { svgo: false, titleProp: true, ref: true, exportType: 'named' },
},
],
});
return config;
} |
|
I have the same issue. Spent the entire day trying to figure out what's wrong. Just now decided to check the open issues on GitHub. |
|
I have the same issue: For me, the issue appears when upgrading from |
|
ran in the issue while upgrading to nx 18. Solved using @stephenwade snippet + react-svgr doco - https://react-svgr.com/docs/next/ added // first - disable nx svgr
//.....
"nx": {"svgr": false},
//.....
// then override the webpack rules
webpack: (config, { webpack, isServer, nextRuntime }) => {
const fileLoaderRule = config.module.rules.find((rule) =>
rule.test?.test?.('.svg'),
)
config.module.rules.push(
// Reapply the existing rule, but only for svg imports ending in ?url
{
...fileLoaderRule,
test: /\.svg$/i,
resourceQuery: /url/, // *.svg?url
},
// Convert all other *.svg imports to React components
{
test: /\.svg$/i,
issuer: fileLoaderRule.issuer,
resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
use: [{
loader: '@svgr/webpack',
options: { svgo: false, titleProp: true, ref: true, exportType: 'named' },
},],
},
)
// Modify the file loader rule to ignore *.svg, since we have it handled now.
fileLoaderRule.exclude = /\.svg$/i
return config;
} |
|
This has been fixed here and is in the latest canary ( A patch version will be released this week. |
|
This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context. |
Current Behavior
We are loading in SVGs in our NextJS application as follows:
This works in @nx/next v18.0.4, but stops working when upgrading to
18.0.5or18.1.x.It seems that in both the newer 18.0 and 18.1 releases the following PR was released:
#21761
Expected Behavior
Code should keep working as is, especially if no major or minor upgrade done.
GitHub Repo
samvloeberghs/nx-error-example@2194432
Steps to Reproduce
npx nx dev exampleNx Report
Failure Logs
Failure example reproduction repo:
Failure internal project:
Package Manager Version
No response
Operating System
Additional Information
I generated a default next.js project.
Added a simple SVG file.
Imported it.
Set the configuration as described here: https://nx.dev/recipes/react/adding-assets-react
It does yield another error as the one I have, but it might be related I guess.
Additionaly, The message in nx report
can be ignored I guess, as I tried downgrading till I went back to the last working version and then worked my way up to see which version started failing.
The text was updated successfully, but these errors were encountered: