ASP.NET - 未捕获的语法错误：无法在模块外使用导入语句
[英]ASP.NET - Uncaught SyntaxError: Cannot use import statement outside a module
问题描述
I am trying to use the import keyword in a.jsx file in my ASP.NET MVC 5 project.
我正在尝试在我的 ASP.NET MVC 5 项目的 a.jsx 文件中使用 import 关键字。 I want to be able to import other React components into another React component, however, when using the import keyword, I am getting the following error:我希望能够将其他 React 组件导入另一个 React 组件，但是，当使用 import 关键字时，我收到以下错误：
Uncaught SyntaxError: Cannot use import statement outside a module未捕获的语法错误：无法在模块外使用 import 语句
Below is my code:下面是我的代码：
Index.cshtml:索引.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>
Tutorial.jsx:教程.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'));
Comment.jsx:评论.jsx：
class Comment extends React.Component {
render() {
return (
<p>I am a comment!</p>
);
}
}
export default Comment;
If I do not have the imports or if I add the Comment class directly inside of the Tutorial.jsx, it runs fine, but that is not what I am looking for.如果我没有导入，或者如果我直接在 Tutorial.jsx 中添加评论 class，它运行良好，但这不是我想要的。 I want to be able to have all my components in separate.jsx files and be able to import certain components into different ones.我希望能够将我的所有组件放在单独的.jsx 文件中，并能够将某些组件导入到不同的组件中。 Ideas?想法？
EDIT: Fixed export default Comment, however error is still appearing编辑：修复了导出默认注释，但仍然出现错误
2 个解决方案
解决方案1
0 2020-06-15 03:02:35
You need to export the Comment component properly.您需要正确导出Comment组件。 At the moment you are doing export default Test .目前您正在export default Test 。
class Comment extends React.Component {
render() {
return (
<p>I am a comment!</p>
);
}
}
export default Comment; //<------- see here
解决方案2
0 2020-10-25 13:33:31
The error "Cannot use import statement outside a module" results when a <script> element contains an import statement but the <script> element itself is not declared as an ECMAScript (or ES) module.当<script>元素包含import语句但<script>元素本身未声明为 ECMAScript（或 ES）模块时，会出现错误“无法在模块外使用 import 语句”。
The import statement requires your script file Tutorial.jsx to be declared a module. import语句要求将您的脚本文件 Tutorial.jsx 声明为模块。 Add the type attribute with the value module to the <script> tag.将带有 value module的type属性添加到<script>标记。
See the first paragraph at the top of the page https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import请参阅页面顶部的第一段 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
The import statement cannot be used in embedded scripts unless such script has a type="module".
In your HTML page, change:在您的 HTML 页面中，更改：
<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
to至
<script type="module" src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.