import 语句给出一个语法错误，说“不能在模块外使用 import 语句”答案

【问题标题】：import statement gives a syntax error saying "Cannot use import statement outside a module"import 语句给出一个语法错误，说“不能在模块外使用 import 语句”
【发布时间】：2020-09-12 16:57:46
【问题描述】：

我是 Web 开发新手，这只是我创建的一个简单代码，用于测试我安装的新文本编辑器，我在尝试导入 react 时遇到此错误，因为我遇到了一些其他错误，例如； TypeError：无法读取未定义的属性“createElement”

请问，我该如何解决？导入语句错了吗？

import React, { Fragment } from 'react';
console.log("Testing");
var document;//made this declaration because I got a document undefined error
 document.createElement("p"):
const p = document.createElement("p")

p.innerHTML = "This is to test the javascript";
const body = document.querySelector("body");

body.insertBefore(p,body.childNode[-1]);

<!DOCTYPE html>
<html>
<head>
  <title>Testing vs code</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  
</head>

<body>
  <h1>Testing the vscode html preview package</h1>
  <h2>Hello</h2>
  <script type="module" src="js-prac.js"></script>
</body>
</html>

【问题讨论】：

代码看不懂，你用的是react js还是想用简单的javascript？
我想用一个简单的javascript
那你为什么要导入 React？

标签： javascript html reactjs dom

【解决方案1】：

看看ReactJS website。

您应该使用 Node 包管理器 创建 React 应用程序 npx create-react-app appName

或者应该将反应脚本链接到您的 html

<script src="https://unpkg.com/react@16/umd/react.development.js"></script> 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

您也不能重新定义文档对象。这引用了您的网页，您可以使用文档对象访问元素或 DOM（文档对象模型）。

【讨论】：

【解决方案2】：

我知道你想用 React 创建一个简单的应用程序。我建议您先阅读此内容https://kentcdodds.com/blog/how-to-react，然后阅读此内容：https://reactjs.org/tutorial/tutorial.html

可以在启动时通过导入脚本来创建 React 应用程序，但这不是构建 React 应用程序的推荐方式。

阅读完上述帖子后，请在您选择的平台上找到您选择的优秀教程，无论是基于博客还是基于视频。我可以举出几个例子，比如 udemy、前端大师、pluralsight 等等。

【讨论】：

【解决方案3】：

根据https://reactjs.org/docs/add-react-to-a-website.html，您需要在导入脚本之前将这两行添加到您的 HTML 文件中：

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

如果不使用 Create React App 之类的东西，我不确定模块加载是否会按照您想要的方式工作。您可以删除 import 语句，您仍然可以在脚本中引用 React 和 ReactDOM。

例如

'use strict';

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 comment number ' + this.props.commentID;
    }

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

// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
  .forEach(domContainer => {
    // Read the comment ID from a data-* attribute.
    const commentID = parseInt(domContainer.dataset.commentid, 10);
    ReactDOM.render(
      e(LikeButton, { commentID: commentID }),
      domContainer
    );
  });

【讨论】：