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

Question

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

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

Answer 1

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?