4-4 webpack的配置-react 浏览器报错 :Uncaught ReferenceError: ReactDOM is not defined

来源:4-4 Webpack配置(1)

慕田峪6302525

2018-05-21

4-4 webpack的配置-react 用webpack-dev-server预览 浏览器报错 :Uncaught ReferenceError: ReactDOM is not defined,但我的各项配置都跟老师一样,安装了react  reacrt-dom并且app.jsx也引入了! 求解大神!!

app.jsx

import React from 'react';
// react-dom
import ReactDom from 'react-dom';
// CSS
import './index.css';
// SASS
import './index.scss';
// font-awesome 字体
import 'font-awesome/css/font-awesome.min.css';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('app')
);

webpack.config.js

 {
            test: /\.jsx$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options:{
                    presets : ['env', 'react']
                }
            }
        }]

package.json

"dependencies": {
    "bootstrap": "3.3.7",
    "font-awesome": "4.7.0",
    "prop-types": "15.6.0",
    "rc-pagination": "1.14.0",
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-router-dom": "4.2.2",
    "simditor": "2.3.6"
  }

发现打包出来的app.js中 ReactDOM没有转换成_reactDom2,不知道为什么

打包出来的app.js

var _react = __webpack_require__(6);

var _react2 = _interopRequireDefault(_react);

var _reactDom = __webpack_require__(18);

var _reactDom2 = _interopRequireDefault(_reactDom);

__webpack_require__(29);

__webpack_require__(30);

__webpack_require__(31);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// SASS

// react-dom
ReactDOM.render(_react2.default.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('app'));


写回答

1回答

慕田峪6302525

提问者

2018-05-21

我发现 就是

import ReactDom from 'react-dom';

ReactDOM.render()

中 ReactDOM
大小写不一致。改一样就行了。。醉了   粗心大意

0
1
Rosen
收到!
2018-05-25
共1条回复

React16+React-Router4 打造企业级电商后台管理系统

【毕设面试】让缺乏框架开发经验的你掌握框架开发

976 学习 · 405 问题

查看课程