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

[email protected] 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> 

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

CodePudding user response：

Your path seems to point to a OneDrive location - OneDrive simulates files to be ‘there’ but actually only downloads them on-demand. This might not work in your context…
Try to right-click the file(s) in question and select ‘Always keep…’.

CodePudding user response：

This was the fix

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.

if 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.