SVG display problem of build production package

[AdamShi]

Describe the bug

I encountered a problem with SVG display:
When running yarn tauri dev locally, SVG is displayed normally;
After executing the command yarn tauri build to generate the Mac installation package and installing it, SVG is no longer displayed and an error is reported:

[Log] Error: Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js): (common.d69916cf.js, line 2)
Project/node_modules/async-function/require.mjs:1
(function (exports, require, module, __filename, __dirname) { import getAsyncFunction from './index.js';
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (node:vm:117:7)
    at NativeCompileCache._moduleCompile (Project/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
    at Module._compile (Project/node_modules/v8-compile-cache/v8-compile-cache.js:184:36)
    at node:internal/modules/cjs/loader:1706:10
    at Object.newLoader [as .js] (Project/node_modules/pirates/lib/index.js:134:7)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require (Project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (Project/node_modules/is-async-function/index.js:13:20)
    at Module._compile (Project/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Module._compile (Project/node_modules/pirates/lib/index.js:129:24)
    at node:internal/modules/cjs/loader:1706:10
    at Object.newLoader [as .js] (Project/node_modules/pirates/lib/index.js:134:7)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require (Project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (Project/node_modules/which-builtin-type/index.js:13:23)
    at Module._compile (Projectnode_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Module._compile (Project/node_modules/pirates/lib/index.js:129:24)
    at node:internal/modules/cjs/loader:1706:10
    at Object.newLoader [as .js] (Project/node_modules/pirates/lib/index.js:134:7)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require (Project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (Project/node_modules/reflect.getprototypeof/implementation.js:6:24)
    at Module._compile (Project/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Module._compile (Project/node_modules/pirates/lib/index.js:129:24)
    at node:internal/modules/cjs/loader:1706:10
    at Object.newLoader [as .js] (Project/node_modules/pirates/lib/index.js:134:7)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require Project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (Project/node_modules/reflect.getprototypeof/polyfill.js:3:22)
    at Module._compile (Project/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Module._compile (Project/node_modules/pirates/lib/index.js:129:24)
    at node:internal/modules/cjs/loader:1706:10
    at Object.newLoader [as .js] (Project/node_modules/pirates/lib/index.js:134:7)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require (Project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (Project/node_modules/typed-array-byte-offset/index.js:5:11)

How should I solve this problem?

Reproduction

package.json:

"react": "^16.12.0",
"webpack": "^4.29.0",
"svg-sprite-loader": "^6.0.11",
"svgo-loader": "3.0.1",

webpack config:

exports.copyStaticFile = ({ copy }) => ({
  plugins: [new CopyWebpackPlugin(copy)],
});

exports.loadImages = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        test: /\.(png|jpg)$/,
        include,
        exclude,
        use: {

          loader: 'url-loader',
          options,
        },
      },
    ],
  },
});

exports.loadFonts = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        test: /\.(ttf|eot|woff|svg|woff2)$/,
        include,
        exclude,
        use: {
          loader: 'url-loader',
          options,
        },
      },
    ],
  },
});

exports.loadJavaScript = ({ include, exclude } = {}) => ({
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        include,
        exclude,
        use: [
          'thread-loader',
          'babel-loader',
        ]
      },
      {
        test: /\.js$/,
        include: /node_modules[\\\/]@tauri-apps[\\\/]plugin-http/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // {
      //   test: /\.css$/,
      //   use: ['style-loader', 'css-loader']
      // },
      {
        test: /\.css$/,
        loader: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          // 'postcss-loader'
        ],
      },
      // {
      //   test: /\.less$/,
      //   use: ['style-loader', 'css-loader', 'less-loader']
      // },
      {
        test: /\.less$/,
        loader: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
          // 'postcss-loader'
        ],
      },
      {
        test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: 'file-loader?name=assets/[name].[ext]',
      },
      {
        test: /\.svg$/,
        include: [path.resolve(__dirname, 'app/')],
        use: [
          { loader: 'svg-sprite-loader', options: {} },
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                {
                  name: 'removeAttrs',
                  params: {
                    attrs: '(fill|stroke)',
                  },
                },
              ],
            },
          },
        ],
      },
    ],
  },
});

components/Svg/index.jsx:

import React from 'react'
import config from 'config';
import './index.less'
import { isSDK, getUrlQuery } from 'utils';

const importAll = (requireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('../../assets/svg/', true, /\.svg$/));} catch (error) {console.log(error);}
const skin = isSDK ? `#${getUrlQuery('vicolor')}` : config.skin;
// const skin = isSDK ? config.skin : config.skin;

const Icon = (props) => {
  return (
    <svg className={`${props.className}`} fill={props.fill ? props.fill : skin} style={props.style} /* stroke="#111111"  */ onClick={props.onClick}>
      <use xlinkHref={'#' + props.name} />
    </svg>
  )
}

export default Icon;

svg related code:

import Icon from 'components/Svg'


<div className='banner_con_btn'>
                            {/* todo: metax  */}
                            {token ? <Link className={classNames('banner_con_btn', classes.link)} to={config.brand === 'mytest' ? '/mock' : (config.feature? "/aaa" : "/bbb")}><FormattedMessage id="aaa" /></Link>
                                : <Link className={classNames('banner_con_btn', classes.link)} to="/login"><FormattedMessage id="entries" /></Link>}
                            <Link className={classNames('banner_con_btn_app', classes.btn)} to="/download"><Icon name='banner_apple' style={{ width: 20, height: 20 }} fill="#fff" /></Link>
                            <Link className={classNames('banner_con_btn_andriod', classes.btn)} to="/download"><Icon name='banner_android' style={{ width: 20, height: 20 }} fill="#fff" /></Link>
                            <div className={classNames('banner_con_btn_qrcode', classes.btn_hover)} ><Icon name='banner_download' style={{ width: 20, height: 20 }} fill="#fff" />
                                <div className={classNames(classes.banner_con_btn_qrcode_box)} >
                                    <div className={classes.QRcode}>
                                        <QRCode
                                            size={136}
                                            value={DownloadUrl.get('1010') || ''}
                                            style={{ margin: 'auto' }}
                                        />
                                    </div>
                                    <div className={classes.QRcodeDes}><FormattedMessage id="entries" /></div>
                                    {/* <FormattedMessage id="entries" /> */}
                                </div>
                            </div>

                        </div>

Expected behavior

SVG images can be displayed normally in both dev packages and build packages

Full tauri info output

[✔] Environment
    - OS: Mac OS 15.5.0 x86_64 (X64)
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.86.0 (05f9846f8 2025-03-31)
    ✔ cargo: 1.86.0 (adf9b6ad1 2025-02-28)
    ✔ rustup: 1.28.1 (f9edccde0 2025-03-05)
    ✔ Rust toolchain: stable-x86_64-apple-darwin (default)
    - node: 22.14.0
    - yarn: 1.22.22
    - npm: 11.2.0

[-] Packages
    - tauri 🦀: 2.5.1
    - tauri-build 🦀: 2.2.0
    - wry 🦀: 0.51.2
    - tao 🦀: 0.33.0
    - @tauri-apps/api : 2.5.0
    - @tauri-apps/cli : 2.5.0

[-] Plugins
    - tauri-plugin-http 🦀: 2.4.3, (outdated, latest: 2.4.4)
    - @tauri-apps/plugin-http : 2.4.3
    - tauri-plugin-log 🦀: 2.4.0
    - @tauri-apps/plugin-log : not installed!
    - tauri-plugin-fs 🦀: 2.2.1, (outdated, latest: 2.3.0)
    - @tauri-apps/plugin-fs : not installed!

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../build
    - devUrl: http://localhost:9090/
    - framework: React
    - bundler: Webpack
✨  Done in 44.14s.

Stack trace

Additional context

No response

[Legend-Master]

The error looks like there're some misconfigurations around your bundler, it's been a while since the last time I played with webpack so I can't tell what's going on immediately