0

All I'm trying to do is split my React components into separate JSX files and be able to reference one from the other. I'm using ReactJS.Net in a .NET Core 3.1 MVC project. Chrome is up to date (v80). I'm quite new to JS and React so assume there's something basic I don't know.

When I place the two classes within the same file, it works as expected. ESLint reasonably suggests that I split components to separate files. When I break them into two as shown with import and export, I get the following error when I try to run it:

Uncaught SyntaxError: Cannot use import statement outside a module

The error is on the import line at the top of test.jsx. I'm assume my lack of understanding of where import goes and what constitutes a module is not helping.

Test.jsx looks like:

import SimpleItem from './js/SimpleItem';
// tried variations on:  <script type="module" src="./js/SimpleItem.jsx"></script>;

class SimpleContainer extends React.Component {
    render() {
        return (
            <div className="simpleContainer">Word<SimpleItem /></div>
        );
    }
}

ReactDOM.render(<SimpleContainer />, document.getElementById('content'));

SimpleItem.jsx looks like:

class SimpleItem extends React.Component {
    render() {
        return (
            <div className="simpleItem">I'm Simple!</div>
        );
    }
}

export default SimpleItem;

I've spent a maddening amount of time Googling, but either posts I've found don't seem to solve the problem or my ignorance isn't understanding what seems like it should be a dreadfully straightforward proposition in most any language since last century.

As a couple examples, ReactJS inside .NET framework project - Cannot use import statement outside a module asks a similar question giving same error. I'm attempting to split my components vs. importing React (probably the same principle though). Suggestions led me to ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import. But that didn't address it.

nyedidikeke
  • 6,899
  • 7
  • 44
  • 59
John Spiegel
  • 1,861
  • 3
  • 24
  • 39
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import – Jared Smith Mar 07 '20 at 16:16
  • The accepted answer to that linked dupe will fix your issue. – Jared Smith Mar 07 '20 at 16:18
  • @JaredSmith Excellent! I had a few misses. 1) I already had my test.jsx script tag but had missed adding type="module", instead 2) I had tried adding the child SimpleItem.jsx as a script of type module. 3) A lot of references led me to believe I should leave the extension off the import, but in this case it seems it really wants it. – John Spiegel Mar 07 '20 at 16:51
  • 1
    There's a lot going on here: jsx is NOT directly consumable in the browser and must be run through a transformer first. That same transformer SHOULD also resolve all your import statements for you or fail at build time (i.e. compile time) if it can't. Now you *can* transform on the fly in the browser but it's not good practice to do so for the same reason you don't compile your C# code at runtime. So it depends on what your build pipeline looks like, but you shouldn't be using jsx sources directly in a script tag. As for the imports... – Jared Smith Mar 07 '20 at 17:05
  • 1
    ...depending on how you are transforming you Typescript/JSX you can convert those to something a little less quirky. Because you *have* discovered a quirk: most transformers *don't* like the extension but when running native imports directly in the browser (i.e. script type="module") you need it. As for the error message, those are implementation-dependent. You still have the same underlying problem as the other question, and it still has the same answer. – Jared Smith Mar 07 '20 at 17:08
  • @JohnSpiegel Can you please answer your own question in a more organized manner so others can understand what was going on. – jib fashr Mar 20 '20 at 09:01
  • @jibfashr A good suggestion, but I can't add an answer since the post has been closed as a duplicate. – John Spiegel Mar 24 '20 at 16:18

0 Answers0