I have installed typescript using sudo npm install -g typescript, which seems to work because tsc -version returns Version 2.2.2. I also tried installing it locally as this stackoverflow post suggested. I believe that I have everything else installed correctly because the IDE opens other files correctly.
My OS is Ubuntu 16.0.
Error message:
java.lang.IllegalStateException: Node.js could not be found. If it is installed to a location not on the PATH, please specify the location in the TypeScript preferences.
The tsconfig.json is below. I believe that the value of typeRoots should point to the #types location. And indeed the same directory where the .json file resides, there is a node_modules/#types directory, which I would have thought should enable typescript.
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2016",
"dom"
]
}
}
The TypeScript preferences mentioned in the error message are in the Webclipse preferences.
Simply enter the path returned by which node in a shell.
Related
I am getting this error when trying to build my Vue app on my Linux VPS.
Syntax Error: Error: error while parsing tsconfig.json
The only thing I can see is a small red squiggle underneath the very first { of my tsconfig.json file.
However, when I run the build locally it completes without any errors even with the red squiggle in the tsconfig.
Incidentally, when I hover on the red squiggle it says:
No inputs were found in config file
Any suggestions I have found for this have related to adding at least one Typescript file at the same level as the tsconfig. I already have a main.ts so this does not solve the problem.
Here is the file itself.
{ // red squiggle line appears here
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": false,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"mocha",
"chai",
"vuetify"
],
"paths": {
"#/*": [
"./*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
The error itself doesn't help find what's causing the issue. The only other console output is the following eslint related suggestion.
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
I have tried adding both of these to the top of the tsconfig.json, but neither of them work and I get the exact same build error.
Any help is much appreciated.
after adding "resolveJsonModule": true to my project .tsconfig, I am able to directly import data from .json files. Project runs okay, even with nodemon.
But when then project is built, and all the files are compiled to a dist folder, running node dist/index.js now fails when it encounters the json import. The actual build command appears to be:
babel src --out-dir dist --extensions .js,.ts --source-maps
This is a server-side, non-webpack project.
tsconfig as requested:
{
"compilerOptions": {
"baseUrl": ".",
"typeRoots": ["./types"],
"target": "es6",
"module": "es6",
"declaration": true,
"outDir": "dist",
"strict": true ,
"noImplicitAny": true,
"strictNullChecks": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"resolveJsonModule": true
}
}
It seems json files are being compiled too.Try excluding them
{
"compilerOptions": {...},
"exclude": [
"foldercontainingjsonfiles/*.json"
]
}
Check that dist folder structure doesn't change after .json import. I had a similar problem when I imported a config.json which was outside src folder with *.ts files. Moving .json files inside src folder fixed the issue.
I'm implementing e2e tests into an Angular project. It wasn't started with #angular-cli, so I'm configuring most of it manually.
What I'm trying to do now is to define a script in package.json to transpile only the specs in tests/ folder to tests/compiled.
I tried to follow this question: tsconfig.json - Only build ts files from folder. It recommends to use --rootDir to define the folder.
But if I use this: tsc --rootDir tests --outDir ./tests/compiled, it compiles files from other folders anyways (like ./src). Also, it returns a lot of TS6059 errors, complaining that rootDir should contain all source files.
An example:
error TS6059: File 'C:/Users/Betalabs/Documents/Projetos/Engine-Frontend/src/vendor.browser.ts' is not under 'rootDir' 'tests'. 'rootDir' is expected to contain all source files.
The file hierarchy is this. Please note that the test specs (*.spec.ts) I want to transpile are in the tests/ folder.
(root)
-- src/
-- tests/
-- compiled/
-- (transpiled test files, ".js")
-- helpers/
-- (helper modules, ".ts")
-- page-objects/
-- (page objects, ".ts")
-- forms.spec.ts
-- filters.spec.ts
-- .gitignore
-- .tern-project
-- buildspec.yml
-- conf.js
-- package-lock.json
-- package.json
-- README.md
-- tsconfig.json
-- tsconfig.webpack.json
-- tslint.json
-- typedoc.json
-- webpack.config.js
This is my tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmitHelpers": true,
"importHelpers": true,
"strictNullChecks": false,
"baseUrl": "./src",
"paths": {
"#angular/*": ["node_modules/#angular/*"]
},
"lib": [
"dom",
"es6",
"es2017.object"
],
"typeRoots": [
"node_modules/#types"
],
"types": [
"jasmine",
"hammerjs",
"node",
"source-map",
"uglify-js",
"webpack"
]
},
"exclude": [
"node_modules",
"dist"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": { "rewriteTsconfig": false }
}
I'm "solving" this by compiling all files anyways and removing the unnecessary ones manually. In other words: a complete mess :P
Could you help me with this?
In order to compile those files, you can use
"include": ["tests"]
in your tsconfig
That being said, I think it'd be much more easier to convert the project to use ng cli :)
Good luck
I have a Lerna project containing two Typescript packages A and B. The tsconfig.json for both packages is:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"esModuleInterop": true,
"noImplicitAny": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"allowJs": false,
"resolveJsonModule": true,
"declaration": true,
"moduleResolution": "node",
"lib": ["es2015", "dom"]
},
"include": [
"src",
"test"
],
"exclude": [
"node_modules/**",
"packages/*/node_modules/**",
"examples/*/node_modules/**",
"**/*.d.ts"
]
}
Package A contains the following code:
const data = require('./myData.json');
Package B depends on package A. Inside package B a call is made to a function exported by package A, and so the above code is loaded. However, I get Error: Cannot find module './myData.json' in this context. Now, looking inside compiler output directory for package A I do not see the JSON file. Indeed, looking inside package B's node_modules directory at package A I do not see the file there either.
Why might the JSON file missing from the published package? Is there anything special that needs to be done to include resource files (JSON, plaintext) in the Typescript package?
Using Typescript 2.9 I am able to successfully import the local package.json file and use the values. However I now have the issue where the package.json file is included in the compiled output, when I just want the resulting JS files to use the actual package.json.
My package has the following files:
src/
index.ts
package.json
tsconfig.json
My index.ts imports the package.json:
import pkg = require("../package.json");
My tsconfig.json looks like this:
{
"compilerOptions": {
"outDir": "./lib",
"module": "commonjs",
"resolveJsonModule": true,
"esModuleInterop": true
},
"include": [
"src/**/*"
]
}
Ideally the result would be:
lib/
index.js
package.json
However what I actually get is:
lib/
src/
index.js
package.json
package.json
🚩 This approach won't work for ESM targets. If you trying to create an ES6 Module, you'll have to use a different solution.
I am using TypeScript 3.5.1 and if I import the package.json with the require() function then it is not copied over to the compile output so the output looks like your ideal result.
My tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": ["es2015", "dom"],
"sourceMap": true,
"strict": true,
"moduleResolution": "node",
"downlevelIteration": true
"outDir": "./ts-out",
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": false
},
"include": [
"./src"
]
}
And I just import it like this:
const pkg = require('../package.json');
I have found this solution in Facebook's Jest framework source code (they are using Lerna + TypeScript): https://github.com/facebook/jest/blob/master/packages/jest-core/src/version.ts
You want a few somewhat contradictory things:
You want to import package.json, meaning you are treating it as source
But you don't want it to be compiled/emitted to the outDir as is done for source
You don't want the output path within outDir to include "src/", which is what happens when you make rootDir point to the project root rather than the src root, which is the only way you can get the import statement to work.
solution: use separate Typescript sub-projects
These contradictions won't be contradictions if you logically break your project into separate sub-projects. You will need Typescript 3's new Project References feature.
We'll treat the src directory and the root directory containing package.json as separate projects. Each will have its own tsconfig file:
Give the src dir its own project.
./src/tsconfig.json:
{
"compilerOptions": {
"rootDir": ".",
"outDir": "../lib/",
"resolveJsonModule": true
},
"references": [ // this is how we declare a dependency from
{ "path": "../" } // this project to the one at the root dir`
]
}
Give the root dir its own project.
./tsconfig.json:
{
"compilerOptions": {
"rootDir": ".",
"outDir": ".", // if out path for a file is same as its src path, nothing will be emitted
"resolveJsonModule": true,
"composite": true // required on the dependency project for references to work
},
"files": [ // by whitelisting the files to include, TS won't automatically
"package.json" // include all source below root, which is the default.
]
}
Because for the root sub-project's output is the self-same directory, and because the source path and output path for package.json end up the same, tsc won't do anything.... effectively a no-op.
run tsc --build src and voilà! The result will be:
lib/
index.js
package.json
when I just want the resulting JS files to use the actual package.json.
Your lib will always be a straight copy if the structure of your src files. If you include package.json into the TypeScript compilation context then it will change your lib to package.json + src.
How to import package.json into Typescript file without including it in the compiled output?
You can't if you import it.
Alternative
Have two projects, as mentioned by this answer: https://stackoverflow.com/a/61468012/390330
Specifying compilerOptions.moduleResolution, compilerOptions.resolveJsonModule and include like below.
{
"compilerOptions": {
// ...
"moduleResolution": "node",
"resolveJsonModule": true
// ...
},
"include": [
"./src",
"package.json"
]
}
Then run $ tsc -b inside the folder where the tsconfig.json file is, assuming that the package.json file is on the same path as tsconfig.json
set the rootDiroption inside your tsconfig as shown below
"compilerOptions": {
"rootDir": "./src"
}`