Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Cannot use import statement outside a module


I do get the following error when running gulp --demo1 :

/wallet-frontend/tools/gulpfile.js:1 import { cleanTask } from "./gulp/clean.js"; ^^^^^^ SyntaxError:

Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:979:16) at Module._compile (internal/modules/cjs/loader.js:1027:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at execute (/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18) at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/index.js:201:24) at Liftoff.execute (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:201:12)

How to fix this? Thank you


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi,

Note on the package.json file. This step is very important for Webpack in the Metronic template. The default package.json works for Gulp. To make it work for Webpack, you have to modify tools/package.json and remove "type": "module". Otherwise, it will cause a compilation error when running the next command.

Thanks



To solve the error, set the type attribute to module when loading the script in your HTML code. When working with ECMAScript modules and JavaScript module import statements in the browser, you'll need to explicitly tell the browser that a script is module. To do this, you have to add type="module" onto any ‹script› tags that point to a JavaScript module. Once you do this you can import that module without issues.


< script type="module" src="./index.js"></script>


If you are working on Node.js or react applications and using import statements instead of require to load the modules, then ensure your package.json has a property "type": "module" as shown below.

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

Moreover, In some cases, you may have to use both import and require statements to load the module properly.

// import { parse } from 'node-html-parser';
parse = require('node-html-parser');

This error "Cannot use import statement outside a module " can happen in different cases depending on whether you're working with JavaScript on the server-side with Node.js , or client-side in the browser. There are several reasons behind this error, and the solution depends on how you call the module or script tag.



The error message you're encountering typically occurs when using ES6 module syntax (including the `import` statement) in a file that is not recognized as a module by Node.js. To fix this issue, you have a few options:

1. Use a module bundler: If you're working with Candy Crush a project that uses ES6 modules and you want to run it in a Node.js environment, you can use a module bundler like Webpack or Rollup. These tools can bundle your code and handle the module syntax, allowing it to run in Node.js. With a bundler, you would configure your build process to transform the ES6 modules into a format that Node.js understands (usually CommonJS modules).

2. Use Node.js module syntax: If you don't want to use a bundler and your project doesn't have complex dependencies, you can refactor your code to use the Node.js module syntax instead of ES6 modules. In Node.js, you can use the `require` function to import modules instead of the `import` statement. For example:

```javascript
const { cleanTask } = require("./gulp/clean.js");
```

3. Enable ES6 module support in Node.js (experimental): Starting from Node.js version 12, you can enable experimental support for ES6 modules by using the `--experimental-modules` flag when running Node.js. However, note that this feature is still experimental and may not be fully supported in all scenarios. To use it, you would rename your file to have a `.mjs` extension and run Node.js with the `--experimental-modules` flag. For example:

```shell
node --experimental-modules yourfile.mjs
```

Keep in mind that the specific solution depends on your project setup and requirements. If you're working on a larger project, using a module bundler like Webpack or Rollup is generally the recommended approach. However, for smaller projects or quick scripts, using Node.js module syntax or enabling experimental ES6 module support can be viable options.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(