I am trying to use the import keyword in a .jsx file in my ASP.NET MVC 5 project. I want to be able to import other React ponents into another React ponent, however, when using the import keyword, I am getting the following error:
Uncaught SyntaxError: Cannot use import statement outside a module
Below is my code:
Index.cshtml:
@{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script crossorigin src=".13.0/umd/react.development.js"></script>
<script crossorigin src=".13.0/umd/react-dom.development.js"></script>
<script src=".7.1/remarkable.min.js"></script>
<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
</body>
</html>
Tutorial.jsx:
import Comment from '../Scripts/Comment.jsx';
class Tutorial extends React.Component {
render() {
return (
<div className="mentBox">
<h1>Homepage</h1>
<Comment />
</div>
);
}
}
ReactDOM.render(<Comment />, document.getElementById('content'));
Comment.jsx:
class Comment extends React.Component {
render() {
return (
<p>I am a ment!</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. I want to be able to have all my ponents in separate .jsx files and be able to import certain ponents into different ones. Ideas?
EDIT: Fixed export default Comment, however error is still appearing
I am trying to use the import keyword in a .jsx file in my ASP.NET MVC 5 project. I want to be able to import other React ponents into another React ponent, however, when using the import keyword, I am getting the following error:
Uncaught SyntaxError: Cannot use import statement outside a module
Below is my code:
Index.cshtml:
@{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script crossorigin src="https://cdnjs.cloudflare./ajax/libs/react/16.13.0/umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
</body>
</html>
Tutorial.jsx:
import Comment from '../Scripts/Comment.jsx';
class Tutorial extends React.Component {
render() {
return (
<div className="mentBox">
<h1>Homepage</h1>
<Comment />
</div>
);
}
}
ReactDOM.render(<Comment />, document.getElementById('content'));
Comment.jsx:
class Comment extends React.Component {
render() {
return (
<p>I am a ment!</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. I want to be able to have all my ponents in separate .jsx files and be able to import certain ponents into different ones. Ideas?
EDIT: Fixed export default Comment, however error is still appearing
Share Improve this question edited Jun 15, 2020 at 3:45 MDBerry asked Jun 15, 2020 at 2:52 MDBerryMDBerry 791 gold badge2 silver badges11 bronze badges 1- Could you please share the folder structure? I have been able to fix this problem in my project, would like to help if you still have this problem – Farid Huseynov Commented Feb 20, 2021 at 16:39
3 Answers
Reset to default 5The 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.
The import statement requires your script file Tutorial.jsx to be declared a module. Add the type attribute with the value module to the <script> tag.
See the first paragraph at the top of the page https://developer.mozilla/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:
<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
to
<script type="module" src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
Other developers say that you should include the type="module" in your js scripts import but for me the change in the razor view (not in the import tag itself) made the thing:
@section Scripts {
<script type="module">
import { YourClass } from "./js/Modules/YourModule.js";
const class = new YourClass('param1', 'param2');
</script>
}
You need to export the Comment ponent properly. At the moment you are doing export default Test.
class Comment extends React.Component {
render() {
return (
<p>I am a ment!</p>
);
}
}
export default Comment; //<------- see here
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745245403a4618388.html
评论列表（0条）