Cypress Component Testing Missing package.json - reactjs

Question

I have a React App that uses webpack and Cypress E2E testing. I'm trying to use Cypress component testing. I have written a simple test as follows:
describe('Hello World Test', () => {
it ('Button', () => {
mount(<Button>Test button</Button>)
cy.get('button').contains('Test button').click()
})
});
When I run npx cypress open-ct I get the following error:
Your pluginsFile threw an error from: .../experimentation/webpack-transition/cypress/plugins/index.js
Error: Cannot find module 'react-scripts/package.json'
When I look in to my node_modules folder that file does not exist under
#cypress/react/plugins/react-scripts/package.json (DNE)
cypress.json is as follows:
{
"baseUrl": "http://localhost:8080",
"component": {
"componentFolder": "src",
"testFiles": "**/*spec.{js,jsx,ts,tsx}"
}
}
package.json is as follows:
{
"name": "webpack-transition",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"bundle": "webpack",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --env ENV=dev --mode development --open --hot",
"build": "webpack ---env ENV=dev --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/plugin-proposal-class-properties": "^7.16.7",
"#babel/plugin-proposal-object-rest-spread": "^7.17.3",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"#babel/preset-typescript": "^7.16.7",
"#types/react": "^17.0.40",
"#types/react-dom": "^17.0.13",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.2.3",
"css-loader": "^6.7.1",
"cypress": "^9.5.1",
"dotenv-webpack": "^7.1.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.6.0",
"source-map-loader": "^3.0.1",
"style-loader": "^3.3.1",
"typescript": "^4.6.2",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"#cypress/react": "^5.12.4",
"#cypress/webpack-dev-server": "^1.8.2",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#hookform/resolvers": "^2.8.8",
"#mui/icons-material": "^5.5.0",
"#mui/lab": "^5.0.0-alpha.72",
"#mui/material": "^5.5.0",
"#reduxjs/toolkit": "^1.8.0",
"aws-amplify": "^4.3.16",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.28.0",
"react-icons": "^4.3.1",
"react-redux": "^7.2.6",
"yup": "^0.32.11"
}
}
webpack.config is as follows:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = (env) => ({
entry: './src/components/index.tsx',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
exclude: /node_modules/,
use: ['file-loader?name=[name].[ext]']
}
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
favicon: './public/favicon.ico'
}),
new MiniCssExtractPlugin({
filename: './src/index.css',
}),
new Dotenv({
path: `./.env.${env.ENV}`
}),
]
});
I'm either using the wrong version of a library or I'm missing a configuration somewhere.

Answer 1

It looks like you configured /cypress/plugins/index.js for Create React App (CRA) but have not use it to create your react app.
From the docs Install
React (using CRA)
// cypress/plugins/index.js
module.exports = (on, config) => {
if (config.testingType === 'component') {
require('#cypress/react/plugins/react-scripts')(on, config)
}
return config
}
Instead try the Generic Webpack configuration
// cypress/plugins/index.js
module.exports = (on, config) => {
if (config.testingType === 'component') {
const { startDevServer } = require('#cypress/webpack-dev-server')
// Your project's Webpack configuration
const webpackConfig = require('../../webpack.config.js')
on('dev-server:start', (options) =>
startDevServer({ options, webpackConfig })
)
}
}