facing issue in react js showing "Cannot use import statement outside a module"

Question

import React from 'react';
import ReactDOM from 'react-dom';
import './Navigation';

ReactDOM.render(
  <React.StrictMode>
    <Navigation/>
  </React.StrictMode>,
  document.getElementById('root')
);

showing syntax error Cannot use import statement outside a module"

This thread might have solution https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import — Lucas Raza, Jan 01 '22 at 18:38
Just fyi, stack trace should be the first thing to share, helps in tracking the exact place from which the error comes — akds, Jan 01 '22 at 20:42

score 0 · Answer 1 · answered Jan 01 '22 at 18:30

0

change import './Navigation'; to import Navigation from './Navigation';

if Navigation is not default export then change it to import { Navigation } from './Navigation';

answered Jan 01 '22 at 18:30

sandeep.kgp

847
2
10

i did but still facing error in console – lord Jan 01 '22 at 18:31
can you post your Navigation.js code ? – sandeep.kgp Jan 01 '22 at 18:32
yes but its little l9ong – lord Jan 01 '22 at 19:25

score 0 · Answer 2 · answered Jan 01 '22 at 18:33

0

If you are loading this file from your HTML you will need to set the type to module on the script tag.

Like: <script type="module" src="/path/to/file.js"></script">

answered Jan 01 '22 at 18:33

Jonathon Hibbard

1,547
13
20

still not working – lord Jan 01 '22 at 18:39

facing issue in react js showing "Cannot use import statement outside a module"

2 Answers2