title: ASP.NET - Uncaught SyntaxError: Cannot use import statement outside a module
body: <p>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: </p>
  
  <p>Uncaught SyntaxError: Cannot use import statement outside a module</p>
  
  <p>Below is my code:</p>
  
  <p>Index.cshtml:</p>
  
  <pre><code>@{
     Layout = null;
  }
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Hello React&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
      &lt;script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"&gt;&lt;/script&gt;
      &lt;script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/Tutorial.jsx")"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Tutorial.jsx:</p>
  
  <pre><code>import Comment from '../Scripts/Comment.jsx';
  
  class Tutorial extends React.Component {
      render() {
          return (
              &lt;div className="commentBox"&gt;
                  &lt;h1&gt;Homepage&lt;/h1&gt;
                  &lt;Comment /&gt;
              &lt;/div&gt;
          );
      }
  }
  ReactDOM.render(&lt;Comment /&gt;, document.getElementById('content'));
  </code></pre>
  
  <p>Comment.jsx:</p>
  
  <pre><code>class Comment extends React.Component {
      render() {
          return (
              &lt;p&gt;I am a comment!&lt;/p&gt;
          );
      }
  }
  
  export default Comment;
  </code></pre>
  
  <p>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?</p>
  
  <p>EDIT: Fixed export default Comment, however error is still appearing</p>