时间戳

首页 > 解决方案 > 未捕获的 ReferenceError：未定义 dom

reactjs - 未捕获的 ReferenceError：未定义 dom

问题描述

我用 Node.js、React 和 Webpack 搭建了一个环境，但它不起作用。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import "../style/index.less"


class Demo extends Component {
  render() {
    return (
      <div className="box">
        {this.props.text}
      </div>
    )
  }
}

ReactDOM.render(
  <Demo text="this is a test" />,
  document.querySelector('.container')
)

Webpack之后，生成的代码是：

__WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.render(dom(Demo, { text: "this is a test" }), document.querySelector('.container'));

当我编写一个 src 这个 js 的 HTML 文件时，它告诉我

未捕获的 ReferenceError：未定义 dom

而且我还在所有文件中搜索了这个 dom 定义，但我找不到它。

index.html 非常简单：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../build/style/index.css">
</head>

<body>
  <div class="container"></div>
  <script src="../build/script/runtime.js"></script>
  <script src="../build/script/vendor.js"></script>
  <script src="../build/script/index.js"></script>
</body>

</html>

webpack.config.js 如下：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const extractless = new ExtractTextPlugin({
  filename: '../style/[name].css',
})

module.exports = {
  entry: {
    index: './src/script/index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, 'build/script'),
    filename: '[name].js'
  },
  module: {
    rules: [{
        test: /\.js$/,
        include: [
          path.resolve(__dirname, "src/script")
        ],
        loader: "babel-loader",
      },
      {
        test: /\.less$/,
        use: extractless.extract({
          use: [{
              loader: 'css-loader', // translates CSS into CommonJS
            },
            {
              loader: 'less-loader', // compiles Less to CSS
            },
          ],
          fallback: 'style-loader', // creates style nodes from JS strings                      
        })

      },
    ]
  },
  plugins: [
    extractless,
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'runtime']
    })
  ],

}

起初我使用 webpack4 并收到此错误，所以我切换到 webpack3 并且错误仍然存​​在。

标签： reactjswebpack

解决方案

推荐阅读