2

在解决这个问题的第四个小时，如果有重复，我真的很抱歉，但我只是查看了所有的建议和类似的东西，但我需要帮助！

我对 React (ReactJS) 相当陌生，想在网页内实现一个应用程序。

到目前为止，对于一个简单的应用程序来说一切都很好，但是当我编译时，Babel没有从 App.js 编译“导入”行

我在浏览器中遇到的错误是

Uncaught SyntaxError: Cannot use import statement outside a module

我认为这是因为Babel编译器没有进行导入，但我显然缺少这方面的一些教育？

这是文件（我包括了它所涉及的所有内容，以防您需要查看某些内容）：

包.json

{
...
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^3.1.2"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.8.4"
  },
...
}

应用程序.js

'use strict';

import TestComponent from './components/TestComponent'; 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      name : 'Flint',
      screen : 'Home'
    }
  }

  handleNameChange = (e) => {
    if( this.state.name !== 'Octavia' ){
      this.setState({ name: 'Octavia' });
    } else {
      this.setState({ name: 'Toby' });
    }
  }

  render() {
    return (
      <div>
        <button 
          className="waves-effect waves-light btn"
          onClick={this.handleNameChange}>
          {this.state.name}
        </button>
      </div>
    );
  }
}

let domContainer = document.querySelector('#App');
ReactDOM.render(<App />, domContainer);

组件/TestComponent.js

export default class Header extends React.Component {
  render() {
    return (
      <div>
        Test
      </div>
    )
  }
}

然后我运行以下...

npx babel --watch src --out-dir dist --presets react-app/prod

它工作得很好......但我认为它只是没有在 App.js 中正确编译导入

感谢您的时间！

4

0 回答 0