找不到入口模块和 webpack 中的错误

Question

我是 JavaScript 的新手，并遵循 Github 上的清晰节点教程。但是无论我在所有模块中尝试过什么，当我运行 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

我已经试过了，但是重新安装 babel-loader 7 并没有解决我的问题。我也尝试重新安装整个 webpack-module，但这也没有解决我的问题。

我的webpack.config.babel.js文件：

// @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(),
  ],
}

我的 babelrc.json 文件：

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

我的package.json文件

{
  "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",
    "precommit": "yarn test",
    "prepush": "yarn test && yarn prod:build"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "compression": "^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-compat": "^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"
}

我的eslintrc.json文件

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

供参考，请在此处找到我的文件夹结构的附加快照。

如果你检查这个 Github page or this，你会发现有更多的人有同样的问题，但到目前为止没有任何解决方案对我有用。希望你能帮助我！

更新

我也尝试过 Alex 的建议（请参阅下面的答案），但没有用。

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

    ...

Answer 1

只是一个建议：您是否尝试在将有问题的路径传递给 webpack 之前解决它？沿线的东西：path.resolve(__dirname, './src/client') 会将路径从相对路径转换为绝对路径，并且通常它有助于使各种加载器安静下来。

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

...

Answer 2

我检查了你的回购协议并解决了 webpack 问题。主要问题是每次导入 jsx 文件时，都需要将扩展名写为 jsx。并且组件内部也存在一些错误，因此某些组件未得到解决。这是 button.jsx

中的一个

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

而且由于许多包的实现发生了变化，bundle.js 给出了错误。例如对于 react hot reload 包，不需要导入这个：

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

检查documentation。

还有很多 babel 包是旧版本。所以我安装了新软件包。你可以检查package.json。

webpack 配置的实现也是错误的。在 webpack.config.js 入口点采用相对路径，但输出点采用绝对路径。我组织了 webpack.config.js.

此项目还实现了服务器端代码，但为此，您需要另一个 webpack.config.js 用于开发。并且对于服务器端渲染，你需要使用 ReactDOM.hydrate 并且还有太多重要的东西这个项目没有实现。这是回购协议：

modified repo

找不到入口模块和 webpack 中的错误

Error in Entry module not found and in webpack

javascript

src

node.js

babeljs

webpack-dev-server