Syntaxerror: Cannot Use Import Statement Outside a Module

SyntaxError: Cannot use import statement outside a module

Verify that you have the latest version of Node.js installed (or, at least 13.2.0+). Then do one of the following, as described in the documentation:

Option 1

In the nearest parent package.json file, add the top-level "type" field with a value of "module". This will ensure that all .js and .mjs files are interpreted as ES modules. You can interpret individual files as CommonJS by using the .cjs extension.

// package.json
{
  "type": "module"
}

Option 2

Explicitly name files with the .mjs extension. All other files, such as .js will be interpreted as CommonJS, which is the default if type is not defined in package.json.

MUI5 not working with jest - SyntaxError: Cannot use import statement outside a module

First you have two exports in your Select.tsx file. Just use the default export, so change line 20 to:

const Select: React.FC<ISelect> = ({ label, id, children, options, ...props }) => {

Then in your Select.test.tsx file change to:

import Select from './Select'

Finally to fix the import issue change your code in Select.tsx to:

import { styled } from '@mui/material'

This is a fairly common issue as can be seen here.

Typescript SyntaxError: Cannot use import statement outside a module (side file containing functions)

Fixed by changing:

import {util} from "./utils/util"

To:

const util = require('./utils/util')
// or
const { sleep, random, eatAny, clickItem, lookAtEntity} = require('./utils/util')

Afterall I don't know why compiling with tsc had been working well while webstorm was throwing out error. I just changed the import ES6 syntax to require() CommonJS.

How to fix 'SyntaxError: Cannot use import statement outside a module'?

Move ormconfig.ts to your src folder (change imports if necessary), and add the include after compilerOptions to include everything in the src. It's also a good idea to use exclude node_modules and tests:

{
    "compilerOptions": { ... },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules", "tests"]
}

It might be because TypeScript is including ormconfig.ts in the compilation output: as you can see in the build folder there is an index.js and ormconfig.js AND duplicate src folder.

---

Related Topics