Cannot Use Import Statement Outside A Module

[SOLVED] Cannot Use Import Statement Outside A Module

by

The SyntaxError: Cannot Use Import Statement Outside A Module occurs when we use ES6 module syntax in a script that is not loaded as a module.

To work around the error, set the type attribute to module when loading scripts or in your package.json for Node.js apps.

How To Fix SyntaxError: Cannot Use Import Statement Outside A Module?

To fix the error, set the type attribute to module when loading the script into your HTML code.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>

    <!-- type set to module -->
    <script type="module" src="index.js"></script>
  </body>
</html>

Now you are able to use the ES6 module syntax in your javascript code.

index.js

import _ from 'lodash';

console.log(_.uniq([1, 1, 3])); // [1, 3]

All JavaScript files that use the ES6 module syntax must be loaded with the type attribute set to module.

To use ES6 module imports in Node.js, set the type property to module in your package.json file.

package.json

{
  "type": "module",
  // rest ...
}

If your project doesn’t have a package.json file, initialize it with the npm init -y command at the root of your project.

Node.js applications can now use ES6 module syntax.

index.js

import _ from 'lodash';

console.log(_.uniq([1, 1, 3])); // [1, 3]

If you are importing a local file with the type attribute set to module, you must specify the .js extension.

index.js

import {sum} from './another-file.js';

console.log(sum(50, 50)); // 100

If you omit the extension, you get the “Error [ERR_MODULE_NOT_FOUND]: Cannot find Module X. “

If none of the suggestions helped, try replacing the import/export syntax with require() .

index.js

//for default exports
const myFunction = require('some-package');

//for named exports
const {someFunction} = require('some-package')

The “Cannot use import statement outside module” error also occurs if you try to run your source files that contain ES6 module import / export syntax, instead of running your compiled files from your build directory. Make sure to run your compiled files from your build/dist directory only.

If you are getting the “Cannot use import statement outside module” error in a TypeScript project, try setting module to commonjs in your tsconfig.json file.

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "esModuleInterop": true,
    // ... your other options
  }
}

Conclusion

The SyntaxError: Cannot Use Import Statement Outside A Module occurs when we use ES6 module syntax in a script that is not loaded as a module.

To work around the error, set the type attribute to module when loading scripts or in your package.json for Node.js apps.

Recommendation

By the way if you encounter an error about importing libraries, I have here the list of articles made to solve your problem on how to fix errors in Python libraries.

Inquiries

If you have any questions or suggestions about this tutorial, Please feel free to comment below.

6 thoughts on “[SOLVED] Cannot Use Import Statement Outside A Module”

Leave a Comment