SyntaxError: Unexpected token '<' at ModuleLoader.moduleStrategy

Question

When running my main script.js file (which imports other js / jsx files using import)

I had an initial error of: Cannot use import statement outside a module which I was able to fix by adding: "type": "module" to my package.json file which fixed that error but now I'm getting a new error of: Unexpected token '<' at ModuleLoader.moduleStrategy

These are my scripts tags in index.html

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="script.js" type="text/babel" data-type="module"></script>

Here a screenshot of the error message

        <div>
        ^

SyntaxError: Unexpected token '<'
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:155:18)
    at callTranslator (node:internal/modules/esm/loader:285:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:30)
    at async link (node:internal/modules/esm/module_job:76:21)

Node.js v21.2.0

I have tried searching about the error on Google but was unable to find a solution.

Answer 1

You should check if you're using the right Node version. I've run into the same issue, forgot to switch Node ver.