CODEWITHSUNDEEP
javascripthtmlreactjs
malibil
malibil

Reputation: 179

"Uncaught SyntaxError: Cannot use import statement outside a module" error in reactjs

I am adding react to my existing html page. by following the instructions here enter link description here. And then this works just fine, until I import a different component.

my html codes:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test2</title>
</head>
<body>
   <h1>Hello World</h1>
   <div id="like_button_container"></div>

   <!-- Load React. -->
   <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
   <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin>. 
   </script>
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" 
    crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>

</body>
</html>

my like_button.js codes:

    'use strict';
import Another from "./another.js"; //problem here, if you comment this line, it works.

const e = React.createElement;

class LikeButton extends React.Component {
     constructor(props) {
     super(props);
     this.state = { liked: false };
   }

  render() {
        if (this.state.liked) {
       return 'You liked this.';
   }

  return e(
     'button',
     { onClick: () => this.setState({ liked: true }) },
     'Like'
     );
   }
 }

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

and my another.js codes:

   'use strict';

  const e = React.createElement;

 class Another extends React.Component {
       constructor(props) {
       super(props);
       this.state = { liked: false };
    }

  render() {
       if (this.state.liked) {
       return 'You liked this (another).';
    }

   return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
     'Like'
    );
   }
  }

  export default Another;

thank you for your answer.

edit: i added "type": "module" in package.json file. The latest situation is as follows;

  {
   "name": "test2",
   "version": "1.0.0",
   "description": "",
   "main": "another.js",
   "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
     },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "type": "module"
  }

but it still didn't work, I get the same error in the console.

edit2: fix the problem. Just adding ("type": "module") to package.json was not enough, I also had to add (type="module") to the script tag in the html file.

Upvotes: 0

Views: 187

Answers (1)

lejlun
lejlun

Reputation: 4419

You need to tell node that you want to use ESmodule features such as the import and export keywords.

To do this add this line to your package.json file.

"type": "module"

An example package.json file that specifies type.

{
    "name": "pup",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "type": "module"
}

You also need to add type="module" to the script tag where you import the file in index.html.

<script src="like_button.js" type="module"></script>

This will stop the error that you are getting.

Also worth looking at commonjs vs es6 imports

Upvotes: 2

Related Questions