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?

Pang · Accepted Answer · 2022-08-22 08:50:38Z

141

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, 2022 at 8:50

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Nov 19, 2019 at 19:46

Luke W

9,1445 gold badges47 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

s.meijer Over a year ago

It works! But why? Why does resolveJsonModule make tsc output to /dist/src instead of /dist ? It doesn't make any sense.

Inigo Over a year ago

@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 stackoverflow.com/a/61467483/8910547 for more info and links to what Typescript's bossman says about it.

y_nk Over a year ago

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

Pavel Staselun Over a year ago

In my case it was "include": ["**/*.ts"] -> "include": ["src/**/*.ts"] in the tsconfig.json.

okcoker Over a year ago

You might also be able to solve your problem by using the require syntax over import. In my case I was importing a service-account.json, and changing the import to require allowed my ts build to output correctly.

|

Morlo Mbakop · Accepted Answer · 2020-04-20 11:46:27Z

83

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, 2020 at 11:46

Morlo Mbakop

3,79623 silver badges23 bronze badges

3 Comments

Inigo Over a year ago

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 stackoverflow.com/a/61467483/8910547 for more info and links to what Typescript's bossman says about it.

Felipe Over a year ago

using rootDir solved the issue for me with a local .ts library I was importing

Jeremy Over a year ago

i get Inigos mentioned issue - fix on src not in dist anymore, but a compile issue :o(

rplaurindo · Accepted Answer · 2022-07-13 01:31:42Z

26

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, 2022 at 1:31

answered Apr 7, 2021 at 16:20

rplaurindo

1,44416 silver badges27 bronze badges

5 Comments

Jeremy Over a year ago

What does the -b flag do? Can't find docs --build and --baseUrl as in there, but no --b

rplaurindo Over a year ago

Sorry for late. The -b flag is a alias to --build flag.

Craig Wayne Over a year ago

Thanks for this! it works. You could also set the "composite": true option in tsconfig.json instead of using the -b command line flag.

rplaurindo Over a year ago

I didn't know that. I'll try it. Thanks. Just run the tsc command in this case?

rplaurindo Over a year ago

@CraigWayne sorry, but that doesn't work properly. The -b flag is necessary when we use line command.

Matt McCutchen · Accepted Answer · 2018-08-31 21:57:44Z

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, 2018 at 21:57

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

4 Comments

nfadili Over a year ago

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.

Matt McCutchen Over a year ago

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.

nfadili Over a year ago

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: github.com/Microsoft/TypeScript/issues/25216 and github.com/Microsoft/TypeScript/issues/24744 Thank you for your help Matt!

trusktr Over a year ago

This is not at all clear from the compiler-options page.

shA.t · Accepted Answer · 2025-04-30 13:19:41Z

5

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

edited Apr 30 at 13:19

shA.t

17k5 gold badges59 silver badges121 bronze badges

answered Mar 8, 2022 at 20:46

rotarydial

2,6112 gold badges27 silver badges33 bronze badges

Comments

Gilbert · Accepted Answer · 2022-01-17 09:12:56Z

1

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

answered Jan 17, 2022 at 9:12

Gilbert

3,42232 silver badges40 bronze badges

Comments

Soyal7 · Accepted Answer · 2022-05-23 17:48:23Z

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, 2022 at 17:48

Soyal7

4716 silver badges13 bronze badges

Comments

alencar jumbo · Accepted Answer · 2023-11-24 13:21:44Z

1

and also enable allowJs property, setting it to true. Then, all files others .js files is copied, replicating all structure of src dir to dist dir.

https://www.typescriptlang.org/tsconfig/#allowJs

answered Nov 24, 2023 at 13:21

alencar jumbo

111 bronze badge

Comments

David Beneš · Accepted Answer · 2023-02-09 20:05:54Z

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 9, 2023 at 20:05

David Beneš

3891 silver badge7 bronze badges

Comments

Kelvin Ben · Accepted Answer · 2024-02-20 17:43:58Z

0

I had the same problem recently. In the tsconfig.json file, you need to specify the output directory, for instance "outDir": "./dist",. The reason you have several folders in the dist folder is because you have two folders in the root which are compile and pasted in the dist folder. You can specify in the tsconfig.json "rootDir": "./src" thereafter only src folder will be considered.

edited Feb 20, 2024 at 17:43

answered Feb 20, 2024 at 17:42

Kelvin Ben

12 bronze badges

Comments

Rahul Kumar Maity · Accepted Answer · 2024-02-21 17:22:51Z

0

set the "outDir": "./dist", in tsconfig.json

answered Feb 21, 2024 at 17:22

Rahul Kumar Maity

12 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

akash maurya · Accepted Answer · 2021-03-31 18:14:07Z

-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, 2021 at 18:14

akash maurya

6669 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

12 Answers 12

6 Comments

3 Comments

5 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

6 Comments

3 Comments

5 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related