Реагировать на Web - Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля - PullRequest
Новая
       32

Реагировать на Web - Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля

1 голос
/ 10 февраля 2020

На четвертом часу работы над этим, мне очень жаль, если есть дубликат, но я просто просмотрел все предложения и что-нибудь подобное, но мне нужна помощь!

Я довольно новичок в React (ReactJS) и хотел реализовать приложение внутри веб-страницы.

Пока все отлично работает для простого приложения, но когда я компилирую, Babel не компилирует строка «import» из приложения. 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

И это прекрасно работает ... Но я думаю, он просто неправильно компилирует import в приложении. js

Спасибо за потраченное время!

...