Where can I find the actual package.json and package-lock.json for building react + webpack?

Question

React

I try this and nothing runs

ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 403:6-26
Module not found: Error: Can't resolve 'uglify-js' in 'C:\Users\Anriko \Desktop\react homework\FD3-Pauls\ishop3\node_modules\terser-webpack-plugin\dist

ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 481:14-34
Module not found: Error: Can 't resolve '@swc/core' in 'C:\Users\Anriko\Desktop\react homework\FD3-Pauls\ishop3\node_modules\terser-webpack-plugin\dist'

ERROR in ./node_modules/terser/node_modules/source -map/lib/read-wasm.js 20:13-26
Module not found: Error: Can't resolve 'fs' in 'C:\Users\Anriko\Desktop\react homework\FD3-Pauls\ishop3\node_modules\ terser\node_modules\source-map\lib'

ERROR in ./node_modules/watchpack/lib/DirectoryWatcher.js 9:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\Anriko\Desktop\react homework\FD3-Pauls\ishop3 \node_modules\watchpack\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

{
  "name": "ishop3",
  "version": "1.0.0",
  "description": "",
  "main": "product.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development webpack-dev-server",
    "build": "webpack --mode prodaction "
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-upgrade": "^1.0.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-stage-0": "^7.8.3",
    "babel-loader": "^8.1.0",
    "css-loader": "^6.2.0",
    "lite-server": "^2.6.1",
    "mini-css-extract-plugin": "^2.2.2",
    "style-loader": "^3.2.1",
    "util": "^0.12.4",
    "webpack": "^5.52.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.1.1"
  }
}

Answer 1

Technically, I strongly advise you not to suffer from garbage, and use react-scripts (well, react-scripts eject if you really need to run handles under the hood), but a couple of months ago, for educational purposes, I made myself such an assembly:

{
  "name": "react-empty-template",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack serve --mode=development --hot",
    "build": "cross-env NODE_ENV=production webpack --mode=production",
    "build:watch": "cross-env NODE_ENV=development webpack --mode=development --watch",
    "build:dev": "cross-env NODE_ENV=development webpack --mode=development"
  },
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "devDependencies": {
    "@babel/core": "^7.13.16",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "copy-webpack-plugin": "^8.1.1",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.5.0",
    "node-sass": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "webpack": "^5.35.1",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}