javascript - Error in Entry module not found and in webpack - Stack Overflow

admin管理员组

文章数量:1332873

I'm new to JavaScript and follow a clear node-tutorial on Github. But whatever I've tried in all modules, I keep getting this error message when I run yarn dev:wds

    ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Renate\projects'     
    ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: 
    Error: Can't resolve './src'  in 'C:\Users\Renate\projects'  @ multi (webpack)-dev- 
    server/client?http://localhost:8

I've tried this solution, but reinstalling babel-loader 7 did not solve my problem. I've also tried to re-intall the entire webpack-module, but that did not solve my problem either.

My webpack.config.babel.js file:

// @flow

import path from 'path'
import webpack from 'webpack'

import { WDS_PORT } from './src/shared/config'
import { isProd } from './src/shared/util'

export default {
  entry: [
    'react-hot-loader/patch',
    './src/client',
  ],
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist/'),
    publicPath: isProd ? '/static/' : `http://localhost:${WDS_PORT}/dist/`,
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ },
    ],
  },
  devtool: isProd ? false : 'source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    port: WDS_PORT,
    hot: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
}

I'm new to JavaScript and follow a clear node-tutorial on Github. But whatever I've tried in all modules, I keep getting this error message when I run yarn dev:wds

    ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Renate\projects'     
    ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: 
    Error: Can't resolve './src'  in 'C:\Users\Renate\projects'  @ multi (webpack)-dev- 
    server/client?http://localhost:8

I've tried this solution, but reinstalling babel-loader 7 did not solve my problem. I've also tried to re-intall the entire webpack-module, but that did not solve my problem either.

My webpack.config.babel.js file:

// @flow

import path from 'path'
import webpack from 'webpack'

import { WDS_PORT } from './src/shared/config'
import { isProd } from './src/shared/util'

export default {
  entry: [
    'react-hot-loader/patch',
    './src/client',
  ],
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist/'),
    publicPath: isProd ? '/static/' : `http://localhost:${WDS_PORT}/dist/`,
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ },
    ],
  },
  devtool: isProd ? false : 'source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    port: WDS_PORT,
    hot: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
}

My babelrc.json file:

{
  "presets": [
    "env",
    "flow",
    "react"
  ],
  "plugins": [
    "flow-react-proptypes"
  ]
}

My package.json file

{
  "name": "your-project",
  "version": "1.0.0",
  "license": "MIT",
  "browserslist": [
    "> 1%"
  ],
  "scripts": {
    "start": "yarn dev:start",
    "dev:start": "nodemon -e js,jsx --ignore lib --ignore dist --exec babel-node src/server",
    "dev:wds": "webpack-dev-server --progress",
    "prod:build": "rimraf lib dist && babel src -d lib --ignore .test.js && cross-env NODE_ENV=production webpack -p --progress",
    "prod:start": "cross-env NODE_ENV=production pm2 start lib/server && pm2 logs",
    "prod:stop": "pm2 delete server",
    "lint": "eslint src webpack.config.babel.js",
    "test": "yarn lint && flow && jest --coverage",
    "premit": "yarn test",
    "prepush": "yarn test && yarn prod:build"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "pression": "^1.7.4",
    "express": "^4.17.1",
    "immutable": "4.0.0-rc.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-hot-loader": "^4.5.3",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/node": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-flow": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^25.1.0",
    "babel-loader": "7",
    "babel-plugin-flow-react-proptypes": "^25.1.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^7.0.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-pat": "^3.5.1",
    "eslint-plugin-flowtype": "^4.6.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "1.7.0",
    "flow-bin": "^0.118.0",
    "husky": "^4.2.1",
    "jest": "^25.1.0",
    "nodemon": "^2.0.2",
    "pm2": "^4.2.3",
    "rimraf": "^3.0.2",
    "webpack": "^4.41.6",
    "webpack-babel-env-deps": "^1.6.3",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  },
  "type": "module"
}

My eslintrc.json file

  
{
  "extends": [
    "airbnb",
    "plugin:flowtype/remended"
  ],
  "plugins": [
    "flowtype",
    "pat"
  ],
  "env": {
    "browser": true,
    "jest": true
  },
  "rules": {
    "semi": [2, "never"],
    "no-unexpected-multiline": 2,
    "pat/pat": 2,
    "linebreak-style": [2, "windows"]
  },
  "parser": "babel-eslint"
}

for reference, please find attached snapshot of my folder structure here.

And if you check this Github page or this, you will see there are more with the same problem, but no solution worked for me so far. Hope you can help me!

update

I've also tried the suggestion of Alex (see answer here below), did not work.

    ...
    entry: [
       'react-hot-loader/patch',
       path.resolve(__dirname, './src/client')
       ],

    ...

• javascript
• node.js
• babeljs
• webpack-dev-server
• src

Share Improve this question Follow edited Feb 13, 2020 at 6:52 Renate van Kempen asked Feb 12, 2020 at 9:59 Renate van KempenRenate van Kempen 13411 gold badge22 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Just a suggestion: have you tried resolving the problematic path before passing it to webpack? Something along the lines: path.resolve(__dirname, './src/client') will convert the path from relative to absolute and often times it helps to quiet various loaders.

...
  entry: [
    'react-hot-loader/patch',
    path.resolve(__dirname, './src/client'),
  ],

...

I checked your repo and I solved the webpack issue. the main issue was everytime you imported a jsx file, you need to write the extention as jsx. and also there were some errors inside ponents so some of the ponents were not resolved. here is one in button.jsx

// type Props = {
//   label: string,
//   handleClick: Function,
// }

and also since implementation of many packages changed, bundle.js is giving error. for example for react hot reload package, there is no need to import this :

 import { AppContainer } from 'react-hot-loader'

check the documentation.

also many babel packages were old version. so i Installed the new packages. you can check the package.json.

implementation of webpack config was also wrong. in webpack.config.js entry point takes relative path but output point takes absolute path. I organized the webpack.config.js.

this project also implements server-side code but for this, you need another webpack.config.js for dev. and also for server-side rendering, you need to use ReactDOM.hydrate and also there are too many important things that this project did not implement. here is the repo:

modified repo

本文标签： javascriptError in Entry module not found and in webpackStack Overflow