未捕获的语法错误：无法在使用 reactjs CDN 链接的模块外部使用 import 语句答案

【问题标题】：Uncaught SyntaxError: Cannot use import statement outside a module using reactjs CDN Links未捕获的语法错误：无法在使用 reactjs CDN 链接的模块外部使用 import 语句
【发布时间】：2020-10-25 06:17:25
【问题描述】：

我正在使用 React CDN 链接在 Reactjs 中编写应用程序，而不是“npx create-react-app”。我创建了一个 index.html、index.js 和 App.js 文件。我想使用import App from '../components/App.js' 在 Index.js 文件中导入 App.js 组件，但它在浏览器（客户端）上给出“不能在模块外使用 import 语句”错误。以下是代码

INDEX.HTML

<!DOCTYPE html>
<html>
<head>
    <title>Notepad Web App</title>
</head>
<body>
    <div id="root"></div>

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

    <!-- JSX -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


    <!-- External JS File -->
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

INDEX.JS

import App from '../components/App.js'
const e = React.createElemnt;
ReactDOM.render(e(App), document.querySelector('#root'));

APP.JS

const e = React.createElement;

function App()
{
    return(
        e("h1",{},'This is React App')
    )
}


export default App;

【问题讨论】：

标签： javascript reactjs import frontend

【解决方案1】：

要在 HTML 页面中包含 JavaScript 模块，您必须通过添加 type="module" 明确告诉浏览器：

<script type="text/javascript" type="module" src="./index.js"></script>

您可以阅读更多关于模块以及如何使用它们的信息here。

编辑：

关于你得到的新错误，见here：

与常规脚本不同，ES6 模块受same-origin policy 约束。这意味着您不能从文件系统中import 它们或在没有 CORS 标头（不能为本地文件设置）的情况下跨域。

基本上您需要从（本地）服务器运行此代码。

你可以使用live-server:

运行安装：

npm install -g live-server

在您的网站文件夹中运行：

live-server

在浏览器中打开 http://localhost:8080，您的网站就可以运行了

【讨论】：

通过应用您建议的更改，现在我在浏览器上面临以下错误。 ` CORS 策略已阻止从源“null”访问“file:///home/ubuntu/Desktop/projects/notepad/public/index.js”处的脚本：跨源请求仅支持协议方案：http , 数据, chrome, chrome-extension, https.`

【解决方案2】：

将类型更改为"module" 可以解决这样的问题：

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

此外，您在 index.js 中有一个语法错误 line 2 const e = React.createElemnt; 您在单词 Elemnt 中缺少一个 e。

【讨论】：