code: 'MODULE_NOT_FOUND', requireStack: [... even when module is visible and the file path is correct

[Milner39]

So im having an issue creating a app where i cant run npm build without this pooping up,

PS C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp> npm start

minting_staking_dapp@0.1.0 start
react-app-rewired start

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp\node_modules\react-scripts/config/webpack.config.dev'
Require stack:
- C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp\node_modules\react-app-rewired\scripts\start.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp\node_modules\react-app-rewired\scripts\start.js:9:23)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    "C:\\Users\\finnm\\OneDrive\\Desktop\\Finn's stuff\\NFT\\DenOfDragons\\minting_staking_dapp\\node_modules\\react-app-rewired\\scripts\\start.js"
  ]
}
PS C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp> 

as you can see in the screenshot the module is there and the path is correct so i don't understand why it is not found

node version: 16.14.0
npm version: 8.5.2

here is my package.json

{
  "name": "minting_staking_dapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "contracts": "file:./SmartContractMetaData",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "react-app-rewired": "^1.6.2",  
    "web-vitals": "^2.1.4",
    "web3": "^1.7.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "assert": "^2.0.0",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0"
  }
}

and my config-overrides.js

const webpack = require('webpack');

module.exports = function override(config) {
    config.ignoreWarnings = [/Failed to parse source map/];

    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

thanks for any help you can offer

[dawnmist]

The error message itself states that the module it cannot find is 'C:\Users\finnm\OneDrive\Desktop\Finn's stuff\NFT\DenOfDragons\minting_staking_dapp\node_modules\react-scripts/config/webpack.config.dev'

The reason it cannot find that module is because in react-scripts 2+, the file was renamed/merged with the normal webpack.config by create-react-app.

You're using react-app-rewired 1.6.2. You need to be using react-app-rewired 2+ for versions of react-scripts versions 2+, partly for this reason, and partly because there were also major changes in Webpack 4 - version 1.6.2 is NOT Webpack 4+ compatible.

(Thank you for posting the detail that you did - it meant that I could see/identify the issue easily).

[Milner39]

I will try that out! Thank you so much, it’s been so hard to find a fix for this, your awesome, I’ll see if it works

[Milner39]

yeah that worked! awesome

[SwapnaRahate]

[camillalo]

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。