Maintain src/ folder structure when building to dist/ folder with TypeScript 3

Question

I have a TypeScript nodejs server with this structure:

tsconfig.json
package.json
src/
    middleware/
    utils/
    index.ts
dist/
    middleware/
    utils/
    index.js

When using TypeScript 2, I was able to transpile my project from the src/ to a dist/ folder and have a mirror image of my directory structure to work with.

With the release of TypeScript 3, they have introduced project references and changed the way code is transpiled into an output directory. Now tsc outputs to the dist/ folder in a nested way like this:

dist/
    src/
        middleware/
        utils/
        index.js

My tsconfig.json is:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "declaration": false,
    "outDir": "dist/",
    "lib": [
      "es7",
      "dom"
    ]
  },
  "include": [
    "src/"
  ]
}

How can I configure TypeScript to output my src/ folder as a mirror image into a dist/ folder?

score 112 · Accepted Answer · edited Aug 22 '22 at 08:50

112

I had a similar problem when initially converting to a TypeScript project. I also set resolveJsonModule: true and the src directory was copied to the output dist directory.

The underlying reason is that one of my source files required package.json at the root of the project. Once I removed that, tsc no longer added src to the dist directory.

In short, make sure you are not requiring files outside of your src directory.

Explanatory FAQ here: https://github.com/Microsoft/TypeScript/wiki/FAQ#why-does---outdir-moves-output-after-adding-a-new-file

edited Aug 22 '22 at 08:50

Pang

9,564
146
81
122

answered Nov 19 '19 at 19:46

Luke W

8,276
5
44
36

6

It works! But why? Why does `resolveJsonModule` make `tsc` output to `/dist/src` instead of `/dist` ? It doesn't make any sense. – s.meijer Apr 14 '20 at 11:34
9

@s.meijer because it enables the importing `package.json` (a "JsonModule"), and that forces `rootDir` to automatically get set to the directory that contains all the source (i.e. including `package.json`), and now the `src` dir is no longer the rootDir but a subdir, and so reflected in the output. See https://stackoverflow.com/a/61467483/8910547 for more info and links to what Typescript's bossman says about it. – Inigo Apr 29 '20 at 22:31
thanks for this. it also produces the same output when you want to have a structure such as ./src/ and ./typings but wish not to have ./src in your ./dist ... long story short, as long as you reference ./typings in ./src, it will be included and so ./src will be kept. T_T – y_nk Apr 11 '21 at 18:58
4

In my case it was `"include": ["**/*.ts"]` -> `"include": ["src/**/*.ts"]` in the `tsconfig.json`. – Pavel Staselun May 25 '21 at 11:31

score 67 · Answer 2 · answered Apr 20 '20 at 11:46

67

The structure of the output directory is controlled by the rootDir of the compilerOptions. See documentation here, setting it to ./src should solve the issue.

{
  "compilerOptions": {
    "rootDir": "src",
    ...
  },
  "include": [
    "src/"
  ]
}

answered Apr 20 '20 at 11:46

Morlo Mbakop

3,518
20
21

5

Actually it will just swap problems in this case. The OP is importing `package.json`, so if you change the `rootDir` to `src`, you'll get the right `outDir` structure, but a compilation error because you have source outside of `rootDir`. See https://stackoverflow.com/a/61467483/8910547 for more info and links to what Typescript's bossman says about it. – Inigo Apr 29 '20 at 22:34
using `rootDir` solved the issue for me with a local `.ts` library I was importing – Felipe Jun 05 '21 at 18:10
i get Inigos mentioned issue - fix on src not in dist anymore, but a compile issue :o( – Jeremy Mar 12 '22 at 17:59

score 24 · Answer 3 · answered Aug 31 '18 at 21:57

24

The upgrade from TypeScript 2 to 3 by itself shouldn't have changed the behavior; if we can confirm that it did, that may be a bug. In any case, check that the rootDir compiler option points to your src directory and not to the parent directory, because the structure under the rootDir is what is mirrored under the outDir.

answered Aug 31 '18 at 21:57

Matt McCutchen

28,856
2
68
75

I've added my tsconfig.json to help clarify. The project is configured around using the `"include"` key to specify the src/ directory. I just confirmed that the Typescript 2 compiler will simply mirror src/ into dist/ with this configuration, but the Typescript 3 compiler will automatically include the package.json and the src/ folder nested with dist/. Attempts to point `rootDir` at src/ fail because the package.json file isn't in there. – nfadili Sep 03 '18 at 19:05
I wasn't able to reproduce this behavior based on the information you've provided. If you can publish a repository that reproduces the problem, I will look. Otherwise, I can only suggest that you try deleting things from your project until the problem goes away and then you'll see what's causing it. – Matt McCutchen Sep 03 '18 at 23:48
11

I was able to determine the cause. It seems that adding the `resolveJsonModule: true` to my tsconfig.json was causing tsc to output the dist/ directory differently. I'm still not entirely clear on why it does that, but it does seem to be a talking point in a few Github issues: https://github.com/Microsoft/TypeScript/issues/25216 and https://github.com/Microsoft/TypeScript/issues/24744 Thank you for your help Matt! – nfadili Sep 04 '18 at 16:21
1

This is not at all clear from the [compiler-options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) page. – trusktr Feb 09 '20 at 04:43

rplaurindo · Answer 4 · 2022-07-13T01:31:42.133

18

In addition to specifying compilerOptions.outDir, specify compilerOptions.rootDir in tsconfig.json.

{
  "compilerOptions": {
     // ...
    "outDir": "dist",
    "rootDir": "./",
    // ...
  }
}

Then run: $ tsc -b inside the folder where the tsconfig.json file is.

Note: the compilerOptions.rootDir should be used when you wish include a structure of files of an non-nested folder in the folder of tsconfig.json file.

edited Jul 13 '22 at 01:31

answered Apr 07 '21 at 16:20

rplaurindo

1,277
14
23

What does the -b flag do? Can't find docs --build and --baseUrl as in there, but no --b – Jeremy May 02 '22 at 11:08
1

Sorry for late. The `-b` flag is a alias to [--build flag](https://tsplay.dev/tsc-build). – rplaurindo Jul 22 '22 at 17:53
Thanks for this! it works. You could also set the `"composite": true` option in tsconfig.json instead of using the `-b` command line flag. – Craig Wayne Oct 03 '22 at 09:58
I didn't know that. I'll try it. Thanks. Just run the `tsc` command in this case? – rplaurindo Oct 04 '22 at 15:07
1

@CraigWayne sorry, but that doesn't work properly. The `-b` flag is necessary when we use line command. – rplaurindo Oct 04 '22 at 17:18

score 5 · Answer 5 · answered Mar 08 '22 at 20:46

I've used a symlink to accomplish this. It neatly allows you to reference root-level files without referencing them directly. For example:

From /src, create a link to package.json:

ln -s ../package.json ./details.json

Refer to details.json in your TypeScript file:

import { version } from './details.json';

exports.handler = async function ( event: Event ) {
  console.log( `lambda version v${version}` );

Bask in the grandeur of dist's flattened file structure:

$ tsc

$ tree dist 
dist
├── index.d.ts
├── index.js
└── details.json

0 directories, 3 files

score 1 · Answer 6 · answered Jan 17 '22 at 09:12

If you're trying to compile a typescript file at /scr/mydir/hello.ts to /dist/mydir/hello.js but the file keeps getting created at /dist/hello.js, what you can do is to add another typescript file at /src/another.ts. That way the two compiled files will go to /src/another.js and /src/mydir/hello.js. Rememver, in your tsconfig.json, outDir must be set to ./dist

score 1 · Answer 7 · answered May 23 '22 at 17:48

1

In case you have multiple entries under the include option, make sure they are resolved.

"include": ["src", "tests"],

For example, if tests is not found, the src directory will not be present in the outDir.

answered May 23 '22 at 17:48

Soyal7

381
5
10

score 0 · Answer 8 · answered Feb 09 '23 at 20:05

0

I believe that including one more folder, such as spec with test files would resolve the issue as well. This does not respond the original question, but I found it interesting to mention in the context.

answered Feb 09 '23 at 20:05

David Beneš

389
1
7

score -2 · Answer 9 · answered Mar 31 '21 at 18:14

-2

you can change file import from src/entities/Post -> ../entities/Post in file in ./src

this changes the import in the dist folder.

answered Mar 31 '21 at 18:14

akash maurya

607
9
16

Maintain src/ folder structure when building to dist/ folder with TypeScript 3

9 Answers9

Linked