Why do I get a Can not find module error when I run npx run dev?

Question

before run 'npx run dev'

I processed this

Run the npm init command Webpack webpack-cli installation Configuring webpack.conifig.js Setting package.json node upgrade Creating client.jsx WordRelay.jsx component file creation etc.

webpack.conifig.js

const path = require('path');

module.exports = {
    name:'wordrelay-setting',
    mode:'development',
    devtool:'eval',
    resolve:{
        extensions:['.js','.jsx']
    },

    entry:{
        app:['./client']
    }, // 입력

    output: {
        path:path.join(__dirname,'dist'),
        filename:'app.js'
    },  // 출력

};

package.json

{
  "name": "lecture",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"
  },
  "author": "hyun",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "webpack": "^4.37.0",
    "webpack-cli": "^3.3.6"
  }
}

and github: https://github.com/hyunsokstar/react_game_prac2

Tien Duong · Accepted Answer · 2019-07-25T08:50:58.933

You run webpack but you not let webpack know what config it should take. So it will run with default config. Which have entry set to src/index.js. You need to run webpack and point it to your config file (The file name is incorrect so please fix it).

Another problem is that you use jsx in your code but you don't use babel to compile jsx to js. So you need to add babel to your project.

The last problem is you have some error syntax in client.jsx file.

package.json

{
  "name": "lecture",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config webpack.config.js"
  },
  "author": "hyun",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "babel-loader": "^8.0.6",
    "babel-preset-react-app": "^9.0.0",
    "webpack": "^4.37.0",
    "webpack-cli": "^3.3.6"
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

webpack.config.js

const path = require('path');
process.env.NODE_ENV='development';

module.exports = {
    name:'wordrelay-setting',
    mode:'development',
    devtool:'eval',
    resolve:{
        extensions:['.js','.jsx']
    },

    entry:{
        app:['./client']
    }, // 입력

    output: {
        path:path.join(__dirname,'dist'),
        filename:'app.js'
    },  // 출력

    module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
    }
}

client.jsx

const React = require('react');
const ReactDom = require('react-dom');

const WordRelay = require('./WordRelay')
React.render(<WordRelay />, document.querySelector('#root'));

Original answer

When you use this command npx run dev. You are executing a run module. That is why you get the error. The correct command should be

npm run dev

Difference between npx and npm?

thank you and another error is occured ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\react_game_prac2' can you help me ? — Hy K, Jul 25 '19 at 08:16
Please share your project structure. I think the problem is you set your ```entry``` wrongly. — Tien Duong, Jul 25 '19 at 08:18
git hub is this : https://github.com/hyunsokstar/react_game_prac2 thanks — Hy K, Jul 25 '19 at 08:20
react_game_prac2 is root and everty thing is same with github thank you — Hy K, Jul 25 '19 at 08:26
I guess it was caused by the file name being conifig.js. I also installed a barbell loader. The problem has been solved. very thank you. — Hy K, Jul 25 '19 at 09:58

Why do I get a Can not find module error when I run npx run dev?

1 Answers1