Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

replace babel-svg-loader with svgr+new-url-loader #4595

Merged
merged 2 commits into from
Jul 18, 2021
Merged

replace babel-svg-loader with svgr+new-url-loader #4595

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3bebf36
replace babel-svg-loader with svgr+new-url-loader
KutnerUri Jul 18, 2021
3e8e764
move new-url-loader to react/component.json
KutnerUri Jul 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 15 additions & 13 deletions scopes/react/react/webpack/webpack.config.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,18 +135,6 @@ export default function (isEnvProduction = false): Configuration {
configFile: false,
customize: require.resolve('babel-preset-react-app/webpack-overrides'),
presets: [require.resolve('@babel/preset-react')],
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @KutnerUri. I'm not familiar with the code base but it looks like you were using some svgr options in your previous config. So you may want to include these options in the svgr loader config. Example:

{
  loader: '@svgr/webpack',
  options: {
    svgo: false,
    titleProp: true,
    ref: true,
  },
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ooh, thanks for the catch. I will add it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marella - I think it's safe to enable svgo (svg optimizer). We copied the config from Create React App.
What do you think?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know why CRA has it disabled, might be related to facebook/create-react-app#5062
If you want to enable it, I think you should have a look at its default plugins. For example removeViewBox plugin is enabled by default but some users might not want viewBox to be removed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok. thanks :)

},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
Expand Down Expand Up @@ -308,7 +296,21 @@ export default function (isEnvProduction = false): Configuration {
},
},
},

{
// loads svg as both inlineUrl and react component, like:
// import starUrl, { ReactComponent as StarIcon } from './star.svg';
// (remove when there is native support for both opitons from webpack5 / svgr)
test: /\.svg$/,
oneOf: [
{
dependency: { not: ['url'] }, // exclude new URL calls
use: [require.resolve('@svgr/webpack'), require.resolve('new-url-loader')],
},
{
type: 'asset', // export a data URI or emit a separate file
},
],
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
Expand Down
14 changes: 1 addition & 13 deletions scopes/ui-foundation/ui/webpack/webpack.base.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export default function createWebpackConfig(
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
KutnerUri marked this conversation as resolved.
Show resolved Hide resolved
type: 'asset',
parser: {
dataUrlCondition: {
Expand All @@ -172,18 +172,6 @@ export default function createWebpackConfig(
babelrc: false,
configFile: false,
customize: require.resolve('babel-preset-react-app/webpack-overrides'),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
Expand Down
1 change: 1 addition & 0 deletions workspace.jsonc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@
"mousetrap": "1.6.5",
"nanoid": "3.1.20",
"nerf-dart": "1.0.0",
"new-url-loader": "0.1.1",
KutnerUri marked this conversation as resolved.
Show resolved Hide resolved
"parallel-webpack": "2.6.0",
"parse-es6-imports": "1.0.1",
"parse-package-name": "0.1.0",
Expand Down