merobal
commented
1 year ago It works well with v15.4.5 and it's broken at 15.4.6 and above (still with 15.5.3).
Closed jamieathans closed 1 year ago
merobal
commented
1 year ago It works well with v15.4.5 and it's broken at 15.4.6 and above (still with 15.5.3).
DanielSchiavini
commented
1 year ago I recently upgraded to 15.5.3 and now some png images from a library projected aren't loading anymore.
For example, one has src="data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAic3BsYXNoLWltYWdlLnBuZyI7"
which after decoding means export default __webpack_public_path__ + \"splash-image.png\";
asherccohen
commented
1 year ago Confirm it's still an issue for 15.5.2
canyavall
commented
1 year ago Same here, any updates?
DanielSchiavini
commented
1 year ago There's a working workaround in https://github.com/nrwl/nx/issues/14532
asherccohen
commented
1 year ago the workaround doesn't work for me, I get undefined for the imported SVG. It fixes images, but not svgs.
martinmosko
commented
1 year ago @asherccohen This is getting a bit wild, but possible to fix it with another extension to webpack.config 🙈 Hopefully NX guys will fix it soon 🙏
https://nx.dev/recipes/other/adding-assets-react#adding-svgs
const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');
// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
config.module.rules = config.module.rules.map((rule) => {
if (/file-loader/.test(rule.loader)) {
return {
...rule,
test: /\.(eot|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/, // Excluding `svg`
type: "javascript/auto", // Fixing images
};
}
return rule;
});
// This will properly handle imported svg's
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack', 'url-loader']
});
return config;
});Your awesome, thanks!
Just a note, I had to change it a bit, this is what works for me:
const { merge } = require("webpack-merge");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = (config, context) => {
// eslint-disable-next-line no-console
console.log("🚀 ~ Loading Custom Webpack");
config.module.rules = config.module.rules.map((rule) => {
if (/file-loader/.test(rule.loader)) {
return {
...rule,
test: /\.(eot|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/, //Have to remove svg from here
type: "javascript/auto", // This is fixing issue https://webpack.js.org/guides/asset-modules/
};
}
return rule;
});
const newConfig = merge(config, {
module: {
rules: [
{
test: /\.svg$/,
use: ["@svgr/webpack", "url-loader"],
type: "javascript/auto",
},
],
},
resolve: {
fallback: {
fs: false,
},
},
plugins: [new NodePolyfillPlugin()],
node: {
global: true,
},
});
return newConfig;
};
vadimka123
commented
1 year ago In case of withReact and last nx version workaround
const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');
// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(
withNx(),
withReact(),
(config) => {
// https://github.com/nrwl/nx/issues/14378
config.module.rules = config.module.rules.map((rule) => {
if (/file-loader/.test(rule.loader)) {
return {
...rule,
test: /\.(eot|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/, // Excluding `svg`
type: "javascript/auto", // Fixing images
};
}
if (rule.test && rule.test.test('.svg')) {
return {
...rule,
use: ['@svgr/webpack', 'url-loader']
}
}
return rule;
});
return config;
},
);
janeklb
commented
1 year ago For anyone using TypeScript and / or wanting a cleaner plugin-based fix, here's something that worked for me:
const withSvgFix: () => NxWebpackPlugin = () => (config) => {
config.module?.rules?.forEach((rule) => {
if (typeof rule === 'string') {
return;
}
if (typeof rule.loader !== 'undefined' && /file-loader/.test(rule.loader)) {
rule.test = /\.(eot|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/; // Excluding `svg`
rule.type = 'javascript/auto'; // Fixing images
}
if (rule.test instanceof RegExp && rule.test.test('.svg')) {
rule.use = ['@svgr/webpack', 'url-loader'];
}
});
return config;
};
// to be used with `composePlugins`
// eg.
composePlugins(withNx(), withReact(), withSvgFix(), (config) => {
// etc.
return config;
});
slavoroi
commented
1 year ago Waiting for a fix to upgrade :)
Version 15.4.5 works.
Still an issue with 15.6.3 and 15.7.2.
Waiting for a solution as it's a breaking change for react users.
sancelot
commented
1 year ago working solution with nx 15.6.3 , react and webpack,
webpack.config.js
const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');
// Nx plugins for webpack.
module.exports = composePlugins(
withNx({
nx: {
svgr: true,
},
}),
withReact({ svgr: true }),
(config) => {
return config;
}
);
usage :
import Logo from '-!@svgr/webpack!./assets/images/applepay.svg';
export default Logo;import Logo from '@github-test/shared/assets';
export const ApplePayIcon = () => {
return <Logo />;
};
refs https://stackoverflow.com/questions/75380788/nx-react-assets-cant-be-resolved/75385066#75385066
rathpc
commented
1 year ago I would say that this could be a workaround but I would hardly call it a solution to this problem. The massive changes that happened in 15.4.6 are sadly breaking and should never have been introduced as a patch version upgrade.
Can we please get a proper fix for this in a new release?
slavoroi
commented
1 year ago ### Works again in 15.8.5.
A custom webpack example (lint is something we wanted to add):
const ESLintPlugin = require('eslint-webpack-plugin');
const { withReact } = require('@nrwl/react');
const { composePlugins, withNx } = require('@nrwl/webpack');
module.exports = composePlugins(
withNx(),
withReact(),
(config, { options, context }) => {
config.plugins.push(new ESLintPlugin());
return config;
}
);
JulioC
commented
1 year ago It looks like SVGs are working now with 15.8.5, but importing .css files from .tsx files are still causing compilation issues.
The workaround I've been using is similar to the one described earlier for .svg files:
// Based on https://github.com/nrwl/nx/issues/14378#issuecomment-1417523527
const withCssFix: () => NxWebpackPlugin = () => (config) => {
let found = false;
config.module?.rules?.forEach((rule) => {
if (typeof rule === 'string') {
return;
}
if (rule.test instanceof RegExp && rule.test.test('.css')) {
if (found) {
rule.test = () => false;
}
found = true;
}
});
return config;
};
export default composePlugins(
withNx(),
withReact(),
withCssFix()
);
ToxicToast
commented
1 year ago Its not fixed for me. After Loading SVG's from a Blob, i've got following Error Message: "error on line 1 at column 1: Document is empty"
It worked on Version 15.4.5
My Old Webpack Config:
const { merge } = require('webpack-merge');
module.exports = (config) => {
return merge(config, {
module: {
rules: [
{
oneOf: [
{
test: /\.svg$/,
type: 'asset/resource',
generator: {
filename: 'assets/skidfluss/[name].[hash:8].[ext]',
},
},
{
test: /\.svg$/,
type: 'asset/resource',
generator: {
filename: 'assets/svg/[name].[hash:8].[ext]',
},
},
],
},
],
},
});
};
xiongemi
commented
1 year ago i could no longer replicate this issue with @nx/react@16, @nx/webpack@16, webpack@5.75.0. closing this issue for now.
github-actions[bot]
commented
1 year ago 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
As documented in Adding Images, Fonts, and Files, importing an SVG and referencing it in an HTML
imgtag appears broken.Using NX 15.5.1, the generated HTML is:
<img src="http://localhost:8081/logo.svg">Using NX 15.4.5, the generated HTML is:
<img src="http://localhost:8081/logo.8f643a94aabfcf565a9b934459ac7b98.svg">Expected Behavior
As documented in Adding Images, Fonts, and Files, importing an SVG and referencing it in an HTML
imgtag should work.It was working correctly using NX 15.4.5.
Github Repo
No response
Steps to Reproduce
Import an SVG and reference it in an
imgtag as described here - Adding Images, Fonts, and Files.Nx Report
Failure Logs
No response
Additional Information
Using NX 15.5.1, the appears t be 2 generated assets:
so it appears that the generated HTML
imgtag is pointing to a JavaScript function ...