Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeScript project with references

I use project references to reference "shared" project from "front" and "back" ones.

tsc -v: Version 3.3.3

Project structure:

./{MY_PROJECT}.code-workspace   /* the only file in this level */
./back
./back/tsconfig.json
./shared/src/
./shared/
./shared/tsconfig.json
./shared/src/
./front
./front/tsconfig.json
./front/src

I am tring to import a module to ./front/src/article-view-model.ts from the shared project:

import Article from "@shared/src/article";            // alias path
import Article from "../../shared/src/article"; // full relative path
export default class ArticleViewModel {
}

The following errors are shown immediately in VS Code GUI:

For alias path:

Cannot find module '@shared/src/article'. ts(2307)

For full relative path:

Output file '../../shared/src/article' has not been built from source file 'c:/{SOMEWHERE_IN_MY_PC}/shared/src/article.ts'. ts(6305)

Intellisense (VS Code) does work for both alias and relative options:

Intellisense

If i try ignore the errors and build, it fails with that:

C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:1296 throw e; ^

Error: Debug Failure. False expression. at mergeSymbol (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:25861:26) at C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:25960:47 at Map.forEach () at mergeSymbolTable (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:25958:20) at initializeTypeChecker (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:48653:21) at Object.createTypeChecker (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:25711:9) at getDiagnosticsProducingTypeChecker (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:71398:93) at Object.getGlobalDiagnostics (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:71755:72) at Object.getGlobalDiagnostics (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:73528:86) at buildSingleProject (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\typescript\lib\tsc.js:75803:127)

./front/tsconfig.json contents:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "module": "amd",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "out": "./lib/front-bundle.js",
        "paths": {"@shared/*" : ["../shared/*"]},
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ],
    "references": [
        {
            "path": "../shared"
        }
    ]
}

./shared/tsconfig.json contents:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "declaration": true,
        "module": "amd",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "out": "./lib/shared-bundle.js",
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ]
}
like image 425
Dorad Avatar asked Mar 12 '19 06:03

Dorad


People also ask

What are project references?

A project reference is a link from the current Studio project to another project. The reference makes certain resources in the referenced project become available for use in the current project.

How do you reference a project in Visual Studio?

A reference is essentially an entry in a project file that contains the information that Visual Studio needs to locate the component or the service. To add a reference, right-click on the References or Dependencies node in Solution Explorer and choose Add Project Reference.


4 Answers

Found this when searching for "typescript references has not been built from source file". My mistake was that I was running tsc -p tsconfig.json when I should've been using the --build flag: tsc --build tsconfig.json. If you run with -p TypeScript will not build the referenced projects. Only if you run with --build.

like image 134
epsilon Avatar answered Oct 18 '22 16:10

epsilon


I solved it little after my last activity here, but i wasn't 100% sure if that happened due to the following changes. I am posting it here anyway, as there are still new views and votes, so it may be valuable for others:

That was the change:

In ./shared/tsconfig.json contents

I added

{
   "outDir": "./lib/",
   ...
   "rootDir": "./src",
}

to give:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "declaration": true,
        "module": "amd",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "outDir": "./lib/", <-------------
        "preserveConstEnums": true,
        "removeComments": true,
        "rootDir": "./src", <-------------
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ]
}
like image 38
Dorad Avatar answered Oct 18 '22 16:10

Dorad


I arrived here trying to solve a "has not been built from source file" error. Turned out a tsc watch process hadn't properly exited, so I had two instances fighting over the files. Just in case anyone else runs into the same issue 😀

like image 38
JaffaTheCake Avatar answered Oct 18 '22 17:10

JaffaTheCake


I'm able to reproduce the errors you get if I have an errant tsconfig.json in the directory that contains front, back and shared. In this case running tsc -b will pick up the errant tsconfig.json in the current directory and since it is not configured with the right paths or anything else, the compilation fails with the same errors you get.

Otherwise, if I use your files and issue tsc -b front instead of tsc -b, it compiles without error.

The reason VSCode does not run into trouble is that in order to provide completion, TypeScript editors (normally) use a tool provided by TypeScript called tsserver. And when an editor gives a file path to tsserver, tsserver gets a relevant tsconfig.json by looking in the directory that contains the source file, and then up into the parent directory, and so on, until it finds a tsconfig.json file. So when VSCode works on front/src/foo.ts and asks tsserver to provide completion, tsserver looks in front/src which has no matching file, and then front, and finds the tsconfig.json there.

like image 36
Louis Avatar answered Oct 18 '22 15:10

Louis