Node 14 + TS + Import: Compilation Error

Question

Node 14 + TS + Import: Compilation Error

MrDesjardins opened this issue 3 years ago · comments

Patrick Desjardins commented 3 years ago

Package's name
string-strip-html

Describe the bug
I added the string-strip-html to a Node 14 server solution that works with TypeScript. The compilation failed with a mention to no use require. However, I was using import.

To fix the issue, I followed what @revelt mentioned in this post.

To Reproduce
Steps to reproduce the behavior:

npm install string-strip-html@latest --save
import { stripHtml } from "string-strip-html";
Run tsx on the project

TypeScript configuration has:

target to es2016
module to commonjs

Expected behavior
To be able to consume the latest version with TypeScript

Roy Revelt · Answer 1 · Mon Sep 20 2021 06:21:17 GMT+0800 (China Standard Time)

hi Patrick! Sorry about that. Would it be possible to post the error stack message? If it's a sensitive project, feel free to blur the paths and file names. I would look where exactly is the error coming from. Normally, when Node complains about ESM, it mentions certain package.json, complaining that it's not type="module" and mentions using different extensions. Where exactly is that package.json the TSX complains about? Ie., project's root package.json or within node_modules or somewhere else?
Also, which version of TS are you using? Rollup definitions plugin I use is using the main typescript, v4.4.3. People reported issues with 3.x TS in the past. But I doubt the cause is the TS version.
In the meantime, as a temporary measure, please downgrade to 8.3.0, it's the last non-ESM version, it should work like in the old days.

Giovanni Joubert · Answer 2 · Mon Sep 20 2021 17:17:04 GMT+0800 (China Standard Time)

I believe I'm having the same issue:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: node_modules/string-strip-html/dist/string-strip-html.esm.js
require() of ES modules is not supported.
require() of /node_modules/string-strip-html/dist/string-strip-html.esm.js from products.ts 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 string-strip-html.esm.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /node_modules/string-strip-html/package.json.

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13) at Module.load (internal/modules/cjs/loader.js:937:32) at Function.Module._load (internal/modules/cjs/loader.js:778:12) at Module.require (internal/modules/cjs/loader.js:961:19) at require (internal/modules/cjs/helpers.js:92:18) at Object.<anonymous> (/Users/giovannijoubert/dev/github/wherehouse-connectors/src/connectors/wherehouse/products.ts:6:1) at Module._compile (internal/modules/cjs/loader.js:1072:14) at Module.m._compile (/Users/giovannijoubert/.nvm/versions/node/v12.22.1/lib/node_modules/ts-node/src/index.ts:1310:23) at Module._extensions..js (internal/modules/cjs/loader.js:1101:10) at Object.require.extensions.<computed> [as .ts] (/Users/giovannijoubert/.nvm/versions/node/v12.22.1/lib/node_modules/ts-node/src/index.ts:1313:12) at Module.load (internal/modules/cjs/loader.js:937:32) at Function.Module._load (internal/modules/cjs/loader.js:778:12) at Module.require (internal/modules/cjs/loader.js:961:19) at require (internal/modules/cjs/helpers.js:92:18) at Object.<anonymous> (/src/connectors/file-connectors/csv.ts:1:1) at Module._compile (internal/modules/cjs/loader.js:1072:14) { code: 'ERR_REQUIRE_ESM' }

Giovanni Joubert · Answer 3 · Mon Sep 20 2021 17:18:47 GMT+0800 (China Standard Time)

Can also confirm, 8.3.0 working fine for now in the same setup.

Roy Revelt · Answer 4 · Mon Sep 20 2021 17:32:27 GMT+0800 (China Standard Time)

@giovannijoubert sorry about that. Is there import or require in products.ts source code?

Giovanni Joubert · Answer 5 · Mon Sep 20 2021 17:34:40 GMT+0800 (China Standard Time)

No problem!

Imports yes, require no:

import TempQueue from '../../queues/connector-queues/temp-queue';
import Product from '../../models/Product';
import _ from 'lodash';
import { Job } from 'bullmq';
import { stripHtml } from 'string-strip-html';

Roy Revelt · Answer 6 · Mon Sep 20 2021 17:45:25 GMT+0800 (China Standard Time)

@giovannijoubert Try tweaking compilerOptions like https://stackoverflow.com/a/61894153/3943954 especially moduleResolution https://www.typescriptlang.org/docs/handbook/2/modules.html#typescripts-module-resolution-options

Eugene Formanenko · Answer 7 · Thu Sep 23 2021 02:48:03 GMT+0800 (China Standard Time)

Faced same issue

Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/string-strip-html/dist/string-strip-html.esm.js from ../file.ts not supported.

file.ts

import { stripHtml } from 'string-strip-html';

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "target": "es2019",
    "sourceMap": true,
    "outDir": "./dist",
    "allowJs": false,
    "baseUrl": ".",
    "incremental": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
}

"typescript": "^4.4.3"

Andre · Answer 8 · Sat Nov 20 2021 23:05:40 GMT+0800 (China Standard Time)

I ran into the same problem in a TypeScript project. I can use the latest version of string-strip-html in a standalone project with type set as module in package.json and import statements in plain .js files, but in a larger TypeScript project the same doesn't work and I'm seeing the ERR_REQUIRE_ESM error when module is commonjs in tsconfig.json or it just won't work at all if module is set to es6 because packages like mongodb won't load as ES6 modules.

The only working configuration for my setup with Node v12.22.7 is this:

package.json doesn't have type set to module
tsconfig.json has module set to commonjs (needed for some 3rd-party packages, like mongodb)
tsconfig.json has moduleResolution set to node
string-strip-html v8.3.0 is installed

I guess if one can find all of their dependencies written as ES modules, the latest version of string-strip-html can be used, but otherwise v8.3.0 seems to be the only solution for the time being.

Jason LaPier · Answer 9 · Wed Mar 09 2022 07:09:31 GMT+0800 (China Standard Time)

Having the same issue, using:

import { stripHtml } from "string-strip-html";

got error:

Error [ERR_REQUIRE_ESM]: require() of ES Module ./node_modules/string-strip-html/dist/string-strip-html.esm.js from ./src/myfile.ts not supported.
Instead change the require of string-strip-html.esm.js in ./src/myfile.ts to a dynamic import() which is available in all CommonJS modules.

tsconfig:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "commonjs",
    "lib": [
      "es2018",
      "ES2021.String",
      "ES6",
      "dom"
    ],
    "declaration": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": false,
    "inlineSourceMap": true,
    "inlineSources": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strictPropertyInitialization": false,
    "esModuleInterop": true,
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules",
    "cdk.out"
  ]
}

(using node 16.13.0)

Downgrading to 8.3.0 worked.

Roy Revelt · Answer 10 · Sat Oct 15 2022 21:47:39 GMT+0800 (China Standard Time)

To everybody who reaches this page, have a look at https://2ality.com/2021/06/typescript-esm-nodejs.html — the latest TypeScript is catching to up ESM. From my side, I can't action anything here — the string-strip-html is a standard pure-ESM package. I'll close this issue but feel free to post here or raise new issues, I'll do my best to help.