So I have a typescript project (.tsx) this is actually a SharePoint Framework project (SPFx) but decided to post it here since this involves typescript in general.
My main file is a .tsx, and I have a component that is created in .JS (.js file extension). I want to import this component to my project, however, I am faced with an issue
Module parse failed: Unexpected token (30:4)
File was processed with these loaders:
./node_modules/source-map-loader/index.js
You may need an additional loader to handle the result of these loaders.
How can I import or use a .js component in my .tsx react project without converting the .js to tsx?
based on the error, it seems I need additional loaders, what should I do? thank you!
Here's my tsconfig
Update your tsconfig.json file with
...
"compilerOptions": {
"allowJs": true
...
so you basically add a allowJs property to compilerOptions object in your tsconfig.json file.
Related
I'm using create-react-app to test a monorepo that i'm creating. Inside the monorepo I have some index.d.ts files to declare my packages however I do not wish to start using .ts files and would prefer to stick to .js files.
I am using the create-react-app as a means to test my packages before publishing them as well as ensuring that the Typescript declaration files are working correctly.
Within my create-react-app I am forced to use //#ts-check at the top of the App.js file before Typescript starts to check my work.
]2
I would like the ability to enable a //#ts-check globally for my create-react-app's as I plan on using it on all my future and passed projects and adding the //#ts-check at top of every .js file sounds extremely tedious.
I have tried using a tsconfig.json as shown in this answer however it did not work.
This picture below is showing the same App.js file without the //#ts-check and with tsconfig.json and as you can see it is no longer checking my file.
I'm fairly new to Typescript so could somebody please explain to me how I could enable //#ts-check globally on my create-react-app projects.
Thanks in advance!
Add a file at the root of your project with the filename:
jsconfig.json
Add the following to the contents of that file:
{
compilerOptions: {
"checkJs": true,
"jsx: "react"
}
}
Reference
I'm having trouble integrating this speech-to-text package into my Angular app. I've added the import statement:
import spoken from "../../../node_modules/spoken/build/spoken.js";
My project is able to find the spoken.js module but it tells me that "allows is not set".
If I set that value to true in my tsconfig.json file, I then get multiple .js related errors in other files, and I'm unable to build the project. Has anyone encountered something like
this before?
If you want to import the module at runtime but not check it with TypeScript, try removing the .js extension from the import path.
One way would also be to disable type checks for JS files via "checkJs": false in your tsconfig.json.
Or you could also include the file in scripts array in angular.json file and in your controller, just declare that variable:
declare const spoken: any;
(feel free to use something more specific instead of any :])
I have a tsconfig.json which specifies an outDir. The reason is that I want to separate the generated JavaScript output from the TypeScript sources.
So:
"compilerOptions": {
...
"outDir": "target/",
...
}
This works very well, until I compile the project with the typescript compiler only. All generated javascript output is created in the target/ directory.
But, if I call it with the angular compiler (ngc, it is essentially a wrapper around the tsc typescript compiler), we have an additional build step. It compiles the template files and components into typescript, which will be compiled further to javascript by the tsc.
These intermediary typescript files have the *.ngfactory.ts or *.ngsummary.json extension.
Now my problem is, that the ngc command generates these files still in my src/ directory, totally ignoring my outDir setting in my tsconfig.json.
What is the cause of this problem? Does any useful workaround exist?
Extension: regarding comments, ng from the angular-cli can do this. This leads to a side-question, how does it do with the ngc?
The cause of the problem was that ngc has some additional options in tsconfig.json what I didn't add.
The following settings in tsconfig.json do what I want.
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
I have added a jsconfig.json in the root of my javascript project to try and exclude some build files as well as set some path mappings but nothing seems to happen. Part of the problem is that I'm not sure what the expected outcome is when using a jsconfig.json, I've read the documentation for it but it does not demonstrate any of the results.
Can someone provide me with a small and working jsconfig.json with a description of what it actually does? So that I can use it to verify that it actually works in my project as well.
Or, does someone know of a way to verify that a jsconfig.json is working/picked up by VS Code?
In my project i was using jsconfig.json file for accesss the file imports directly from the ./src directory from wherever i am trying to import.
My jsconfig.json looks like:
{
"compilerOptions": {
"baseUrl": "./src"
},
"include": [
"src"
]
}
include:
If no include attribute is present, then this defaults to including all files in the containing directory and subdirectories. When a include attribute is specified, only those files are included
baseUrl:
This gives the base directory for the file import path
this is my project structure where i have used jsconfig.json
so if i need to import a function from src/util/auth_util.js inside src/component/Login/index.js
inside src/component/Login/index.js
src/component/Login/index.js :
import { userLogin } from 'util/auth_util.js'
import statement if jsconfig.json as mentioned above not used
src/component/Login/index.js :
import { userLogin } from '../../util/auth_util.js'
I have a Node.js project written in Typescript and I am trying to get it to work with mime.js (https://github.com/broofa/node-mime). I have a declaration file (https://github.com/borisyankov/DefinitelyTyped/blob/master/mime/mime.d.ts) but cannot get node.js in typescript to work nicely with it.
I have the following:
/// <reference path="../../libs/mime.d.ts" />
import mime = require( 'mime' );
This keeps the type script compiler happy and all is good until I try to run it in Node.
When I try to run it I get
Cannot find module 'mime'
However, if I edit the generated javascript to the following:
import mime = require( '../../libs/mime' );
It all works fine. If I change the typescript file to have the require with the relative path I get a compiler error:
Cannot find external module '../../libs/mime'
How do I refer Typescript to both the mime.d.ts file and to the mime.js file so that both the compiler and Node are happy.
Many Thanks
TypeScript supports relative paths only for TypeScript modules. Ambient JavaScript modules should be placed in node_modules folder. From Node.js doc:
If the module identifier passed to require() is not a native module, and does not begin with '/', '../', or './', then node starts at the parent directory of the current module, and adds /node_modules, and attempts to load the module from that location.
Workaround 1
Place .d.ts next to .js module and change it from:
declare module "mime" {
...
}
to:
declare module Mime {
...
}
export = Mime;
Workaround 2
Rewrite .d.ts files from:
declare module "mime" {
export function lookup(path: string): string;
...
}
to:
declare interface IMime {
function lookup(path: string): string;
...
}
And then use plain var instead of import:
var mime = <IMime>require( '../../libs/mime' );
Try the following: in the root of the project 'npm install mime'. It will create the node_modules directory with mime inside of it. You can import it by 'require('mime')'. You also have to 'reference' the .d.ts file but that's the minor thing, with the npm package node will be able to import the actual javascript lib.
I also recommend using TSD ('npm install tsd -g') for getting the .d.ts files from DefinitelyTyped.
Btw sry for typos, I'm writing from mobile.
you need:
Add definitions file(*.d.ts) of the library
You must understand, the definition file contains only the interfaces of the library. You should be add the library source code separately.
References:
The typescript definitions:
https://github.com/borisyankov/DefinitelyTyped
The definitions for mime:
https://github.com/borisyankov/DefinitelyTyped/blob/master/mime/mime.d.ts
I've found a better way of doing this that works with node_modules folders and typings folder. A working example can be seen here:
https://github.com/Roaders/contact-list-checker/tree/external-js-module-example
In this app I import the csv js library in the ContactList class:
import csv = require('csv');
This is after installing it:
npm install csv
as the csv lib is in the node_modules folder we do not need to specify and path to the lib and just csv is sufficient for the compiler to find it. Without a d.ts declaration file we get errors though. This declaration file could be located in the typings folder and come directly from tsd but this lib is not found on tsd so I had to create my own. csv.d.ts is in libs/csv:
declare module "csv" {}
(I will add function interfaces to this later)
the module name HAS to match the import name. The filename can be anything.
You can add a reference to this file in the file that's doing the import:
///<reference path="../../../libs/csv/csv.d.ts" />
or as I have done you can just add a reference to it in the tsconfig.json in the root of the project:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"diagnostics": true
},
"files": [
"./app.ts",
"./typings/tsd.d.ts",
"./libs/libs.d.ts"
]
}
(where libs.d.ts has a reference to csv.d.ts)
This method allows you to install js libs using npm install and use declarations from tsd.