reactjs中的“未捕获的语法错误：无法在模块外使用导入语句”错误答案

【问题标题】："Uncaught SyntaxError: Cannot use import statement outside a module" error in reactjsreactjs中的“未捕获的语法错误：无法在模块外使用导入语句”错误
【发布时间】：2021-07-31 19:08:45
【问题描述】：

我正在向我现有的 html 页面添加响应。按照此处enter link description here 的说明进行操作。然后这一切正常，直到我导入不同的组件。

我的 html 代码：

    <!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>

我的 like_button.js 代码：

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

还有我的另一个.js 代码：

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

谢谢你的回答。

编辑：我在 package.json 文件中添加了“类型”：“模块”。最新情况如下；

  {
   "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"
  }

但它仍然不起作用，我在控制台中收到同样的错误。

编辑2：解决问题。仅仅在 package.json 中添加 ("type": "module") 是不够的，我还必须在 html 文件中的 script 标签中添加 (type="module")。

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

您需要告诉节点您要使用ESmodule 功能，例如import 和export 关键字。

为此，请将此行添加到您的 package.json 文件中。

"type": "module"

指定类型的示例package.json 文件。

{
    "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"
}

您还需要将type="module" 添加到您在index.html 中导入文件的脚本标记中。

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

这将停止您遇到的错误。

也值得一看commonjs vs es6 imports

【讨论】：

谢谢你的回答，我试试这个，但我仍然遇到同样的错误。首先在终端“npm init -y”中创建 package.json 文件。然后添加 ""type": "module" 。不行。如果你愿意，你可以复制我的代码并尝试。
默认"type": "module"没有在你使用npm init -y时添加，是手动添加的吗？ @malibil
是的，我加了manual，最新情况如下； {“名称”：“test2”，“版本”：“1.0.0”，“描述”：“”，“main”：“another.js”，“脚本”：{“test”：“echo \”错误: 没有指定测试\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "type": "module" }
@malibil 我已经创建了一个新文件夹，其中包含您所说的所有文件设置，但我无法重现该错误。你的帖子有什么遗漏的吗？
@malibil 我很抱歉，我花了 5 分钟盯着你的 javascript 并完全忘记了 html。我想我现在已经解决了这个问题，并对帖子进行了编辑。