Skip to content

Commit 7eab49f

Browse files
sambachasambacha
authored
feat(esm): add verbatimModuleSyntax
1 parent 1fbb1da commit 7eab49f

File tree

1 file changed

+102
-48
lines changed

1 file changed

+102
-48
lines changed

‎README.md‎

Lines changed: 102 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,61 @@
11
# `std.module.format`
22

3-
> version 0.2.0:2023.01.15
4-
5-
- [`std.module.format`](#-stdmoduleformat-)
6-
* [`package.json` TLDR](#-packagejson--tldr)
7-
* [Problematic Settings](#problematic-settings)
8-
+ [Dont use `browser` field](#dont-use--browser--field)
9-
+ [dont use `preserveModules`](#dont-use--preservemodules-)
10-
+ [`moduleResolution` `NodeNext` only allows defined import paths](#-moduleresolution---nodenext--only-allows-defined-import-paths)
11-
- [correct manifest](#correct-manifest)
12-
* [`load-esm.{ts,mts}`](#-load-esm-ts-mts--)
13-
* [Motivation](#motivation)
14-
+ [Opt in compiler options](#opt-in-compiler-options)
15-
+ [Solution](#solution)
16-
- [Other Compiler Options Affecting the Build Result](#other-compiler-options-affecting-the-build-result)
17-
- [Suggested `tsconfig` values](#suggested--tsconfig--values)
18-
* [Side by Side Compare](#side-by-side-compare)
19-
+ [node:assert](#node-assert)
20-
- [Modern](#modern)
21-
- [Legacy](#legacy)
22-
* [TLDR](#tldr)
23-
+ [Cheatsheet](#cheatsheet)
24-
* [Avoid Default Exports and Prefer Named Exports](#avoid-default-exports-and-prefer-named-exports)
25-
+ [Context](#context)
26-
+ [Summary](#summary)
27-
* [Decision](#decision)
28-
+ [ECMAScript Module Support in Node.js](#ecmascript-module-support-in-nodejs)
29-
+ [`.mjs`, `.cjs`, == `.mts`, `.cts` && `.d.mts` and `.d.cts`.](#-mjs----cjs-------mts----cts------dmts--and--dcts-)
30-
* [Avoid Export Default](#avoid-export-default)
31-
+ [Poor Discoverability](#poor-discoverability)
32-
+ [Autocomplete](#autocomplete)
33-
+ [CommonJS interop](#commonjs-interop)
34-
+ [Typo Protection](#typo-protection)
35-
+ [TypeScript auto-import](#typescript-auto-import)
36-
+ [Re-exporting](#re-exporting)
37-
+ [Dynamic Imports](#dynamic-imports)
38-
+ [ES Module Interop](#es-module-interop)
39-
* [Note](#note)
40-
+ [Needs two lines for non-class / non-function](#needs-two-lines-for-non-class---non-function)
41-
+ [React.js - Named Exports](#reactjs---named-exports)
42-
* [{} type](#---type)
43-
+ [If you want a type that means "empty object"](#if-you-want-a-type-that-means--empty-object-)
44-
+ [If you are using React, and you want to define `type Props = {}`.](#if-you-are-using-react--and-you-want-to-define--type-props------)
45-
+ [`GenericObject`](#-genericobject-)
46-
+ [Module-related host hooks](#module-related-host-hooks)
47-
* [Customizing module resolution](#customizing-module-resolution)
48-
+ [parserOptions.moduleResolver](#parseroptionsmoduleresolver)
49-
* [License](#license)
50-
3+
> version 0.3.0:2024.07.22
4+
5+
<!-- TOC start -->
6+
7+
- [`std.module.format` ](#stdmoduleformat)
8+
+ [ES6 exports / imports cheat sheet](#es6-exports-imports-cheat-sheet)
9+
* [`package.json` TLDR](#packagejson-tldr)
10+
* [Problematic Settings](#problematic-settings)
11+
+ [Dont use `browser` field](#dont-use-browser-field)
12+
+ [dont use `preserveModules` ](#dont-use-preservemodules)
13+
+ [`moduleResolution` `NodeNext` only allows defined import paths ](#moduleresolution-nodenext-only-allows-defined-import-paths)
14+
- [correct manifest](#correct-manifest)
15+
* [`load-esm.{ts,mts}`](#load-esmtsmts)
16+
* [Motivation](#motivation)
17+
+ [Opt in compiler options](#opt-in-compiler-options)
18+
+ [Solution](#solution)
19+
- [Other Compiler Options Affecting the Build Result](#other-compiler-options-affecting-the-build-result)
20+
- [Suggested `tsconfig` values](#suggested-tsconfig-values)
21+
* [Side by Side Compare](#side-by-side-compare)
22+
+ [node:assert](#nodeassert)
23+
- [Modern](#modern)
24+
- [Legacy](#legacy)
25+
* [TLDR](#tldr)
26+
+ [Cheatsheet](#cheatsheet)
27+
* [Avoid Default Exports and Prefer Named Exports](#avoid-default-exports-and-prefer-named-exports)
28+
+ [Context](#context)
29+
+ [Summary](#summary)
30+
* [Decision](#decision)
31+
+ [ECMAScript Module Support in Node.js](#ecmascript-module-support-in-nodejs)
32+
+ [`.mjs`, `.cjs`, == `.mts`, `.cts` && `.d.mts` and `.d.cts`.](#mjs-cjs-mts-cts-dmts-and-dcts)
33+
* [Avoid Export Default](#avoid-export-default)
34+
+ [Poor Discoverability](#poor-discoverability)
35+
+ [Autocomplete](#autocomplete)
36+
+ [CommonJS interop](#commonjs-interop)
37+
+ [Typo Protection](#typo-protection)
38+
+ [TypeScript auto-import](#typescript-auto-import)
39+
+ [Re-exporting](#re-exporting)
40+
+ [Dynamic Imports](#dynamic-imports)
41+
+ [ES Module Interop](#es-module-interop)
42+
* [Note](#note)
43+
+ [Needs two lines for non-class / non-function](#needs-two-lines-for-non-class-non-function)
44+
+ [React.js - Named Exports](#reactjs-named-exports)
45+
* [{} type](#-type)
46+
+ [If you want a type that means "empty object"](#if-you-want-a-type-that-means-empty-object)
47+
+ [If you are using React, and you want to define `type Props = {}`.](#if-you-are-using-react-and-you-want-to-define-type-props-)
48+
+ [`GenericObject`](#genericobject)
49+
+ [Module-related host hooks](#module-related-host-hooks)
50+
* [Customizing module resolution](#customizing-module-resolution)
51+
+ [parserOptions.moduleResolver](#parseroptionsmoduleresolver)
52+
* [Fixing ES6 Import Syntax with `verbatimModuleSyntax` ](#fixing-es6-import-syntax-with-verbatimmodulesyntax)
53+
+ [Use require() instead of import](#use-require-instead-of-import)
54+
+ [Disable verbatimModuleSyntax](#disable-verbatimmodulesyntax)
55+
+ [Use a compatibility layer](#use-a-compatibility-layer)
56+
* [License](#license)
57+
58+
<!-- TOC end -->
5159

5260

5361
### ES6 exports / imports cheat sheet
@@ -1001,6 +1009,52 @@ Refer to the TypeScript Wiki for an example on how to write the `resolveModuleNa
10011009
10021010
Note that if you pass custom programs via `options.program`s this option will not have any effect over them (you can simply add the custom resolution on them directly).
10031011
1012+
## Fixing ES6 Import Syntax with `verbatimModuleSyntax`
1013+
1014+
In your code, you're using ES6 import syntax (
1015+
1016+
```typescript
1017+
import { hash } from "@stablelib/sha256")
1018+
```
1019+
This is not compatible with CommonJS modules when `verbatimModuleSyntax is enabled.
1020+
1021+
To fix this issue, you have a few options:
1022+
1023+
### Use require() instead of import
1024+
1025+
Replace the import statement with a require statement, like this:
1026+
1027+
```typescript
1028+
const { hash } = require("@stablelib/sha256");
1029+
```
1030+
This will use the CommonJS module system, which is compatible with the verbatimModuleSyntax setting.
1031+
1032+
### Disable verbatimModuleSyntax
1033+
1034+
If you're using a configuration file (e.g., tsconfig.json) or a build tool (e.g., Webpack), you can disable verbatimModuleSyntax to allow ES6 import syntax. For example, in tsconfig.json, you can add the following setting:
1035+
1036+
```jsonc
1037+
{
1038+
"compilerOptions": {
1039+
// ... other options ...
1040+
"verbatimModuleSyntax": false
1041+
}
1042+
}
1043+
```
1044+
This will allow you to use ES6 import syntax without issues.
1045+
1046+
### Use a compatibility layer
1047+
1048+
If you're using a library that only provides ES6 modules, you can use a compatibility layer like esm to convert the ES6 module to a CommonJS module. For example:
1049+
1050+
```typescript
1051+
const esm = require("esm");
1052+
const { hash } = esm("@stablelib/sha256");
1053+
```
1054+
This will allow you to use the ES6 module with your CommonJS code.
1055+
1056+
Choose the option that best fits your project's requirements, and let me know if you have any further questions!
1057+
10041058
## License
10051059
10061060
CC-SA-2.5

0 commit comments

Comments
 (0)