Cypress component testing error Module parse failed: Unexpected token

Question

Follow up this question

I am using NX 14.5.1 and cypress 10.2.0.

I tried another way by creating a custom webpack (I catched from "node_modules/@nrwl/react/plugins/webpack.js") and adding "process.env" into it.

const webpack = require('webpack')
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

Object.defineProperty(exports, '__esModule', { value: true })
exports.getWebpackConfig = void 0

function getClientEnvironment() {
  // Grab NODE_ENV and NX_* environment variables and prepare them to be
  // injected into the application via DefinePlugin in webpack configuration.
  const NX_APP = /^NX_/i

  const raw = Object.keys(process.env)
    .filter((key) => NX_APP.test(key))
    .reduce((env, key) => {
      env[key] = process.env[key]
      return env
    }, {})

  // Stringify all values so we can feed into webpack DefinePlugin
  return {
    process: raw
  }
}

// Add React-specific configuration
function getWebpackConfig(config) {
  var _a
  config.module.rules.push({
    test: /\.svg$/,
    oneOf: [
      // If coming from JS/TS or MDX file, then transform into React component using SVGR.
      {
        issuer: /\.(js|ts|md)x?$/,
        use: [
          {
            loader: require.resolve('@svgr/webpack'),
            options: {
              svgo: false,
              titleProp: true,
              ref: true
            }
          },
          {
            loader: require.resolve('url-loader'),
            options: {
              limit: 10000,
              name: '[name].[hash:7].[ext]',
              esModule: false
            }
          }
        ]
      },
      // Fallback to plain URL loader.
      {
        use: [
          {
            loader: require.resolve('url-loader'),
            options: {
              limit: 10000,
              name: '[name].[hash:7].[ext]'
            }
          }
        ]
      }
    ]
  })
  config.module.rules.push({
    test: /\.?js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', '@babel/preset-react']
      }
    }
  })
  if (config.mode === 'development' && ((_a = config['devServer']) === null || _a === void 0 ? void 0 : _a.hot)) {
    // add `react-refresh/babel` to babel loader plugin
    const babelLoader = config.module.rules.find((rule) => {
      var _a
      return (
        typeof rule !== 'string' &&
        ((_a = rule.loader) === null || _a === void 0 ? void 0 : _a.toString().includes('babel-loader'))
      )
    })
    if (babelLoader && typeof babelLoader !== 'string') {
      babelLoader.options['plugins'] = [
        ...(babelLoader.options['plugins'] || []),
        [
          require.resolve('react-refresh/babel'),
          {
            skipEnvCheck: true
          }
        ]
      ]
    }
    // add https://github.com/pmmmwh/react-refresh-webpack-plugin to webpack plugin
    config.plugins.push(new ReactRefreshPlugin())
    config.plugins.push(new webpack.DefinePlugin(getClientEnvironment()))
  }
  return config
}
exports.getWebpackConfig = getWebpackConfig
module.exports = getWebpackConfig

I changed my "cypress.config.ts" to:

import { defineConfig } from 'cypress'

export default defineConfig({
  component: { 
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      webpackConfig: webpackConfig
    }
  }
})

When I run cypress component testing I got a new error

ERROR in ./cypress/component/ui/button/button.cy.js 6:13
Module parse failed: Unexpected token (6:13)
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
| describe('Button', () => {
|   it('it should mounts button', () => {
>     cy.mount(<LoadingButton loading={'true'} text={'Submit'} loadingText={'Loading...'}/>)
|   })
| })

What should I do in a custom webpack? do I miss something to add?