webpack misconfiguration: webpack or the upstream loader did not supply a source-map

[HeWei-imagineer]

Hi, I use CRA5.0.1 and craco7.1.0 to build my project. There is a file in the node_modules folder of my project, the path looks like /xxx/dist/PopConfirm/style/index.less. Here's what content in the file

@import (reference) '../../theme';

then, when I run my project, I get a warning

resolve-url-loader: webpack misconfiguration webpack or the upstream loader did not supply a source-map

I'm not sure if the issue comes from resolve-url-loader or webpack5, can you help check? thanks~

[HeWei-imagineer]

Here is my craco configuration

// Don't open the browser during development
process.env.BROWSER = 'none';

const { CracoAliasPlugin } = require('react-app-alias');
const CracoLessPlugin = require('craco-less');
const fs = require('fs');
const path = require('path');
const lessToJS = require('less-vars-to-js');
const CracoAntdStylePlugin = require('./webpack/craco-antd-style-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { EnvironmentPlugin } = require('webpack');
const antdThemeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './src/config/theme.less'), 'utf8'));
const { getLoader, loaderByName } = require('@craco/craco');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  // fixed:Support for the experimental syntax 'jsx' isn't currently enabled
  // https://github.com/babel/babel/issues/12018
  babel: {
    presets: [
      [
        '@babel/preset-react',
        {
          runtime: 'automatic',
        },
      ],
    ],
    plugins: [
      [
        // doc: https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin
        '@emotion',
        {
          autoLabel: 'dev-only',
          labelFormat: '[local]',
          cssPropOptimization: true,
        },
      ],
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true,
        },
      ],
      // to avoid warning messages, see MR: https://gitlab.myteksi.net/grabads/ads-experience/ads-ui/-/merge_requests/56
      ['@babel/plugin-proposal-private-methods', { loose: true }],
      ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
      [
        'babel-plugin-transform-imports',
        {
          lodash: {
            // eslint-disable-next-line no-template-curly-in-string
            transform: 'lodash/${member}',
            preventFullImport: true,
          },
        },
      ],
    ],
    loaderOptions: (babelLoaderOptions, { env, paths }) => {
      return babelLoaderOptions;
    },
  },
  webpack: {
    plugins: {
      add: [
        new EnvironmentPlugin({
          VERSION: (() => {
            if (process.env.NODE_ENV === 'development') return 'development';

            return process.env.VERSION ? JSON.stringify(process.env.VERSION) : 'unknown';
          })(),
        }),
        new NodePolyfillPlugin({
          excludeAliases: ['console'],
        }),
      ],
    },
    configure: (webpackConfig, { env, paths }) => {
      // add lego-ui path to compile the svg file
      webpackConfig.module.rules.push({
        type: 'javascript/auto',
        test: /\.(svg)$/,
        use: ['@svgr/webpack', 'url-loader'],
        include: [path.resolve(__dirname, 'node_modules/@ads/lego-ui/src/assets'), path.resolve(__dirname, 'src/assets')],
      });

      const babelLoader = getLoader(webpackConfig, loaderByName('babel-loader'));
      webpackConfig.module.rules.push({
        ...babelLoader.match.loader,
        include: [path.resolve(__dirname, 'node_modules/@ads/lego-ui/src')],
      });

      // json
      webpackConfig.module.rules.push({
        type: 'javascript/auto',
        test: /\.(json)$/,
        exclude: [/node_modules/, /lang/, /__mocks__/],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
          },
        },
      });
      // for bundle analyze
      // if (process.env.IS_BUNDLE_ANALYSIS) {
      webpackConfig.plugins.push(
        new BundleAnalyzerPlugin({
          generateStatsFile: true,
        }),
      );
      // }
      if (process.env.NODE_ENV !== 'development') {
        webpackConfig.output.filename = '[name].[chunkhash:8].js';
      }
      // webpackConfig.optimization = {
      //   splitChunks: {
      //     cacheGroups: {
      //       ag_grid: {
      //         chunks: 'all',
      //         test: /[\\/]node_modules[\\/](ag-grid-community|ag-grid-enterprise|ag-grid-react|ag-grid-core)[\\/]/,
      //         name: 'ag_grid',
      //         enforce: true,
      //         priority: 1,
      //       },
      //       grab_ui: {
      //         chunks: 'all',
      //         test: /[\\/]node_modules[\\/]grab-ui[\\/]/,
      //         name: 'grab_ui',
      //         enforce: true,
      //         priority: 1,
      //       },
      //       echarts: {
      //         chunks: 'all',
      //         test: /[\\/]node_modules[\\/]echarts[\\/]/,
      //         name: 'echarts',
      //         enforce: true,
      //         priority: 1,
      //       },
      //       vendor: {
      //         chunks: 'all',
      //         test: /[\\/]node_modules[\\/](react|react-dom|lodash|antd|axios|react-use|react-query|react-redux|react-router|react-router-dom)[\\/]/,
      //         name: 'vendor',
      //         enforce: true,
      //         priority: 2,
      //       },
      //       others_deps: {
      //         chunks: 'all',
      //         test: /[\\/]node_modules[\\/]/,
      //         name: 'others_deps',
      //         enforce: true,
      //         priority: -1,
      //       },
      //     },
      //   },
      // };

      // To solve The create-react-app imports restriction outside of src directory, such as Buffer
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin',
      );
      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);

      // if the files are from /node_modules, allow it to not support sourcemap
      webpackConfig.ignoreWarnings = [
        function ignoreSourcemapsloaderWarnings(warning) {
          return (
            warning.module &&
            warning.module.resource.includes('node_modules') &&
            warning.details &&
            warning.details.includes('source-map-loader')
          );
        },
      ];
      return webpackConfig;
    },
  },
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          '@assets': './src/assets',
          '@components': './src/components',
          '@modules': './src/modules',
          '@constants': './src/constants',
          '@hooks': './src/hooks',
          '@utils': './src/utils',
          '@slices': './src/slices',
          '@apis': './src/apis',
          '@services': './src/services',
          '@troy': './src/modules/troy',
          '@mocks': './src/mocks',
        },
      },
    },
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: antdThemeVariables,
            javascriptEnabled: true,
            // fixed - Error evaluating function `unit`: the first argument to unit must be a number.
            // https://github.com/Semantic-Org/Semantic-UI-LESS/issues/74
            math: 'always',
          },
        },
      },
    },
    {
      plugin: CracoAntdStylePlugin,
    },
  ],

  jest: {
    configure: {
      setupFiles: ['<rootDir>/jest/__mocks__/index.ts', 'jest-localstorage-mock', 'jest-canvas-mock'],
      coverageReporters: ['html'],
    },
  },
};

And here is the file arise the issue, index.less

@import (reference) '../../theme';