Integrate svgr/webpack

bud
,
1

I tried to integrate the svgr/webpack loader without success.

bud.hooks.on(`build.module.rules.oneOf`, (rules = []) => {
  rules.unshift({
    test: /\.svg$/,
    issuer: /\.[jt]sx?$/, // Matches JavaScript or TypeScript files
    use: [`@svgr/webpack`],
  });

  return rules;
});

When importing the svg it still return the URL instead of the svgr component even when forcing it like so:

import ShapeSVG from '!@svgr/webpack!../../images/svg/shape-cta-biomc.svg';

Dunno whats happening… I think it still use the assets modules of webpack instead.

Any idea? Is someone managed to figured it out?


  "devDependencies": {
    "@roots/bud": "6.20.0",
    "@roots/bud-sass": "^6.20.0",
    "@roots/bud-tailwindcss": "6.20.0",
    "@roots/sage": "6.20.0",
    "@svgr/webpack": "^8.1.0",
    "@wordpress/api-fetch": "^7.1.0",
    "@wordpress/icons": "^9.47.0",
    "node-sass-glob-importer": "^5.3.3"
  },

sources:

https://webpack.js.org/guides/asset-modules/
https://react-svgr.com/docs/webpack/

2

It is really frustrating to receive no help at all from the community and the authors. The lack of supports and the abstraction layers of bud.js over webpack configurations make it more difficult in my opinion. What’s the purpose of using bud.js in this case… tell me?

3

It’s been two hours on a work day, my dude. Everyone on this forum is a volunteer.

What does your code look like? What do the errors you receive look like?

What have you tried?

4

Well, it’s just that i never got answered to my last topics.

Like i said, i have no errors, it just still return the url instead of the svgr component.

This is my bud.config.js

import globImporter from 'node-sass-glob-importer';
import fs from 'fs';
import ThemeConfig from './theme.config.js';

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/sage/docs sage documentation}
 * @see {@link https://bud.js.org/learn/config bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (bud) =>
{
    // Add svgr/webpack loader
    bud.hooks.on(`build.module.rules.oneOf`, (rules = []) =>
    {
        rules.unshift({
            test: /\.svg$/,
            issuer: /\.[jt]sx?$/, // Matches JavaScript or TypeScript files
            use: [
                {
                    loader: `@svgr/webpack`,
                    options: {
                        icon: true,
                    },
                },
            ],
        });

        return rules;
    });

    /**
     * Development settings
     */
    bud.when(bud.isDevelopment, () =>
    {
        bud.devtool('source-map');
        bud.postcss.setSourceMap(true);
    });

    /**
     * Production settings
     */
    bud.when(bud.isProduction, () =>
    {
        bud.devtool(false);
        bud.minimize();
    });

    /**
     * Add sass glob importer
     */
    bud.tap(bud =>
    {
        /** @ts-ignore */
        bud.build.items.sass.setOptions(
            {
                sourceMap: true,
                sassOptions: {
                    importer: globImporter(),
                }
            }
        )
    });

    /**
     * Application assets & entrypoints
     *
     * @see {@link https://bud.js.org/reference/bud.entry}
     * @see {@link https://bud.js.org/reference/bud.assets}
     */
    bud
        .entry('app', ['@scripts/app', '@styles/app'])
        .entry('editor', ['@scripts/editor', '@styles/editor'])
        .assets(['images', 'fonts']);

    /**
     * Set public path
     * 
     * @see {@link https://bud.js.org/reference/bud.setPublicPath}
     */
    bud.setPublicPath('/wp-content/themes/sage/public/');

    /**
     * Add aliases
     * 
     * @see {@link https://bud.js.org/reference/bud.alias}
     */
    bud.alias('@node', fs.realpathSync('node_modules'));

    /**
     * Development server settings
     *
     * @see {@link https://bud.js.org/reference/bud.setUrl}
     * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
     * @see {@link https://bud.js.org/reference/bud.watch}
     */
    bud
        .setUrl('http://localhost:3005')
        .setProxyUrl('http://localhost')
        .watch(['resources/views', 'app']);

    /**
     * Theme configuration
     */
    bud.wpjson
        .setSettings(ThemeConfig.settings)
        .setStyles(ThemeConfig.styles)
        .useTailwindColors()
        .useTailwindFontFamily()
        .useTailwindFontSize()
        .useTailwindSpacing();
};
5

Like i tought the problem is related at how priority is set with assets modules of webpack.

Doing so make the svgr to work but will disable inline and ressource in script files… For my need it’s okay i dont use thoses.

bud.build.rules.svg.setIssuer(/^(?!.*\.(js|ts|jsx)$).*$/);
bud.build.rules['inline-svg'].setIssuer(/^(?!.*\.(js|ts|jsx)$).*$/);