Resource file missing in TypeScript package - json

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?

Related

Syntax Error: error while parsing tsconfig.json - trying to build Vue app on Linux VPS

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.

Is there any way for typescript test files to import typescript source files when they have separate tsconfigs?

Sorry about the vague title here, it's one of those problems where I don't know what I don't know. Let me describe my directory structure:
root
src
tsconfig.json
test
tsconfig.json
tsconfig.json
This is some legacy code. Normally I like to set up my project so that test files and source files are in the same directories, but that would be a massive change, so I'm trying to figure out how to get it to work the way it's already structured.
Basically, I want to be able to do this in a test file:
// current file: test/downloader_test.ts
// downloader file: src/downloader.ts
import { Downloader } from "./downloader";
...
I can do this when source and test files are in the same directory, but in this case, they are in separate directories so I get an error on the import line about how "./downloader" doesn't exist.
There is a workaround that's already being used: instead, I could import from ../lib/downloader, and it works, but I'd like to be able to refer to the typescript files. Is there any way for test files to import typescript source files when they are under separate tsconfig.json files?
I figure if a solution exists it's probably a tsconfig setting. These are what mine currently look like:
root/tsconfig.json:
{
"compilerOptions": {
"rootDir": ".",
},
"files": [],
"references": [
{
"path": "./src"
},
{
"path": "./test"
},
]
}
root/src/tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"outDir": "../lib",
"noImplicitReturns": true,
"noUnusedLocals": true,
"sourceMap": true,
"strict": true,
"lib": ["es2020", "dom"],
"target": "es2019",
"composite": true,
"allowSyntheticDefaultImports": true
},
"compileOnSave": true,
"types": ["node"],
"include": ["**/*.ts"]
}
root/test/tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"outDir": "../libtest",
"strict": false,
"composite": true,
"sourceMap": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"include": [
"**/*.ts"
]
}
I've also tried modifying that last file to add a
"references": [
{
"path": "../src"
}
]
but that didn't change anything for me.
You can use one config file in root folder only, and in include, you can add
"include": [
"src/**/*" // According to your structure
]
other things in config file set according to your requirement and change the path.
import { Downloader } from "../src/downloader”;

typescript tsconfig allows .json import, built files (.js) do not. What gives?

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.

How can I configure tsc to compile test specs from a specific folder?

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

Webclipse errors loading typescript files

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.