Question

我正在使用React CDN链接而不是'npx create-react-app'在Reactjs中编写一个应用程序。我已经创建了一个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;

Answer 1

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

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

您可以了解有关模块及其使用方法的更多信息here。

编辑：

关于收到的新错误，请参见here：

与常规脚本不同，ES6模块受same-origin policy的约束。这意味着如果没有CORS标头（无法为本地文件设置），则无法从文件系统或跨域import中使用它们。

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

您可以使用live-server：

运行以下命令进行安装：

npm install -g live-server

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

live-server

在浏览器中打开http：// localhost：8080，您的网站将正常运行

Answer 2

将类型更改为"module"可以解决以下问题：

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

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

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

2 个答案: