I've got a monorepo project structured in the following way
/web
/native
/tsconfig.json
tsconfig.json
My /native/tsconfig.json looks like this
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"jsx": "react-native"
}
}
But for some reason my .tsx files with some jsx in them return following error
[ts] Cannot use JSX unless the '--jsx' flag is provided. [17004]
When I typecheck using cli tsc, I don't get these errors.
You need to specify the folder like this in your tsconfig.
"include": [
"./src/ts/**/*" //Path to your source
],
"jsx": "preserve",
Typescript version in VsCode workspace and package.json are not equal.
To solve this problem in Vscode,
Open the tsx file. In right bottom corner you will find
2 click this button and choose change VS Code to use the workspace's version of Typescript.
The errors will disappear.
Related
I import the style file in my project like this:
import styles from '#src/styles.scss';
The tsconfig.json file contains:
{
"compilerOptions": {
"module": "CommonJS",
"target": "ES5",
"jsx": "react",
"baseUrl": "./",
"paths": {
"#src/*": ["src/*"]
}
},
"include": ["src"],
"exclude": ["node_modules"],
"compileOnSave": false
}
But my Visual Studio Code is throwing error Cannot find module "#src/styles.scss". Although the assembly of the project occurs without errors. The styles.scss file does exist and is located in the src folder.
In the project I use webpack 5 and I have already specified aliases in its config.
Can you please tell me how to solve this visual problem?
Following our chat, I think that the reason IntelliSense is not working is that typescript paths look for .js(x)/.ts(x) extensions (which is not the case of .scss). The reason it works at build time is that webpack is taking care of it.
I recommend using a solution like module-alias to get rid of this warning on VSCode.
After a few days of searching for a solution, I still found it! The whole problem is that typescript only accepts files with .js(x)/.ts(x) extensions as modules.
Therefore, we need to manually specify that files with the .scss extension are also modules.
Create a typings folder in the root of the project. In this folder, create a declarations.d.ts file with the contents:
declare module '*.scss' {
const content: Record<string, string>;
export default content;
}
Now in the tsconfig.json file, add the typings folder:
{
...
"include": ["typings", "src"],
}
I hope my answer saves someone time!
I'm writing my first JavaScript library and I'm testing it locally with a React project. I'm not seeing any Typescript errors when I'm writing my code but when I run yarn start for the React project that it linked to I'm getting the following error:
ERROR in ../test-lib/src/add.ts 3:29
Module parse failed: Unexpected token (3:29)
File was processed with these loaders:
* ./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| __webpack_require__.$Refresh$.runtime = require('/home/aaron/projects/react-projects/test-app/node_modules/react-refresh/runtime.js');
|
> export default function add(a: number, b: number) {
| return a + b
| }
I edited this question to simplify the problem after I did some research - which is it looks like I need to compile the typescript code in my library and export it to a dist folder? Then the React app that depends on it can use it.
I'm seeing articles about Babel and ones about Rollup and I'm confused about which I need (or both?) and why. Lots of outdated and incomplete/lazy tutorial articles that don't seem to help.
Can you help me set up what I need to get this to work? Here is the current file structure of my test library, test-lib:
node_modules/
src/
add.ts
index.js
package.json
tsconfig.ts
yarn.lock
Here are the contents of the pertinent files:
src/add.ts:
export default function add(a: number, b: number) {
return a + b
}
src/index.js:
import add from './add'
export default add
package.json:
{
"name": "test-lib",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
tsconfig.json:
{
"include": ["src/**/*"],
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
I'm aware I'll have to install #babel/... packages and the plugin for #babel/preset-typescript but I've left this out in the example because I wanted a freshly untouched typescript library for simplicity's sake. Help me start from scratch here.
I have additional questions as well:
Can I have all my files in *.ts format or does the entry point need to be a javascript file? (I'm assuming any *.config.* files probably need to be *.js as you need to start with javascript first so you can set up typescript for the rest of the project, right?
I've heard that I should compile my code for commonjs as well as esnext. Does my choice affect the needed libraries or steps to run their React app by the user that depends on my library?
The library I'm writing depends on React but it won't have any jsx/tsx files. It will have some custom React hooks though. Do I need to include the #babel/preset-react plugin as well?
Rollup or Webpack are module bundler and they handle files bundling only.
To transpile Javascript latest code to browser compatible code, we need transpilers like babel. There are plugins available for Rollup and Webpack to handle this transpiling of code, Babel is such a plugin.
So Babel and Rollup are different tools, we can use Babel inside Rollup for transpiling of Javascript.
Let's take Webpack as bundler for your questions
What about typescript ?
We need some plugin to convert it into js, there are plugins like ts-loader for Webpack
What about entry point ?
You can use ts or js, it does not matter as module bundler will assign each file to it's corresponding plugin to handle based on the Webpack configuration during bundling.
Can I have all my files in *.ts format or does the entry point need to be a javascript file?...
Yes, you can have all files in .ts. You may need .tsx if you have jsx code.
I've heard that I should compile my code for commonjs as well as esnext...
Yes, it will affect the user as their browser can be old and will not support latest code.
The library I'm writing depends on React but it won't have any jsx/tsx files...
Do you have jsx code?, if yes then you will need this.
Note: If your full code is in typescript, you do not need babel, you can simply use ts-loader following below link.
You may want to follow this simple Webpack config for typescript - https://webpack.js.org/guides/typescript/
my VSCode auto import(using control + space) is not working after I created a jsconfig.json file in my NextJS project.
This is my json:
{
"compilerOptions": {
"baseUrl": "."
},
"include": ["."]
}
I'm using next 10.2.3 and vscode 1.57.1. If I remove the jsconfig.json file, auto import works just fine..
Someone knows why?
I think you need to add extensions as well.
Here's how my app is using it, and I'm getting auto import suggestions correctly.
"baseUrl": ".",
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
Sometimes when auto import stops working, I do command palette -> reload project and it'll be fixed. Note that "reload project" is not "reload window", it's much faster.
I had the same problem after an update from vscode to version 1.57, I believe it's a problem in the version, because when I change it to 1.56 it works normally.
In case you trying to auto import .js files , you need to add this : "**/*.js" to the include array inside tsconfig.json file
I am playing with the graphing library C3 in an Ionic2/Angular2 typescript project. I have installed C3 via npm, and the type definitions via tsd.
I have imported when into my own ts file as follows..
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
import * as C3 from 'c3';
import * as D3 from 'd3';
#Component({
templateUrl: 'build/pages/graphs-page/graphs-page.html'
....
})
All appears fine. I can see the typings for the C3 (and dependant D3), and also when I run everything seems to work.
However, when the application builds (when I run ionic serve), I always get the following typescript compile errors...
TypeScript error: D:/dev/ionic2/testcomonents/app/pages/graphs-page/graphs-page.ts(3,21): Error TS2307: Cannot find module 'c3'.
TypeScript error: D:/dev/ionic2/testcomonents/app/pages/graphs-page/graphs-page.ts(4,21): Error TS2307: Cannot find module 'd3'.
Does anyone have any ideas why I am getting these errors at build time, when I get no errors in the IDE (I am using vscode), and everything seems to work fine?
[EDIT]
I have since installed typescipt 2 and run with the --traceResolution flag. I can see that tsc only seems to look under various levels of node_modules and never looks under typings folder, which is where vscode is looking.
More confusing (to me) is how the c3.js source is included, when this is located under the node_modules/c3 folder. I have not specifically added any reference to c3.js, yet the graphs show up.
The settings in the tsconfig.json are
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"filesGlob": [
"**/*.ts",
"!node_modules/**/*"
],
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
I have tried various edits in the above tsconfig.json but cannot get it to look in the typings folder.
So my questions now become
How to make Typscript look in the typings folder
How does the the actual c3.js file located at node_modules\c3\c3.js get included in the Ionic bundle (since I have not added a reference to it anywhere)
I think I now know the answer to this, but if I am incorrect, please correct me!
looking in the Ionic file D:\dev\ionic2\testcomponents\node_modules\ionic-gulp-browserify-typescript\index.js, there is the following src property
var defaultOptions = {
watch: false,
src: ['./app/app.ts', './typings/main.d.ts'],
so If I add the following to main.d.ts
/// <reference path="globals/c3/index.d.ts" />
/// <reference path="globals/d3/index.d.ts" />
the errors go away.
If I run tsc --traceResolution I still see errors, but my guess here is that running tsc from the command line does not include looking at the above Ionic script or main.d.ts.
To get rid of the error when using tsc --traceResolution, I tried added the following to the file D:\dev\ionic2\testcomponents\node_modules\c3\package.json
"typings": "../../typings/globals/c3/index.d.ts",
and then do the same thing for d3. But this then causes the following error when I run the Ionic build
TypeScript error: d:/dev/ionic2/testcomponents/app/pages/graphs-page/graphs-page.ts(3,21): Error TS2656: Exported external package
typings file 'd:/dev/ionic2/testcomponents/typings/globals/c3/index.d.ts' is not a module. Please contact the package author to update the package definition.
So, I think in the Ionic context, the correct thing to do is add the /// paths to the main.d.ts file.
The other question I had, ie how is the c3.js etc file included, this is all part of the Browserfity / gulp build, and this examines everything under the nodes_modules folder. They all have the packeage.json file, and, in the case of c3, we have the line "main": "c3.js".
So most examples I found on importing jspm packages to typescript assumed that I wanted to use Systemjs to load and interpret them in the browser. However, I would rather like to use tsc to build commonjs modules and only import the js code, since it seems to me to be the more general and error-resistent approach to me.
So my directory structure looks like this:
src/index.ts
jspm_packages/...
config.js
tsconfig.json
With tsconfig having the following content:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noEmitOnError": true,
"noImplicitAny": false,
"rootDir": "src",
"outDir": "target/app",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": true
},
"exclude": [
"jspm_packages",
"node_modules",
"typings",
"target"
]
}
For testing purposes, I installed angular 2 with jspm install npm:angular2 and tried to import it in my index.ts via import { bootstrap } from 'angular2/platform/browser';
When running tsc, I get the error
src/index.ts(1,27): error TS2307: Cannot find module 'angular2/platform/browser'.
Now I wonder, can I make jspm-packages known to typescript? I feel like I tried it all, removing the jspm_packages from the tsconfig exclude list, switching to node module resolution or systemjs module generation. Maybe I just haven't found the right combination. Any hints on what to try next?
I am also struggling with this same issue and after some research, I learned that there no good solutions to allow this as of yet.
Workarounds:
A) You can duplicate your dependencies and install it with npm. tsc should not throw any errors since its resolving from npm.
B) Change your tsconfig.json and map angular to the jspm path. For example
"baseUrl": ".",
"paths": {
"angular2/*": [
"jspm_packages/npm/angular2#2.0.0-beta.7/*"
],
"rxjs/*": [
"jspm_packages/npm/rxjs#5.0.0-beta.2/*"
]
}
See https://github.com/frankwallis/plugin-typescript/tree/master/examples/angular2 for a full example.
Note that "baseUrl" and "paths" are not official properties and only on the beta version of typescript compiler.
The issue is currently being tracked here:
https://github.com/Microsoft/TypeScript/issues/6012