Skip to content

Commit 4902981

Browse files
youta1119skipjack
authored andcommitted
docs(config): fix typescript setup in configuration-languages (#1734)
Resolves #1735
1 parent 8b5fd79 commit 4902981

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

src/content/configuration/configuration-languages.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ contributors:
77
- tarang9211
88
- simon04
99
- peterblazejewicz
10+
- youta1119
1011
---
1112

1213
webpack accepts configuration files written in multiple programming and data languages. The list of supported file extensions can be found at the [node-interpret](https://github.com/js-cli/js-interpret) package. Using [node-interpret](https://github.com/js-cli/js-interpret), webpack can handle many different types of configuration files.
@@ -39,6 +40,48 @@ const config: webpack.Configuration = {
3940
export default config;
4041
```
4142

43+
Not that you'll also need to check your `tsconfig.json` file. If the module in `compilerOptions` in `tsconfig.json` is `commonjs`, the setting is complete, else webpack will fail with an error. This occurs because `ts-node` does not support any module syntax other than `commonjs`.
44+
45+
There are two solutions to this issue:
46+
47+
- Modify `tsconfig.json`.
48+
- Install `tsconfig-paths`.
49+
50+
The __first option__ is to open your `tsconfig.json` file and look for `compilerOptions`. Set `target` to `"ES5"` and `module` to `"CommonJS"` (or completely remove the `module` option).
51+
52+
The __second option__ is to install the `tsconfig-paths` package:
53+
54+
``` bash
55+
npm install --save-dev tsconfig-paths
56+
```
57+
58+
And create a separate TypeScript configuration specifically for your webpack configs:
59+
60+
__tsconfig-for-webpack-config.json__
61+
62+
``` json
63+
{
64+
"compilerOptions": {
65+
"module": "commonjs",
66+
"target": "es5"
67+
}
68+
}
69+
```
70+
71+
T> `ts-node` can resolve a `tsconfig.json` file using the environment variable provided by `tsconfig-path`.
72+
73+
Then set the environment variable `process.env.TS_NODE_PROJECT` provided by `tsconfig-path` like so:
74+
75+
__package.json__
76+
77+
```json
78+
{
79+
"scripts": {
80+
"build": "TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
81+
}
82+
}
83+
```
84+
4285

4386
## CoffeeScript
4487

0 commit comments

Comments
 (0)