exports is not defined in ES module scope

52.3k Views Asked by At

I created nest js project as following.

nest new project-name

and imported following from nuxt3 which is of type module of node js with mjs file extension (type definition of import doesn't require to write mjs).

import { ViteBuildContext, ViteOptions, bundle } from '@nuxt/vite-builder-edge';

It gives me below error.

Uncaught Error Error [ERR_REQUIRE_ESM]: require() of ES Module c:\project\node_modules\@nuxt\vite-builder-edge\dist\index.mjs not supported. Instead change the require of c:\project\node_modules\@nuxt\vite-builder-edge\dist\index.mjs to a dynamic import() which is available in all CommonJS modules.

So I tried adding "type": "module" in package.json so now I am getting below error.

Uncaught ReferenceError ReferenceError: exports is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and 'c:\project\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. at <anonymous> (c:\project\dist\main.js:2:23)

How do I fix this? Error is related to typescript (or say compiled javascript) is unable to import mjs exports. What is solution to this?

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false
  }
}
2

There are 2 best solutions below

3
On BEST ANSWER

Updating tsconfig "module" and "target" to "ES6" (module is past, ES is future. Please use ES so that they can deprecate module) solved the issue.

But after that, imports stopped working without extension.

So I had to add ".js" in import even though they were ".ts" files.

e.g. I had to import app.module.ts file as following (note extension).

import { AppModule } from './app.module.js';

3
On

From the comments to your question it seems you are using Babel too. Both "module" type and Babel won't work together.

Further as @Teemu mentioned you need to use export default {} syntax instead of module.exports for a ES6 style export.