Javascript Web上的反应-未捕获的语法错误：无法在模块外部使用导入语句

在完成这项工作的第四个小时，如果有重复的，我真的很抱歉，但我只是浏览了所有的建议和类似的东西，但我需要帮助

我是React（ReactJS）的新手，希望在网页中实现一个应用程序

到目前为止，对于一个简单的应用程序，一切都很好，但是当我编译时，Babel不会编译app.js中的“导入”行

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

Uncaught SyntaxError:无法在模块外部使用import语句

我想这是因为巴别塔编译器没有进行导入，但我显然错过了一些关于这方面的教育

以下是文件（我包括了所有相关内容，以防您需要查看）：

package.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"
  },
...
}

App.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);

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

“严格使用”；
从“./components/TestComponent”导入TestComponent；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
名称：“弗林特”，
屏幕：“主页”
}
}
handleNameChange=（e）=>{
if（this.state.name！=='Octavia'）{
this.setState（{name:'Octavia'}）；
}否则{
this.setState（{name:'Toby'}）；
}
}
render（）{
返回(
{this.state.name}
);
}
}
让domContainer=document.querySelector（'#App'）；
render（，domContainer）；

components/TestComponent.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);

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

导出默认类头扩展React.Component{
render（）{
返回(
试验
)
}
}

然后我运行以下程序

npx-babel——监视src——out-dir-dist——预设反应app/prod

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

---

谢谢你抽出时间

你找到答案了吗？我开始用create react应用程序启动应用程序