ASP.NET - Uncaught SyntaxError: Cannot use import statement outside a module

Question

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 components into another React component, 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.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:

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:

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. I want to be able to have all my components in separate .jsx files and be able to import certain components into different ones. Ideas?

EDIT: Fixed export default Comment, however error is still appearing

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
– Farid Huseynov, Commented Feb 20, 2021 at 16:39

Dave B · Accepted Answer · 2020-10-25 13:33:31Z

5

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.

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.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:

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

to

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

answered Oct 25, 2020 at 13:33

Dave B

2,06318 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Silkin · Accepted Answer · 2023-08-10 11:22:35Z

0

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>
}

answered Aug 10, 2023 at 11:22

Ivan Silkin

5131 gold badge11 silver badges21 bronze badges

Comments

Guru Hadadi · Accepted Answer · 2020-06-15 03:02:35Z

-1

You need to export the Comment component properly. At the moment you are doing export default Test.

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

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

answered Jun 15, 2020 at 3:02

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

1 Comment

MDBerry Over a year ago

Thanks for that catch, however I am still getting the same error

Collectives™ on Stack Overflow

ASP.NET - Uncaught SyntaxError: Cannot use import statement outside a module

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related