-
-
Save mrdulin/bf5e679802a9a38c5d6b3b7f068135f5 to your computer and use it in GitHub Desktop.
Revisions
-
sindresorhus revised this gist
May 13, 2023 . 1 changed file with 5 additions and 7 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -9,12 +9,10 @@ This means you have the following choices: 2. If the package is used in an async context, you could use [`await import(…)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) from CommonJS instead of `require(…)`. 3. Stay on the existing version of the package until you can move to ESM. **You also need to make sure you're on the latest minor version of Node.js. At minimum Node.js 16.** I would strongly recommend moving to ESM. ESM can still import CommonJS packages, but CommonJS packages cannot import ESM packages synchronously. **My repos are not the place to ask ESM/TypeScript/Webpack/Jest/ts-node/CRA support questions.** ## FAQ @@ -23,12 +21,12 @@ ESM is natively supported by Node.js 12 and later. - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 16: `"node": ">=16"`. - Remove `'use strict';` from all JavaScript files. - Replace all `require()`/`module.export` with `import`/`export`. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - If you have a TypeScript type definition (for example, `index.d.ts`), update it to use ESM imports/exports. - Use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for Node.js built-in imports. Sidenote: If you're looking for guidance on how to add types to your JavaScript package, [check out my guide](https://github.com/sindresorhus/typescript-definition-style-guide). @@ -45,11 +43,11 @@ Quick steps: - Make sure you are using TypeScript 4.7 or later. - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 16: `"node": ">=16"`. - Add [`"module": "node16", "moduleResolution": "node16"`](https://www.typescriptlang.org/tsconfig#module) to your tsconfig.json. *([Example](https://github.com/sindresorhus/tsconfig/blob/main/tsconfig.json))* - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - Remove `namespace` usage and use `export` instead. - Use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for Node.js built-in imports. - **You must use a `.js` extension in relative imports even though you're importing `.ts` files.** If you use `ts-node`, follow [this guide](https://github.com/TypeStrong/ts-node/issues/1007). [Example config.](https://github.com/sindresorhus/got/blob/5f278d74125608b7abe75941cb6a71e21e0fb892/tsconfig.json#L17-L21) -
sindresorhus revised this gist
Nov 4, 2022 . 1 changed file with 4 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -38,6 +38,10 @@ Yes, but you need to convert your project to output ESM. See below. ### How can I make my TypeScript project output ESM? [Read the official ESM guide.](https://www.typescriptlang.org/docs/handbook/esm-node.html) Quick steps: - Make sure you are using TypeScript 4.7 or later. - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. @@ -48,8 +52,6 @@ Yes, but you need to convert your project to output ESM. See below. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. - **You must use a `.js` extension in relative imports even though you're importing `.ts` files.** If you use `ts-node`, follow [this guide](https://github.com/TypeStrong/ts-node/issues/1007). [Example config.](https://github.com/sindresorhus/got/blob/5f278d74125608b7abe75941cb6a71e21e0fb892/tsconfig.json#L17-L21) ### How can I import ESM in Electron? -
sindresorhus revised this gist
Oct 19, 2022 . 1 changed file with 5 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -50,7 +50,7 @@ Yes, but you need to convert your project to output ESM. See below. Also make sure to read the [official TypeScript guide](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/#ecmascript-module-support-in-node-js). If you use `ts-node`, follow [this guide](https://github.com/TypeStrong/ts-node/issues/1007). [Example config.](https://github.com/sindresorhus/got/blob/5f278d74125608b7abe75941cb6a71e21e0fb892/tsconfig.json#L17-L21) ### How can I import ESM in Electron? @@ -67,20 +67,22 @@ The problem is either Webpack or your Webpack configuration. First, ensure you a ### I'm having problems with ESM and Next.js Upgrade to [Next.js 12](https://nextjs.org/blog/next-12#es-modules-support-and-url-imports) which has full ESM support. ### I'm having problems with ESM and Jest [Read this first.](https://github.com/facebook/jest/blob/64de4d7361367fd711a231d25c37f3be89564264/docs/ECMAScriptModules.md) The problem is either Jest ([#9771](https://github.com/facebook/jest/issues/9771)) or your Jest configuration. First, ensure you are on the latest version of Jest. Please don't open an issue on my repo. Try asking on Stack Overflow or [open an issue the Jest repo](https://github.com/facebook/jest). ### I'm having problems with ESM and TypeScript If you have decided to make your project ESM (`"type": "module"` in your package.json), make sure you have [`"module": "node16"`](https://www.typescriptlang.org/tsconfig#module) in your tsconfig.json and that all your import statements to local files use the `.js` extension, **not** `.ts` or no extension. ### I'm having problems with ESM and `ts-node` Follow [this guide](https://github.com/TypeStrong/ts-node/issues/1007) and ensure you are on the latest version of `ts-node`. [Example config.](https://github.com/sindresorhus/got/blob/5f278d74125608b7abe75941cb6a71e21e0fb892/tsconfig.json#L17-L21) ### I'm having problems with ESM and Create React App Create React App doesn't yet fully support ESM. I would recommend opening an issue on their repo with the problem you have encountered. One known issue is [#10933](https://github.com/facebook/create-react-app/issues/10933). -
sindresorhus revised this gist
Oct 19, 2022 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ # Pure ESM package The package that linked you here is now pure [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). It cannot be `require()`'d from CommonJS. This means you have the following choices: -
sindresorhus revised this gist
Jul 19, 2022 . 1 changed file with 0 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -15,8 +15,6 @@ I would strongly recommend moving to ESM. ESM can still import CommonJS packages ESM is natively supported by Node.js 12 and later. **My repos are not the place to ask ESM/TypeScript/Webpack/Jest/ts-node/CRA support questions.** ## FAQ -
sindresorhus revised this gist
May 30, 2022 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -40,6 +40,7 @@ Yes, but you need to convert your project to output ESM. See below. ### How can I make my TypeScript project output ESM? - Make sure you are using TypeScript 4.7 or later. - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 14: `"node": ">=14.16"`. (Excluding Node.js 12 as it's no longer supported) -
sindresorhus revised this gist
May 30, 2022 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -43,7 +43,7 @@ Yes, but you need to convert your project to output ESM. See below. - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 14: `"node": ">=14.16"`. (Excluding Node.js 12 as it's no longer supported) - Add [`"module": "node16", "moduleResolution": "node16"`](https://www.typescriptlang.org/tsconfig#module) to your tsconfig.json. *([Example](https://github.com/sindresorhus/tsconfig/blob/main/tsconfig.json))* - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - Remove `namespace` usage and use `export` instead. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. -
sindresorhus revised this gist
Apr 24, 2022 . 1 changed file with 7 additions and 7 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -25,7 +25,7 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 14: `"node": ">=14.16"`. (Excluding Node.js 12 as it's no longer supported) - Remove `'use strict';` from all JavaScript files. - Replace all `require()`/`module.export` with `import`/`export`. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. @@ -42,13 +42,15 @@ Yes, but you need to convert your project to output ESM. See below. - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 14: `"node": ">=14.16"`. (Excluding Node.js 12 as it's no longer supported) - Add [`"module": "nodenext"`](https://www.typescriptlang.org/tsconfig#module) to your tsconfig.json. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - Remove `namespace` usage and use `export` instead. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. - **You must use a `.js` extension in relative imports even though you're importing `.ts` files.** Also make sure to read the [official TypeScript guide](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/#ecmascript-module-support-in-node-js). If you use `ts-node`, follow [this guide](https://github.com/TypeStrong/ts-node/issues/1007). ### How can I import ESM in Electron? @@ -74,7 +76,7 @@ You must enable the [experimental support for ESM](https://nextjs.org/blog/next- ### I'm having problems with ESM and TypeScript If you have decided to make your project ESM (`"type": "module"` in your package.json), make sure you have [`"module": "nodenext"`](https://www.typescriptlang.org/tsconfig#module) in your tsconfig.json and that all your import statements to local files use the `.js` extension, **not** `.ts` or no extension. ### I'm having problems with ESM and `ts-node` @@ -133,13 +135,11 @@ const chalk = (await importFresh('chalk')).default; JavaScript Modules will eventually get [native support for JSON](https://github.com/tc39/proposal-json-modules), but for now, you can do this: ```js import fs from 'node:fs/promises'; const packageJson = JSON.parse(await fs.readFile('package.json')); ``` ### When should I use a default export or named exports? My general rule is that if something exports a single main thing, it should be a default export. -
sindresorhus revised this gist
Sep 10, 2021 . 1 changed file with 2 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -32,6 +32,8 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - If you have a TypeScript type definition (for example, `index.d.ts`), update it to use ESM imports/exports. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. Sidenote: If you're looking for guidance on how to add types to your JavaScript package, [check out my guide](https://github.com/sindresorhus/typescript-definition-style-guide). ### Can I import ESM packages in my TypeScript project? Yes, but you need to convert your project to output ESM. See below. -
sindresorhus revised this gist
Sep 1, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -5,7 +5,7 @@ The package linked to from here is now pure [ESM](https://developer.mozilla.org/ This means you have the following choices: 1. Use ESM yourself. **(preferred)**\ Use `import foo from 'foo'` instead of `const foo = require('foo')` to import the package. You also need to put `"type": "module"` in your package.json and more. Follow the below guide. 2. If the package is used in an async context, you could use [`await import(…)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) from CommonJS instead of `require(…)`. 3. Stay on the existing version of the package until you can move to ESM. -
sindresorhus revised this gist
Aug 16, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -64,7 +64,7 @@ The problem is either Webpack or your Webpack configuration. First, ensure you a ### I'm having problems with ESM and Next.js You must enable the [experimental support for ESM](https://nextjs.org/blog/next-11-1#es-modules-support). ### I'm having problems with ESM and Jest -
sindresorhus revised this gist
Aug 11, 2021 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -138,7 +138,7 @@ const packageJson = JSON.parse(await fs.readFile('package.json')); If you target Node.js 14 or later, you can import it using `import fs from 'node:fs/promises';` instead. ### When should I use a default export or named exports? My general rule is that if something exports a single main thing, it should be a default export. @@ -148,7 +148,7 @@ Keep in mind that you can combine a default export with named exports when it ma import readJson, {JSONError} from 'read-json'; ``` Here, we had exported the main thing `readJson`, but we also exported an error as a named export. #### Asynchronous and synchronous API @@ -182,7 +182,7 @@ import {parseJson} from 'parse-json'; #### Examples With ESM, I now prefer descriptive named exports more often than a namespace default export: CommonJS (before): -
sindresorhus revised this gist
Aug 11, 2021 . 1 changed file with 62 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -137,3 +137,65 @@ const packageJson = JSON.parse(await fs.readFile('package.json')); ``` If you target Node.js 14 or later, you can import it using `import fs from 'node:fs/promises';` instead. ### When should I use a default export and named exports? My general rule is that if something exports a single main thing, it should be a default export. Keep in mind that you can combine a default export with named exports when it makes sense: ```js import readJson, {JSONError} from 'read-json'; ``` Here, we had exported the main thing `readJson`, but we also had exported an error as a named export. #### Asynchronous and synchronous API If your package has both an asynchronous and synchronous main API, I would recommend using named exports: ```js import {readJson, readJsonSync} from 'read-json'; ``` This makes it clear to the reader that the package exports multiple main APIs. We also follow the Node.js convention of suffixing the synchronous API with `Sync`. #### Readable named exports I have noticed a bad pattern of packages using overly generic names for named exports: ```js import {parse} from 'parse-json'; ``` This forces the consumer to either accept the ambiguous name (which might cause naming conflicts) or rename it: ```js import {parse as parseJson} from 'parse-json'; ``` Instead, make it easy for the user: ```js import {parseJson} from 'parse-json'; ``` #### Examples I have noticed that I have started to use descriptive named exports more often rather than a namespace default export: CommonJS (before): ```js const isStream = require('is-stream'); isStream.writable(…); ``` ESM (now): ```js import {isWritableStream} from 'is-stream'; isWritableStream(…); ``` -
sindresorhus revised this gist
Jul 24, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -133,7 +133,7 @@ JavaScript Modules will eventually get [native support for JSON](https://github. ```js import {promises as fs} from 'node:fs'; const packageJson = JSON.parse(await fs.readFile('package.json')); ``` If you target Node.js 14 or later, you can import it using `import fs from 'node:fs/promises';` instead. -
sindresorhus revised this gist
Jul 23, 2021 . 1 changed file with 4 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -131,7 +131,9 @@ const chalk = (await importFresh('chalk')).default; JavaScript Modules will eventually get [native support for JSON](https://github.com/tc39/proposal-json-modules), but for now, you can do this: ```js import {promises as fs} from 'node:fs'; const packageJson = JSON.parse(await fs.readFile('package.json')). ``` If you target Node.js 14 or later, you can import it using `import fs from 'node:fs/promises';` instead. -
sindresorhus revised this gist
Jun 13, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -114,7 +114,7 @@ And many Node.js APIs accept URL directly, so you can just do this: const foo = new URL('foo.js', import.meta.url); ``` ### How can I import a module and bypass the cache for testing? There's no good way to do this yet. Not until we get [ESM loader hooks](https://github.com/nodejs/modules/issues/307). For now, this snippet can be useful: -
sindresorhus revised this gist
May 28, 2021 . 1 changed file with 4 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -62,6 +62,10 @@ You have the following options: The problem is either Webpack or your Webpack configuration. First, ensure you are on the latest version of Webpack. Please don't open an issue on my repo. Try asking on Stack Overflow or [open an issue the Webpack repo](https://github.com/webpack/webpack). ### I'm having problems with ESM and Next.js Next.js doesn't yet support ESM. [Workaround.](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#gistcomment-3760583) ### I'm having problems with ESM and Jest [Read this first.](https://github.com/facebook/jest/blob/64de4d7361367fd711a231d25c37f3be89564264/docs/ECMAScriptModules.md) The problem is either Jest ([#9771](https://github.com/facebook/jest/issues/9771)) or your Jest configuration. First, ensure you are on the latest version of Jest. Please don't open an issue on my repo. Try asking on Stack Overflow or [open an issue the Jest repo](https://github.com/facebook/jest). -
sindresorhus revised this gist
May 28, 2021 . 1 changed file with 9 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -49,6 +49,15 @@ Yes, but you need to convert your project to output ESM. See below. If you use `ts-node`, follow [this guide](https://github.com/TypeStrong/ts-node/issues/1007). ### How can I import ESM in Electron? [Electron doesn't yet support ESM natively.](https://github.com/electron/electron/issues/21457) You have the following options: 1. Stay on the previous version of the package in question. 2. Bundle your dependencies with Webpack into a CommonJS bundle. 3. Use the [`esm`](https://github.com/standard-things/esm) package. ### I'm having problems with ESM and Webpack The problem is either Webpack or your Webpack configuration. First, ensure you are on the latest version of Webpack. Please don't open an issue on my repo. Try asking on Stack Overflow or [open an issue the Webpack repo](https://github.com/webpack/webpack). -
sindresorhus revised this gist
May 12, 2021 . 1 changed file with 2 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -9,6 +9,8 @@ This means you have the following choices: 2. If the package is used in an async context, you could use [`await import(…)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) from CommonJS instead of `require(…)`. 3. Stay on the existing version of the package until you can move to ESM. **You also need to make sure you're on the latest minor version of Node.js. At minimum Node.js 12.20, 14.14, or 16.0.** I would strongly recommend moving to ESM. ESM can still import CommonJS packages, but CommonJS packages cannot import ESM packages synchronously. ESM is natively supported by Node.js 12 and later. -
sindresorhus revised this gist
May 10, 2021 . 1 changed file with 10 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -110,3 +110,13 @@ const chalk = (await importFresh('chalk')).default; ``` *Note: This will cause memory leaks, so only use it for testing, not in production. Also, it will only reload the imported module, not its dependencies.* ### How can I import JSON? JavaScript Modules will eventually get [native support for JSON](https://github.com/tc39/proposal-json-modules), but for now, you can do this: ```js import {promises as fs} from 'fs'; const packageJson = JSON.parse(await fs.readFile('package.json', 'utf8')). ``` -
sindresorhus revised this gist
May 9, 2021 . 1 changed file with 10 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -23,18 +23,22 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 12: `"node": "^12.20.0 || ^14.13.1 || >=16.0.0"`. - Remove `'use strict';` from all JavaScript files. - Replace all `require()`/`module.export` with `import`/`export`. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - If you have a TypeScript type definition (for example, `index.d.ts`), update it to use ESM imports/exports. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. ### Can I import ESM packages in my TypeScript project? Yes, but you need to convert your project to output ESM. See below. ### How can I make my TypeScript project output ESM? - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 12: `"node": "^12.20.0 || ^14.13.1 || >=16.0.0"`. - Add [`"module": "ES2020"`](https://www.typescriptlang.org/tsconfig#module) to your tsconfig.json. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - Remove `namespace` usage and use `export` instead. @@ -59,6 +63,10 @@ If you have decided to make your project ESM (`"type": "module"` in your package Follow [this guide](https://github.com/TypeStrong/ts-node/issues/1007) and ensure you are on the latest version of `ts-node`. ### I'm having problems with ESM and Create React App Create React App doesn't yet fully support ESM. I would recommend opening an issue on their repo with the problem you have encountered. One known issue is [#10933](https://github.com/facebook/create-react-app/issues/10933). ### How can I use TypeScript with AVA for an ESM project? Follow [this guide](https://github.com/avajs/ava/blob/main/docs/recipes/typescript.md#for-packages-with-type-module). -
sindresorhus revised this gist
May 7, 2021 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -23,7 +23,7 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 12: `"node": ">=12.20"`. - Remove `'use strict';` from all JavaScript files. - Replace all `require()`/`module.export` with `import`/`export`. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. @@ -34,7 +34,7 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 12: `"node": ">=12.20"`. - Add [`"module": "ES2020"`](https://www.typescriptlang.org/tsconfig#module) to your tsconfig.json. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - Remove `namespace` usage and use `export` instead. -
sindresorhus revised this gist
May 5, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -49,7 +49,7 @@ The problem is either Webpack or your Webpack configuration. First, ensure you a ### I'm having problems with ESM and Jest [Read this first.](https://github.com/facebook/jest/blob/64de4d7361367fd711a231d25c37f3be89564264/docs/ECMAScriptModules.md) The problem is either Jest ([#9771](https://github.com/facebook/jest/issues/9771)) or your Jest configuration. First, ensure you are on the latest version of Jest. Please don't open an issue on my repo. Try asking on Stack Overflow or [open an issue the Jest repo](https://github.com/facebook/jest). ### I'm having problems with ESM and TypeScript -
sindresorhus revised this gist
May 5, 2021 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -37,6 +37,7 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Update the `"engines"` field in package.json to Node.js 12: `"node": ">=12.17"`. - Add [`"module": "ES2020"`](https://www.typescriptlang.org/tsconfig#module) to your tsconfig.json. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - Remove `namespace` usage and use `export` instead. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. - **You must use a `.js` extension in relative imports even though you're importing `.ts` files.** -
sindresorhus revised this gist
May 5, 2021 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -69,8 +69,8 @@ We got you covered with this [ESLint rule](https://github.com/sindresorhus/eslin ### What do I use instead of `__dirname` and `__filename`? ```js import {fileURLToPath} from 'node:url'; import path from 'node:path'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(fileURLToPath(import.meta.url)); @@ -79,7 +79,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url)); However, in most cases, this is better: ```js import {fileURLToPath} from 'node:url'; const foo = fileURLToPath(new URL('foo.js', import.meta.url)); ``` -
sindresorhus revised this gist
May 5, 2021 . 1 changed file with 30 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -27,7 +27,7 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Remove `'use strict';` from all JavaScript files. - Replace all `require()`/`module.export` with `import`/`export`. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - If you have a TypeScript type definition (for example, `index.d.ts`), update it to use ESM imports/exports. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. ### How can I make my TypeScript project output ESM? @@ -62,6 +62,34 @@ Follow [this guide](https://github.com/TypeStrong/ts-node/issues/1007) and ensur Follow [this guide](https://github.com/avajs/ava/blob/main/docs/recipes/typescript.md#for-packages-with-type-module). ### How can I make sure I don't accidentally use CommonJS-specific conventions? We got you covered with this [ESLint rule](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-module.md). You should also use [this rule](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-node-protocol.md). ### What do I use instead of `__dirname` and `__filename`? ```js import {fileURLToPath} from 'url'; import path from 'path'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(fileURLToPath(import.meta.url)); ``` However, in most cases, this is better: ```js import {fileURLToPath} from 'url'; const foo = fileURLToPath(new URL('foo.js', import.meta.url)); ``` And many Node.js APIs accept URL directly, so you can just do this: ```js const foo = new URL('foo.js', import.meta.url); ``` ### How can import a module and bypass the cache for testing? There's no good way to do this yet. Not until we get [ESM loader hooks](https://github.com/nodejs/modules/issues/307). For now, this snippet can be useful: @@ -72,4 +100,4 @@ const importFresh = async modulePath => import(`${modulePath}?x=${new Date()}`); const chalk = (await importFresh('chalk')).default; ``` *Note: This will cause memory leaks, so only use it for testing, not in production. Also, it will only reload the imported module, not its dependencies.* -
sindresorhus revised this gist
May 5, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -34,7 +34,7 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 12: `"node": ">=12.17"`. - Add [`"module": "ES2020"`](https://www.typescriptlang.org/tsconfig#module) to your tsconfig.json. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. -
sindresorhus revised this gist
May 5, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -23,7 +23,7 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Add `"type": "module"` to your package.json. - Replace `"main": "index.js"` with `"exports": "./index.js"` in your package.json. - Update the `"engines"` field in package.json to Node.js 12: `"node": ">=12.17"`. - Remove `'use strict';` from all JavaScript files. - Replace all `require()`/`module.export` with `import`/`export`. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. -
sindresorhus revised this gist
Apr 22, 2021 . 1 changed file with 2 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -28,6 +28,7 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Replace all `require()`/`module.export` with `import`/`export`. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - If you have a TypeScript type definition, update it to use ESM imports/exports. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. ### How can I make my TypeScript project output ESM? @@ -36,6 +37,7 @@ You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-f - Update the `"engines"` field in package.json to Node.js 12: `"node": ">=12"`. - Add [`"module": "ES2020"`](https://www.typescriptlang.org/tsconfig#module) to your tsconfig.json. - Use only full relative file paths for imports: `import x from '.';` → `import x from './index.js';`. - Optional but recommended, use the [`node:` protocol](https://nodejs.org/api/esm.html#esm_node_imports) for imports. - **You must use a `.js` extension in relative imports even though you're importing `.ts` files.** If you use `ts-node`, follow [this guide](https://github.com/TypeStrong/ts-node/issues/1007). -
sindresorhus revised this gist
Apr 19, 2021 . 1 changed file with 3 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -15,7 +15,7 @@ ESM is natively supported by Node.js 12 and later. You can read more about my [ESM plans](https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77). **My repos are not the place to ask ESM/TypeScript/Webpack/Jest/ts-node/CRA support questions.** ## FAQ @@ -69,3 +69,5 @@ const importFresh = async modulePath => import(`${modulePath}?x=${new Date()}`); const chalk = (await importFresh('chalk')).default; ``` *Note: This will cause memory leaks, so only use it for testing, not in production. Also, it will only reload the imported, not its dependencies.*
NewerOlder