Module not found: Error: Can't resolve 'icons/circle.svg' in ...

[capdavid]

Hello,

so I added @svgr/webpack to my webpack config, but it is behaving like it is not there at all and I am still getting an error Module not found: Error: Can't resolve 'icons/circle.svg' in ..... Can anybody help me, what exactly am I doing wrong?

I also tried adding path.resolve(__dirname, 'icons') to resolve.modules, did not help.

My webpack.config.js

module.exports = {
  mode: isProduction ? 'production' : 'development',
  resolve: {
    extensions: ['.ts', '.js', '*'],
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
  entry: './src/index.tsx',
  output: {
    filename: 'booking-wizard.js',
    path: path.resolve(__dirname, '..', '..', 'theme-app-extension/assets'),
  },
  module: {
    rules: [
     {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        resolve: {
          extensions: ['.ts', '.tsx', '.js', '.json'],
        },
        use: 'ts-loader',
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
    ],
  },
  devtool: isProduction ? undefined : 'source-map',
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'booking-wizard.css',
    }),
    new Dotenv(),
    new HtmlWebpackPlugin({
      title: 'Custom template',
      template: 'index.html',
    }),
  ],
  optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
    ],
  },
}

[capdavid]

So I finally found a solution, it's adding resolve.alias:

resolve: {
    alias: {
      icons: path.resolve(process.cwd(), 'icons/'),
}
}