Webpack upgrade from v4 to v5 loader errors

[abrahamcuenca]

Hello folks, I have a project that was recently upgraded from webpack v4 to webpack v5. I followed the migration guide here https://webpack.js.org/migrate/5/ and everything so far has been going swell with the exception of encountering a few errors related to tests files which should be excluded causing issues when building the application.

Error:

Module parse failed: Unexpected token (13:33)
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
| 
|   test('should render basic HTML', () => {
>     const { container } = render(<SessionExpiredPage {...mockBasicProps} />);
|     expect(container).toMatchSnapshot();
|   });
 @ ./src/pages/ lazy ^\.\/.*$ namespace object ./session-expired-page/session-expired-page.presentation.test.jsx ./session-expired-page/session-expired-page.presentation.test
 @ ./src/core/router/routes.js 5:11-44
 @ ./src/core/router/Router.jsx 1:335-364 1:819-835 1:902-921 1:998-1023 1:1271-1287 1:1362-1379 1:1457-1477 1:1575-1591 1:1694-1718 1:1815-1830 1:1929-1944 1:2048-2073 1:2172-2193 1:2294-2315 1:2412-2438 1:2594-2622 1:2725-2749 1:2854-2880 1:2992-3025 1:3122-3141 1:3237-3255 1:3358-3375 1:3477-3501 1:3594-3609 1:3708-3728 1:3826-3846 1:3960-3980 1:4076-4094 1:4216-4242 1:4368-4397 1:4521-4548 1:4646-4663 1:4756-4777 1:4864-4890 1:4966-4990 1:5028-5047
 @ ./src/core/router/index.js 1:0-40 1:0-40
 @ ./src/index.jsx 1:199-231 1:1092-1098
 @ ./src/index.js 1:320-349 1:1279-1282

webpack 5.90.0 compiled with 9 errors in 62126 ms

I've combed through documentation to exclude .test.js and *.test.jsx files however it seems they are still being included.
I've also added the exclusions to my babel config. I'm not sure at this point how to proceed. Has anyone encountered a similar issue?

As an aside, we have another team that is working on a similar project and we have pretty similar packages and webpack configs but they are not encountering the issue.

Any guidance in the right direction would be greatly appreciated.

[nyngwang]

I think they will need your webpack.config.js. It looks like a typo/wrong-set of the regex of test/exclude in modules.rules. I can help and you don't need to provide the full webpack.config.js. Just provide me the section you set for modules.rules.

[abrahamcuenca]

Thank you @nyngwang I also wonder if the order in which the loaders are defined could be something that could affect the rules.

Here is the rules section

rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
      },
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules|\.test\.jsx?$|\.snap$/,
        loader: 'babel-loader',
        options: {
          compact: true,
        },
      },
      {
        test: /\.(s[ac]|c)ss$/i,
        type: 'asset/resource',
        use: [
          {
            loader: mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          },
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                auto: true,
              },
              importLoaders: 1,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              postcssOptions: {
                plugins: [
                  [
                    postCssFlexBugsFixes,
                    autoprefixer,
                    {
                      flexbox: 'no-2009',
                    },
                  ],
                ],
              },
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              webpackImporter: true,
              implementation: require.resolve('sass'),
              sassOptions: {
                outputStyle: 'compressed',
                additionalData: '@use "@/styles/sass-resources.scss";',
                includePaths: [path.resolve(__dirname, 'src/styles')],
              },
            },
          },
        ],
        ```

[nyngwang]

@abrahamcuenca Could you please try this first: remove your exclude-rule for babel-loader first and see whether the error would disappear:

- exclude: /node_modules|\.test\.jsx?$|\.snap$/,

I suspect that those .jsx tags might not be processed due to this exclusion rule. IIRC, a testing framework might expect to see the older syntax(i.e. not ES6, or it's called CJS, anyway) so you might have to transpile some of your testing files if you're writing in ES6+. (the arrow function in your case implies this.)

[abrahamcuenca]

Thank you, @nyngwang. This resolved the issue with importing test files. I appreciate your time and assistance!

[nyngwang]

@abrahamcuenca If you need to exclude files in /node_modules and/or .snap, you still need to add them back to make Babel transpile your project correctly, e.g. in your case, you probably still want to avoid transpiling third-party packages and snapshots with Babel. The point to keep in mind is that a testing framework usually written at the time ESM was not popular, so you have to transpile your modern EJS project into CJS by Babel before it can be read by the testing framework. By the way, you're welcome.