2

On hour four of working this out, I'm really sorry if there's a duplicate but I just looked through all of the suggestions and anything similar, but I need help!

I am reasonably new to React (ReactJS) and wanted to implement an app inside of a webpage.

Everything works great so far for a simple app, but when I am compiling, Babel doesn't compile the "import" line from App.js

The error I get in the browser is

Uncaught SyntaxError: Cannot use import statement outside a module

I think it's because the Babel compiler isn't doing the import, but I am obviously missing some education on this?

Here are the files (I included all that it involves, in case there's something you need to see):

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

components/TestComponent.js

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

And then I run the following...

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

And it works perfectly... But I think it just isn't compiling the import correctly in App.js

Thank you for your time!

0 Answers0