插件/预设文件不允许导出对象只有功能答案

【问题标题】：plugin/preset files are not allowed to export objects only functions插件/预设文件不允许导出对象只有功能
【发布时间】：2019-05-10 20:39:47
【问题描述】：

我正在尝试从我的 html 页面调用一个简单的 JSX 代码。但是，当我尝试使用 Babel 使用命令“browserify -t [babelify --presets [react]] src/App.js -o build.js”编译 JSX 代码时，它会抛出错误：

'插件/预设文件不允许导出对象，只能导出函数。在 F:\Work Backup\simplereact\react-tutorial\node_modules\babel-preset-react\lib\index.js 中同时解析文件：F:\Work Backup\simplereact\react-tutorial\src\App.js'

请帮忙！ index.html

<!DOCTYPE html>
<html>
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel- core/5.8.23      /browser.js"></script>
</head>
<body>
<div id="app"></div>
<script src="src/app.js" type="text/babel"></script>
</body>
</html>

App.js

import React from 'react';

var App = React.createClass({
render: function() {
return <div>Something something Dark Side</div>;
}
});

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

包.json

{  
"name": "react-tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "^7.4.4",
"babel-preset-react": "^6.24.1",
"babelify": "^10.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
  ],
  "development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
  ]
  }
  }

【问题讨论】：

你没有 import react-dom import ReactDOM from 'react-dom';
这里仍然保持不变。我添加了 react dom import 但同样的错误。
尝试将 "babel-preset-react": "^6.24.1" 改为 "@babel-preset-react": "^6.24.1"
还是同样的问题。

标签： html reactjs jsx babeljs react-dom

【解决方案1】：

根据 reactjs.org，如果你不使用 ES6。

var createReactClass = require('create-react-class'); //create function like so.
var App = createReactClass({                     
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

【讨论】：

请看我用来编译的命令它可能会给你一些更好的主意。因为问题仍然存在。
你有没有想过使用create-react-app？只需确保安装节点，然后在命令行输入 npx create-react-app appname。这将为您设置一个基本的反应项目。