Question

刚开始使用ReactJS。我正在尝试将react-query-builder加载到我的组件中。当我简单地添加import {QueryBuilder} from 'react-querybuilder'时，我在控制台中出现错误

index.js：29852未捕获的ReferenceError：未定义react

这是最初的工作代码

// index.html
<html lang="en">
   <head>
      <meta charset="UTF-8">                                                                          
      <title>React App</title>
   </head>
   <body>
      <p>Should see the rule builder...</p>
      <div id="rule-builder"></div>
      <script src="index.js"></script>
      <p>After the rule builder...</p>
   </body>
</html>

// main.js
import React from 'react';                                                                            
import ReactDOM from 'react-dom';                                                                     
import RuleBuilder from './RuleBuilder.jsx';                                                          

ReactDOM.render(<RuleBuilder/>, document.getElementById('rule-builder'));

// RuleBuilder.js
import React from 'react';

class RuleBuilder extends React.Component {

   render() {
      return (
         <div>
            <h1>Rule Builder</h1>
         </div>
      );
   }
}

export default RuleBuilder;

页面呈现

Should see the rule builder...

Rule Builder

After the rule builder...

但是一旦我添加import {QueryBuilder} from 'react-querybuilder'，就会出现上述错误，并且页面上的“规则构建器”输出消失，因此ReactComponent不再呈现。

我做错了什么？

（PS这是package.json＆amp; webpack.config.js）

// package.json
{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "Testing out the ReactJS library",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --host 192.168.56.152 --port 5001 --hot",
    "build": "babel ./ --presets babel-preset-es2015 --out-dir distribution"
  },  
  "author": "", 
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-querybuilder": "^1.3.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  },  
  "devDependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-querybuilder": "^1.3.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

// webpack.config.js
var config = { 
   entry: './main.js',

   output: {
      path:'./',
      filename: 'index.js',
   },  

   devServer: {
      inline: true,
      port: 8080,
      hot: true
   },  

   module: {
      loaders: [
         {   
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }   
         }   
      ]   
   }   
}

module.exports = config;

ReactJS - 无法导入QueryBuilder

0 个答案: