ASP.NET - 未捕获的 SyntaxError：无法在模块外使用 import 语句
Posted
技术标签:
【中文标题】ASP.NET - 未捕获的 SyntaxError：无法在模块外使用 import 语句【英文标题】：ASP.NET - Uncaught SyntaxError: Cannot use import statement outside a module 【发布时间】：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 文件中，并能够将某些组件导入到不同的组件中。想法？
编辑：修复了导出默认注释，但仍然出现错误
【问题讨论】：
能否分享一下文件夹结构？我已经能够在我的项目中解决这个问题，如果你仍然有这个问题，希望能提供帮助 【参考方案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
【讨论】：
感谢您的捕获，但我仍然遇到同样的错误以上是关于ASP.NET - 未捕获的 SyntaxError：无法在模块外使用 import 语句的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET - 未捕获的 SyntaxError：无法在模块外使用 import 语句
ASP.NET：在 global.asax 中未捕获安全异常
未捕获的类型错误：$(...).datepick 不是 asp.net 中 jQuery datetime 中的函数