reactjs - Webpack throws error for a file in node_modules

Question

When I try to run Webpack, it throws an error:

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| .k-theme-test-class,
| .k-common-test-class {
 @ ./src/App.js 19:0-52
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

At first I thought the issue is the @ symbol and then I realized it is not supposed to even run through node_modules, right?

My webpack.config.js is:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const PrettierPlugin = require('prettier-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  entry: ['@babel/polyfill', './src/index.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: '/',
  },
  devServer: {
    historyApiFallback: true,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
      {
        test: /.s?css$/,
        exclude: /node_modules/,
        oneOf: [
          {
            test: /.module.s?css$/,
            exclude: /node_modules/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    localIdentName: '[name]__[local]___[hash:base64:5]',
                  },
                  sourceMap: true,
                },
              },
              { loader: 'sass-loader' },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [['autoprefixer', {}]],
                  },
                },
              },
            ],
          },
          {
            exclude: /node_modules/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
          },
        ],
      },
      {
        test: /.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=10000&name=img/[name].[ext]',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '/src/index.html'),
      filename: 'index.html',
      inject: 'body',
    }),
    new ESLintPlugin(),
    new MiniCssExtractPlugin(),
    // new PrettierPlugin({
    //   configFile: '.prettierrc',
    // }),
  ],
};

If I remove the 3 css-related exclude: I get the following error:

ERROR in ./node_modules/@progress/kendo-theme-default/dist/all.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Internal Error: Incompatible units: 'px' and 'em'.

    at C:wwwSvilaSvilaReactsvila-erp
ode_moduleswebpacklibNormalModule.js:316:20
    at C:wwwSvilaSvilaReactsvila-erp
ode_modulesloader-runnerlibLoaderRunner.js:367:11
    at C:wwwSvilaSvilaReactsvila-erp
ode_modulesloader-runnerlibLoaderRunner.js:233:18
    at context.callback (C:wwwSvilaSvilaReactsvila-erp
ode_modulesloader-runnerlibLoaderRunner.js:111:13)
    at Object.callback (C:wwwSvilaSvilaReactsvila-erp
ode_modulessass-loaderdistindex.js:62:7)
    at Object.done [as callback] (C:wwwSvilaSvilaReactsvila-erp
ode_modules
eo-asyncasync.js:8069:18)
    at options.error (C:wwwSvilaSvilaReactsvila-erp
ode_modules
ode-sasslibindex.js:293:32)
 @ ./src/App.js 19:0-52
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

where the culprit is: border-width: max( 1px, .015em );. This is invalid sass and can be generally fixed by wrapping with calc border-width: calc(max( 1px, .015em )); as mentioned here

So I have the following questions in order of importance:

1. Why does this file get piped through the loaders, given it has a exclude: /node_modules/?
2. Are files from external libraries supposed to be piped through the loaders/plugins in Webpack, or do they have another way of including themselves in the dev/production version?
3. Why is the .js for babel-loader excluding /node_modules/ but not s?css? (I see such tendency around random webpack.config.js files)
4. Interestingly enough, the culprit line margin-left: calc(24px + 1em); is actually a valid css according to World Wide Web Consortium. That makes me wonder - should a plain css be piped at all through a sass-loader? Maybe this is not entirely correct, or is it?
5. What is the right way to fix it?

question from:https://stackoverflow.com/questions/65926338/webpack-throws-error-for-a-file-in-node-modules

Answer 1

Waitting for answers