@nrwl/node application not transpiling to esm #10296

JonNode28 · 2022-05-14T15:42:41Z

Current Behavior

@nrwl/node application does not transpile to esm so esm-only packages (like node-fetch) fail.

Expected Behavior

Should transpile to esm

Steps to Reproduce

npx create-nx-workspace
Select "app"
yarn add -D @nrwl/node
nx g @nrwl/node:application esm-app
yarn add node-fetch (an esm only package)
import node-fetch in to apps/esm-app/src/main.ts
change "module" in apps/esm-app/tsconfig.app.json to 'esnext'
change "target" compiler option in tsconfig.base.json to 'esnext'
yarn build
dist/apps/esm-app/main.js should not use require() but does

main.js contains the following at the top

/******/ 	var __webpack_modules__ = ({

/***/ "node-fetch":
/***/ ((module) => {

module.exports = require("node-fetch");

/***/ })

/******/ 	});

Repro: https://github.com/JonNode28/nx-esm-repro

Failure Logs

Running yarn start produces the following error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/xxx/Projects/tmp/nx-esm-repro/node_modules/node-fetch/src/index.js
require() of ES modules is not supported.
require() of /Users/xxx/Projects/tmp/nx-esm-repro/node_modules/node-fetch/src/index.js from /Users/xxx/Projects/tmp/nx-esm-repro/dist/apps/esm-app/main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/xxx/Projects/tmp/nx-esm-repro/node_modules/node-fetch/package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.Module._load (/Users/xxx/Projects/tmp/nx-esm-repro/packages/node/src/executors/node/node-with-require-overrides.ts:16:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.node-fetch (/Users/xxx/Projects/tmp/nx-esm-repro/dist/apps/esm-app/webpack:/nx-esm-repro/external commonjs "node-fetch":1:1)
    at __webpack_require__ (/Users/xxx/Projects/tmp/nx-esm-repro/dist/apps/esm-app/webpack:/nx-esm-repro/webpack/bootstrap:19:1)
    at /Users/xxx/Projects/tmp/nx-esm-repro/dist/apps/esm-app/main.js:84:68

The text was updated successfully, but these errors were encountered:

jrfornes · 2022-05-24T01:22:54Z

I had a similar error after running nx run nxt-e2e:e2e --verbose after migrating to 13.2.X

Must use import to load ES Module: /Users/some-project/node_modules/@angular/compiler-cli/bundles/index.js
require() of ES modules is not supported.
require() of /Users/some-project/node_modules/@angular/compiler-cli/bundles/index.js from /Users/some-project/node_modules/**@angular-builders/custom-webpack**/node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/some-project/node_modules/@angular/compiler-cli/package.json.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/some-project/node_modules/@angular/compiler-cli/bundles/index.js

I was missing upgrading one of my project dependencies (non-controlled by NX) to an Angular 13 supportable version.
I fixed the error by upgrading the package.

sfsr12 · 2022-05-26T23:48:35Z

Have the same issue trying to use normalize-url

Seems to be the same issue as: #7872

github-actions · 2022-11-23T00:20:56Z

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

itPiligrim · 2022-11-23T05:30:09Z

Up🔝

gaurang171 · 2023-01-22T22:01:03Z

Same for me

keyp-dev · 2023-01-24T09:22:40Z

Same for me

caioquirino · 2023-01-24T11:28:26Z

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

Please annoy us via e-mail to keep it active haha

In this case:

Same for me
+1

radiovisual · 2023-01-27T11:02:18Z

Same thing is happening to me. Sending unicorn emojis to keep the bot from marking this issue as stale: 🦄🦄🦄🦄

gaurang171 · 2023-01-29T18:18:01Z

does any one knows what was the last working version? may be its better to downgrade

suneox · 2023-02-02T17:19:35Z

Up🔝

aitorllj93 · 2023-02-05T13:14:14Z

tried running the webpack builder with target: "es2021" but I got this error:

NX Property 'target' does not match the schema. 'es2021' should be one of node,web.

m3bwc · 2023-02-05T15:24:37Z

Up

DaSchTour · 2023-02-05T16:07:56Z

Instead of sending comments with up vote on the issue with 👍🏼🙄

caioquirino · 2023-02-05T18:14:18Z

Instead of sending comments with up vote on the issue with 👍🏼🙄

@DaSchTour does that work for this repo?

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

timur-svoboda · 2023-03-18T18:09:52Z

Same for me

nidomiro · 2023-05-15T05:47:16Z

I'm currently in the exploration phase of migration nestjs-apps in a nx monorepo to esm, and here are my findings so far:

This comment helped me to make webpack compile my nestJS-app to esm: Working with node and only esm packages #7872 (comment)
importing and using lodash-es works this way
tested through running the compiled artifact, since serve seems to always work...
importing libs from the same monorepo currently fails

my webpack-config:

const { composePlugins, withNx } = require('@nrwl/webpack');
const util = require('util');
const nodeExternals = require('webpack-node-externals');

// Nx plugins for webpack.
const configFunc = composePlugins(withNx(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  config.resolve.extensionAlias = {
    ...config.resolve.extensionAlias,
    '.js': ['.ts', '.js'],
    '.mjs': ['.mts', '.mjs'],
  };
  return config;
});

const configFuncWithOverrides = (config, ctx) => {
  return configFunc(config, ctx).then((config) => {

    /*
    Changes here copied from https://github.com/nrwl/nx/issues/7872#issuecomment-997460397
    */
    config.externalsPresets = {
      node: true,
    };

    config.output = {
      ...config.output,
      module: true,
      libraryTarget: 'module',
      chunkFormat: 'module',
      library: {
        type: 'module',
      },
      environment: {
        module: true,
      },
    };

    config.experiments = {
      ...config.experiments,
      outputModule: true,
    };

    config.externals = nodeExternals({
      importType: 'module',
    });

    return config;
  });
};

module.exports = configFuncWithOverrides;

nidomiro · 2023-05-15T07:07:34Z

Ok, the error I had had nothing to do with the config above, it works. The error was caused because I had a composite: true inside my ts-config somehow.

Building the app and running it works, but serve does not right now.

nidomiro · 2023-05-15T11:33:19Z

for serve the problem ultimately lies here, as node-with-require-overrides is only executable in commonJS: https://github.com/nrwl/nx/blob/master/packages/js/src/executors/node/node.impl.ts#LL137C47-L137C74

You can find a working esm version with nestJS and therefore webpack here: https://github.com/nidomiro/nx-commonjs-esm-migration/tree/main/apps/nest-esm.
The key changes are:

Change webpack config: https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/apps/nest-esm/webpack.config.cjs
Alter target build of the project.json: https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/apps/nest-esm/project.json
- build.options.outputFileName: main.mjs
- build.options.webpackConfig: change file ending to cjs
change tsconfig.app.json: module to Node16 and moduleResolution to node16 : https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/apps/nest-esm/tsconfig.app.json
change package.json: type to module: https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/apps/nest-esm/package.json
patch @nrwl/js to allow to run serve with esm: https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/patches/%40nrwl%2Bjs%2B15.9.2.patch

ottobolyos · 2023-05-21T18:27:49Z

Thanks, @nidomiro! 🙏 I did everything from your list of changes, except for patching @nrwl/js and in my case it works as expected, although I use @nx/[email protected] with [email protected], @nestjs/[email protected].

xendarboh · 2023-06-11T00:34:57Z

Working to get my entire project to esm, almost there...

I have an app generated with nx g @nx/node:app --framework=express that failed to :serve (:build worked) with errors that led me to this issue. The errors began when an imported lib (within the same nx workspace) changed from cjs to esm. Tried many config tweaks, nada.

Since it was a simple express app, I checked to see if a generated @nx/express:app worked without the issue, and it did. In my context, applying the difference to the existing project was a matter of changing the build executor from using @nx/esbuild to @nx/webpack. Now it builds and serves.

npm i --save-dev @nx/webpack

Change build target in apps/myapp/project.json:

    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "target": "node",
        "compiler": "tsc",
        "outputPath": "dist/apps/myapp",
        "main": "apps/myapp/src/main.ts",
        "tsConfig": "apps/myapp/tsconfig.app.json",
        "assets": ["apps/myapp/src/assets"],
        "isolatedConfig": true,
        "webpackConfig": "apps/myapp/webpack.config.js"
      },
      "configurations": {
        "development": {},
        "production": {}
      }
    },

Add apps/myapp/webpack.config.js:

const { composePlugins, withNx } = require('@nx/webpack');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  return config;
});

I thought all was fine then very strangely(!) the error was back, (maybe from a deeper cleaning process, but no code changes). This time, hopefully finally, it was fixed by adjusting the order of imports to put the lib (from the nx workspace) after external packages from node_modules.

 import express from 'express';
-import { payloadFromBase58 } from '@myworkspace/mylib';
 import { Encoding, Field, Poseidon, PrivateKey, Signature } from 'snarkyjs';
+import { payloadFromBase58 } from '@myworkspace/mylib';

…webpack :serve was failing due to an imported lib's change to esm nrwl/nx#10296 (comment)

Kolahzary · 2023-06-16T12:31:32Z

Same issue here:

ESM not-supported error on v3 muratgozel/turkey-neighbourhoods#9

namdien177 · 2023-07-15T05:32:55Z

for serve the problem ultimately lies here, as node-with-require-overrides is only executable in commonJS: master/packages/js/src/executors/node/node.impl.ts#LL137C47-L137C74

This is still an issue even in the new version 16.5.0.

After playing with the tsconfig and executor of nx a bit, I think this is the main issue. Until the node-with-require-overrides support both CJS and ESM, it's painful to use ESM packages in Express app.

laneme · 2023-09-05T15:44:20Z

No status yet?

patryksmolarz · 2023-09-08T20:07:29Z

About node-fetch.

Hello! Maybe it's a little workaround but at this moment I don't have any other idea how to solve that. I had the same problem with node-fetch and ESModules. I'm using NestJS with Next. Three apps as monorepo and I migrate to @nrwl > @nx (16.8.1) packages. Solution is to use node-fetch2 instead of node-fetch But step by step:

tsconfig.base.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2020", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@morphais/my-new-lib": ["libs/my-new-lib/src/index.ts"],
      "@morphais/shared/domain": ["libs/shared/domain/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

webpack.config.js of my nestjs app

const { composePlugins, withNx } = require('@nx/webpack');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  return config;
});

tsconfig.json of my nestjs app

{
  "extends": "../../tsconfig.base.json",
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ],
  "compilerOptions": {
    "esModuleInterop": true
  }
}

tsconfig.app.json of my nestjs app

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["node"],
    "emitDecoratorMetadata": true,
    "target": "es2021"
  },
  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
  "include": ["src/**/*.ts"]
}

project.json of my nestjs app

{
  "name": "backend",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/backend/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "target": "node",
        "compiler": "tsc",
        "outputPath": "dist/apps/backend",
        "main": "apps/backend/src/main.ts",
        "tsConfig": "apps/backend/tsconfig.app.json",
        "assets": ["apps/backend/src/assets"],
        "isolatedConfig": true,
        "webpackConfig": "apps/backend/webpack.config.js"
      },
      "configurations": {
        "production": {}
      }
    },
    "serve": {
      "executor": "@nrwl/js:node",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "backend:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "backend:build:development"
        },
        "production": {
          "buildTarget": "backend:build:production"
        }
      }
    },
    "lint": {
      "executor": "@nx/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/backend/**/*.ts"]
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/apps/backend"],
      "options": {
        "jestConfig": "apps/backend/jest.config.js",
        "passWithNoTests": true
      }
    }
  },
  "tags": []
}

As you can see nothing special with ts files and webpack. When I started to use esModuleInterop (because I hadn't this before) then I had to change all imports, for example dayjs import * as dayjs from 'dayjs' to import dayjs from dayjs. Error still occurred, but then I used node-fetch2 and then all start work. I hope this helps you.

fauzulkc · 2023-11-27T14:21:27Z

for serve the problem ultimately lies here, as node-with-require-overrides is only executable in commonJS: https://github.com/nrwl/nx/blob/master/packages/js/src/executors/node/node.impl.ts#LL137C47-L137C74

You can find a working esm version with nestJS and therefore webpack here: https://github.com/nidomiro/nx-commonjs-esm-migration/tree/main/apps/nest-esm. The key changes are:

Change webpack config: https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/apps/nest-esm/webpack.config.cjs

Alter target build of the project.json: https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/apps/nest-esm/project.json

build.options.outputFileName: main.mjs

build.options.webpackConfig: change file ending to cjs

change tsconfig.app.json: module to Node16 and moduleResolution to node16 : https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/apps/nest-esm/tsconfig.app.json

change package.json: type to module: https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/apps/nest-esm/package.json

patch @nrwl/js to allow to run serve with esm: https://github.com/nidomiro/nx-commonjs-esm-migration/blob/faa00631ddefe9387efeb59191a15b0db798783f/patches/%40nrwl%2Bjs%2B15.9.2.patch

This is working. 👏

github-actions · 2024-09-30T00:28:53Z

This issue has been automatically marked as stale because it hasn't had any activity for 6 months.
Many things may have changed within this time. The issue may have already been fixed or it may not be relevant anymore.
If at this point, this is still an issue, please respond with updated information.
It will be closed in 21 days if no further activity occurs.
Thanks for being a part of the Nx community! 🙏

nidomiro · 2024-09-30T06:50:43Z

not stale, even if ignored😉

EthanSK · 2024-12-27T13:14:22Z

hello? please.

EthanSK · 2024-12-27T13:14:26Z

hello? please.

JonNode28 added the type: bug label May 14, 2022

AgentEnder added the scope: node Issues related to Node, Express, NestJS support for Nx label May 18, 2022

owen26 mentioned this issue Jul 28, 2022

@nrwl/node:node executor does not support importing ESM libs #11335

Open

vlwkaos mentioned this issue Aug 26, 2022

@nrwl/jest does not support testing library with yarn berry pnp mode #11733

Closed

spaceribs mentioned this issue Oct 3, 2022

build(deps): bump node-forge and web-ext spaceribs/spaceribs#17

Closed

github-actions bot added the stale label Nov 23, 2022

github-actions bot removed the stale label Nov 24, 2022

xendarboh added a commit to zkHumans/zkHumans that referenced this issue Jun 11, 2023

fix(oracle-auth-test): change build executor from @nx/esbuild to @nx/…

aa023d0

…webpack :serve was failing due to an imported lib's change to esm nrwl/nx#10296 (comment)

xendarboh added a commit to zkHumans/zkHumans that referenced this issue Jun 13, 2023

fix(oracle-auth-test): change build executor from @nx/esbuild to @nx/…

46251e0

…webpack :serve was failing due to an imported lib's change to esm nrwl/nx#10296 (comment)

xendarboh mentioned this issue Jun 16, 2023

express app "serve" fails (in docker) when dependant on js lib built with tsc #17608

Closed

4 tasks

nhattan097 mentioned this issue Aug 7, 2023

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /home/ec2-user/helia/node_modules/helia/package.json ipfs/helia#216

Closed

FrozenPandaz assigned ndcunningham Apr 2, 2024

github-actions bot added the stale label Sep 30, 2024

github-actions bot removed the stale label Oct 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@nrwl/node application not transpiling to esm #10296

@nrwl/node application not transpiling to esm #10296

JonNode28 commented May 14, 2022 •

edited

Loading

jrfornes commented May 24, 2022

sfsr12 commented May 26, 2022 •

edited

Loading

github-actions bot commented Nov 23, 2022

itPiligrim commented Nov 23, 2022

gaurang171 commented Jan 22, 2023

keyp-dev commented Jan 24, 2023

caioquirino commented Jan 24, 2023

radiovisual commented Jan 27, 2023

gaurang171 commented Jan 29, 2023

suneox commented Feb 2, 2023

aitorllj93 commented Feb 5, 2023 •

edited

Loading

m3bwc commented Feb 5, 2023

DaSchTour commented Feb 5, 2023

caioquirino commented Feb 5, 2023

timur-svoboda commented Mar 18, 2023

nidomiro commented May 15, 2023 •

edited

Loading

nidomiro commented May 15, 2023 •

edited

Loading

nidomiro commented May 15, 2023 •

edited

Loading

ottobolyos commented May 21, 2023

xendarboh commented Jun 11, 2023 •

edited

Loading

Kolahzary commented Jun 16, 2023

namdien177 commented Jul 15, 2023

laneme commented Sep 5, 2023

patryksmolarz commented Sep 8, 2023

fauzulkc commented Nov 27, 2023

github-actions bot commented Sep 30, 2024

nidomiro commented Sep 30, 2024

EthanSK commented Dec 27, 2024

EthanSK commented Dec 27, 2024

@nrwl/node application not transpiling to esm #10296

@nrwl/node application not transpiling to esm #10296

Comments

JonNode28 commented May 14, 2022 • edited Loading

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

jrfornes commented May 24, 2022

sfsr12 commented May 26, 2022 • edited Loading

github-actions bot commented Nov 23, 2022

itPiligrim commented Nov 23, 2022

gaurang171 commented Jan 22, 2023

keyp-dev commented Jan 24, 2023

caioquirino commented Jan 24, 2023

radiovisual commented Jan 27, 2023

gaurang171 commented Jan 29, 2023

suneox commented Feb 2, 2023

aitorllj93 commented Feb 5, 2023 • edited Loading

m3bwc commented Feb 5, 2023

DaSchTour commented Feb 5, 2023

caioquirino commented Feb 5, 2023

timur-svoboda commented Mar 18, 2023

nidomiro commented May 15, 2023 • edited Loading

nidomiro commented May 15, 2023 • edited Loading

nidomiro commented May 15, 2023 • edited Loading

ottobolyos commented May 21, 2023

xendarboh commented Jun 11, 2023 • edited Loading

Kolahzary commented Jun 16, 2023

namdien177 commented Jul 15, 2023

laneme commented Sep 5, 2023

patryksmolarz commented Sep 8, 2023

fauzulkc commented Nov 27, 2023

github-actions bot commented Sep 30, 2024

nidomiro commented Sep 30, 2024

EthanSK commented Dec 27, 2024

EthanSK commented Dec 27, 2024

JonNode28 commented May 14, 2022 •

edited

Loading

sfsr12 commented May 26, 2022 •

edited

Loading

aitorllj93 commented Feb 5, 2023 •

edited

Loading

nidomiro commented May 15, 2023 •

edited

Loading

nidomiro commented May 15, 2023 •

edited

Loading

nidomiro commented May 15, 2023 •

edited

Loading

xendarboh commented Jun 11, 2023 •

edited

Loading