ASP.NET - 未捕获的 SyntaxError：无法在模块外使用 import 语句答案

【问题标题】：ASP.NET - Uncaught SyntaxError: Cannot use import statement outside a moduleASP.NET - 未捕获的 SyntaxError：无法在模块外使用 import 语句
【发布时间】：2020-10-04 09:58:54
【问题描述】：

我正在尝试在我的 ASP.NET MVC 5 项目的 .jsx 文件中使用 import 关键字。我希望能够将其他 React 组件导入另一个 React 组件，但是，当使用 import 关键字时，我收到以下错误：

未捕获的语法错误：无法在模块外使用 import 语句

下面是我的代码：

Index.cshtml：

@{
   Layout = null;
}

<html>
<head>
    <title>Hello React</title>
</head>
<body>
    <div id="content"></div>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
    <script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
</body>
</html>

教程.jsx：

import Comment from '../Scripts/Comment.jsx';

class Tutorial extends React.Component {
    render() {
        return (
            <div className="commentBox">
                <h1>Homepage</h1>
                <Comment />
            </div>
        );
    }
}
ReactDOM.render(<Comment />, document.getElementById('content'));

评论.jsx：

class Comment extends React.Component {
    render() {
        return (
            <p>I am a comment!</p>
        );
    }
}

export default Comment;

如果我没有导入，或者如果我直接在 Tutorial.jsx 中添加 Comment 类，它运行良好，但这不是我想要的。我希望能够将所有组件放在单独的 .jsx 文件中，并能够将某些组件导入到不同的组件中。想法？

编辑：修复了导出默认注释，但仍然出现错误

【问题讨论】：

能否分享一下文件夹结构？我已经能够在我的项目中解决这个问题，如果你仍然有这个问题，希望能提供帮助

标签： javascript asp.net reactjs asp.net-mvc ecmascript-6

【解决方案1】：

当<script> 元素包含import 语句但<script> 元素本身未声明为ECMAScript（或ES）模块时，会导致错误“无法在模块外使用import 语句”。

import 语句要求将您的脚本文件 Tutorial.jsx 声明为模块。将值为module 的type 属性添加到<script> 标记。

见页面顶部第一段https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

import 语句不能用于嵌入式脚本，除非此类脚本具有 type="module"。

在您的 HTML 页面中，更改：

<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>

到

<script type="module" src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>

【讨论】：

【解决方案2】：

您需要正确导出Comment 组件。目前你正在做export default Test。

class Comment extends React.Component {
    render() {
        return (
            <p>I am a comment!</p>
        );
    }
}

export default Comment; //<------- see here

【讨论】：

感谢您的捕获，但我仍然遇到同样的错误