Question

从头开始创建反应应用程序，但它一直抱怨应用程序无效的React组件。我尝试使用类类型组件和功能反应组件，但两者都抛出相同的错误。 webpack可能输出错误的格式。

Index.js

require('@babel/polyfill')
import React, {Component} from 'react'
import ReactDOM, { render } from 'react-dom'

class App extends Component {
  render() {
    return (
      <main>
        testing
      </main>
    )
  }
}


const renderApp = () => {
  render(<App />, document.getElementById("app"))
}

if (module.hot) { 
  // Hot reloadable React components and translation json files
  // modules.hot.accept does not accept dynamic dependencies,
  // have to be constants at compile-time
  module.hot.accept([], () => {
    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
    render(translationMessages);
  });
}

webpack.dev.config.js

const CWD = process.cwd()
const path = require('path')
const webpack = require('webpack')
module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  entry: {

    main: [
      "webpack-hot-middleware/client?path=http://localhost:3333/__webpack_hmr&timeout=20000",
      path.resolve(CWD, './src/index.js')
    ]
  },

  output: {
    path: path.resolve(CWD, 'dist'),
    publicPath: 'dist',
    filename: '[name].js',
    chunkFilename: '[name]'
  },
  resolve: {
    extensions: ['.js', '.json', '.css']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['env', 'react'],

          }

        }
      },

    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}

server.dev.js

const webpack = require('webpack');
const http = require('http')
const path = require('path')
const middleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require("webpack-hot-middleware");
const webpackconfig = require('../webpack.dev.config');
const compiler = webpack(webpackconfig);
const express = require('express');
const app = express();
app.disable('x-powered-by');
const server = new http.Server(app)
app.use(middleware(compiler, {
  hot: true,
  status: "minimal",
  contentBase: "./src",
}))
app.use(
  webpackHotMiddleware(compiler, {
    log: console.log,
    path: "/__webpack_hmr",
    heartbeat: 10 * 1000
  })
)
app.use('/dist', express.static(path.join(__dirname, '/../dist')))

app.get(/.*/, (req, res) => {
  res.end( `
    <html>
      <head>
          <meta charset="utf-8">
          <title>React SSR</title>
      </head>

      <body>
          <div id="app"></div>

          <script src="/dist/main.js"></script>

      </body>
    </html>
  `)
})

server.listen(3333, () => console.log('Example app listening on port 3000!'))

我添加了开发，热门中间件

Console.log消息

warning.js?da67:33 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
printWarning @ warning.js?da67:33
client.js?dbe1:92 [HMR] connected
process-update.js?e135:41 [HMR] Checking for updates on the server...
process-update.js?e135:136 [HMR] Update check failed: SyntaxError: Unexpected token < in JSON at position 5
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.request.onreadystatechange (http://localhost:3333/dist/main.js:54:34)
handleError @ process-update.js?e135:136
main.js:54 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 5
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.request.onreadystatechange (main.js:54)

Answer 1

对于bootstrapping react应用程序，我使用Facebook的create-react-app。这将为您提供一个保证运行的空白应用程序。这听起来像你的构建有问题，因为这是一个应用程序的存根，从头开始而不是试图排除故障可能更简单。

webpack dev保持抱怨组件无效

1 个答案: