Question

尝试使反应与webpack一起工作，但在dev工具控制台中获得错误“app.js：105 Uncaught TypeError：（0，_reactDom2.default）不是函数”

文件webpack.config.js：

    module.exports = {
    entry: [
        __dirname + '/assets/react/pages/app.js'
    ],
    output: {
        path: __dirname + '/public/z_output/',
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }

};

文件app.js：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render(){
       return(
          <h1>aa</h1>
       )
    }
}

ReactDOM(<App />, document.getElementById('app'));

更新 Package.json补充说文件package.json：

{
      "name": "kioe",
      "version": "1.0.0",
      "private": true,
      "scripts": {
        "start": "node ./kioe.js"
      },
      "dependencies": {
        "react": "^15.1.0",
        "react-dom": "^15.1.0",
      },
      "devDependencies": {
        "babel-core": "*",
        "babel-loader": "*",
        "babel-preset-es2015": "*",
        "babel-preset-react": "*",
        "webpack": "*"
      }

}

Answer 1

您是否尝试过添加＆＃34; stage-0＆＃34;你的预设数组为babel-loader修复了吗？此外，您需要npm install --save-dev babel-preset-stage-0。

我相信你也应该使用ReactDOM.render而不仅仅是ReactDOM。

Answer 2

您还可以在babel-loader的预设数组中添加“ stage-2”，您将需要安装依赖项babel-preset-stage-2-> npm install --save-dev babel-preset-stage -2 在App.js或index.js中

import React from 'react'
import { render } from 'react-dom'

class App extends React.Component {
    render(){
       return(
          <h1>aa</h1>
       )
    }
}
render(<App />, document.getElementById('app'));

Answer 3

似乎您缺少渲染方法

错误

ReactDOM(<App />, document.getElementById('app'));

正确

ReactDOM.render(<App />, document.getElementById('app'));

Webpack - Uncaught TypeError：（0，_reactDom2.default）不是函数

3 个答案: