Question

我正在为React Web应用程序设置样板，并在导航到http://localhost:3000时出现带有上述控制台错误的空白页。我是一名新手训练营的学生，我对webpack配置的知识很浅，尤其是在进行大量依赖项/ Babel设置时。我审查了对发布此问题的其他用户的答复，但似乎可能是由于webpack配置周围的许多问题引起的，我担心在时间紧迫的情况下会进一步破坏问题。

所以我在下面发布了一些代码。我很困-谢谢您的指点！

public / index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>-= PROJECT TITLE PLACEHOLDER =-</title>
  <script src="/bundle.js" defer></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

app / index.js

import '../public/style.css'
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store from './redux'
import Users from './components/Users'

ReactDOM.render(
  <Provider store={store}>
    <Users />
  </Provider>,
  document.getElementById('app')
)

webpack.config.js

'use strict'

const { resolve } = require('path')

module.exports = {
  entry: ['babel-polyfill', './app/index'],
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  mode: 'development',
  context: __dirname,
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /jsx?$/,
        include: resolve(__dirname, './app'),
        loader: 'babel-loader',
        options: {
          presets: ['react']
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

package.json

{
  "name": "boilermaker",
  "version": "0.0.1",
  "description": "boilerplate for react-redux-express-sequelize app",
  "main": "server/index.js",
  "scripts": {
    "start-dev": "npm run build-watch & npm run start-server",
    "start-server": "nodemon --watch server -e js,html --ignore public server/index.js",
    "build-watch": "webpack -w",
    "start": "echo 'Running server for production - developers, use npm run start-dev for development' && node server/index.js",
    "seed": "node seed.js"
  },
  "keywords": [
    "react",
    "redux",
    "skeleton"
  ],
  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.2",
    "chalk": "^2.4.1",
    "connect-session-sequelize": "^6.0.0",
    "crypto": "^1.0.1",
    "express": "^4.14.0",
    "express-session": "^1.17.0",
    "lodash": "^4.17.15",
    "morgan": "^1.9.1",
    "passport": "^0.4.0",
    "passport-google-oauth": "^2.0.0",
    "pg": "^7.4.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "sequelize": "^4.37.8"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "css-loader": "^2.1.1",
    "eslint": "^4.19.1",
    "eslint-config-fullstack": "^5.0.0",
    "eslint-plugin-react": "^7.8.2",
    "nodemon": "^1.19.1",
    "redux-devtools-extension": "^2.13.8",
    "style-loader": "^0.21.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }
}

.babelrc

{
  "presets": ["babel-preset-react", "react", "env", "stage-2"]
}

Answer 1

您需要更新interface IMyComponentProps { component?: React.ElementType<React.HTMLAttributes<HTMLElement>>; } const MyComponent: React.FunctionComponent<IMyComponentProps> = ({ className, component: Component, <-- complaining ...other }) => ( <Component className={className} {...other} /> ); MyComponent.defaultProps = { component: 'span' }; MyComponent.displayName = 'MyComponent'; export default MyComponent;规则：

babel-loader

编辑：另外，我在您的{ test: /(jsx|js)?$/, // you have app/index.js not app/index.jsx include: resolve(__dirname, './app'), loader: 'babel-loader', options: { presets: ['react'] } },中看不到babel配置，也没有看到package.json，因此这是假设该配置位于{{ 1}}，并为React / JSX正确设置（我在.babelrc中看到.babelrc；我很确定您需要在babel配置中使用它。）

Answer 2

这最终是由于天真的错误，我将我的静态中间件放在之后，将HTML发送到Express路由器中。当同学要求看我的路由设置时，我发现了它，这时它跳了起来。感谢您的审核，对于菜鸟的错误，我们深表歉意！

Answer 3

我相信您的问题可能是您的通货膨胀预设的排序。它们从右到左应用。

例如，在我的一个项目中的.babelrc文件如下所示：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

未捕获到的SyntaxError：bundle.js：1

3 个答案: