I'm using a compiled ES6 library in my Typescript application. The testing fails with an error
TypeError: Cannot read property 'PropTypes' of undefined
The module it is complaining about is importing react as
import React from 'react';
If I change this to
import * as React from 'react';
then it will compile and run fine. Here is my package.json's jest config:
"jest": {
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json"
],
"verbose": true,
}
And here is my tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true,
"preserveConstEnums": true,
"removeComments": true,
"noImplicitAny": false,
"moduleResolution": "node",
"noUnusedParameters": true
},
"include": [
"./src/**/*"
],
"filesGlob": [
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts",
"typings/index.d.ts"
]
}
What configuration have I messed up here?
then it will compile and run fine.
That is the way to go for TypeScript. import * as React from "react".
Related
I have nx vite-react npm library that returns a component.
When running dev or building then vite preview everything works fine.
But when I published my npm library and tried to import it it gives a react is not defined error.
If import react like:
import React from 'react'
It would work but I want to remove the necessity on importing react on my code.
Here is my vite config:
import { defineConfig } from 'vite';
import react from '#vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"jsx": "react-jsx",
"types": ["node"]
},
"exclude": ["**/*.spec.ts", "**/*.test.ts"],
"include": ["**/*.ts", "**/*.tsx", "**/*.js"]
}
my tsconfig.json
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"module": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"moduleResolution": "Node",
"target": "ESNext",
"useDefineForClassFields": true,
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"allowJs": false,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.lib.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}
I need to import a javascript lib into my project without .d.ts files (for some reason it doesn't have), while sadly I cannot use 'import' or 'require' at the same time (the ts poject structure is old but cannot upgrade).Is there still any solution?The tsconfig.json may like the following:
{
"compilerOptions": {
"target": "ES5",
"module": "amd",
"skipLibCheck": true,
"lib": [
"DOM",
"ES2015"
],
"allowJs": true,
"checkJs": false,
"outFile": "./out/js/bundle.js"
},
"exclude": [
"node_modules"
],
"include": [
"./lib/lib.js",
"./src/**/*.ts"
]
}
I have a nuxt project that I recently migrated to typescript. I also have a seperate repo full of vue components that are imported as node modules into my nuxt project.
I have included them in my typescript class based SFC using import Component from '#place/vue-component'
When I try to run my app I get 500 errors with this message render function or template not defined in component: Card but the app does compile successfully.
My tsconfig:
{
"compilerOptions": {
"target": "ES2018",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"types": [
"#types/node",
"#nuxt/types"
],
},
"exclude": [
"node_modules"
],
}
Any ideas would be appreciated!
It took a while but this is what worked for me:
In my vue.shim.d.ts file I needed to declare each import like this:
declare module "#place/vue-component" {
import Vue from 'vue'
export default Vue
}
and in addition:
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
Then this was my tsconfig:
{
"compilerOptions": {
"target": "ES2018",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"types": [
"#types/node",
"#nuxt/types"
],
},
"exclude": [
"node_modules"
],
}
I have a project with Angular 8 i try use in my
src/app/helpers/auth.guard.ts
import { AuthenticationService } from '#app/services';
My AuthenticationService ts file have a path in
src/app/services/authentication.service.ts
when i run ng serve i get the error
ERROR in src/app/helpers/auth.guard.ts(4,39): error TS2307: Cannot find module '#app/services'.
this is my tsconfig.js
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
],
"paths": {
"#app/*": ["src/app/*"],
"#environments/*": ["src/environments/*"]
}
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
This my tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}
I try to run the project with --aot and this doesn't work
Here's what could be going wrong:
Your Authentication service resides at following path:
src/app/services/authentication.service.ts
But when you try to import it using: import { AuthenticationService } from '#app/services', it tries to import the service from services directory. Your service directory doesn't export authentication service, therefore you get this error.
Here's how you can fix it:
Create a file called index.ts in services directory so it's located at path: src/app/services/index.ts.
In this index.ts file, add following export statement:
export * from './authentication.service.ts';
This will export your service from services folder so your import statement will be able to locate Authentication service at src/app/services/.
As you already have an path alias in your tsconfig "#app/*": ["src/app/*"], your import statement should resolve correctly.
Let me know if it doesn't work.
I am trying to change the way of importing modules in React Native. The standard method of doing that is something like this:
import HomeScreen from "../../screens/Home"
I sow that is also possible by doing:
import HomeScreen from "#screens/Home"
To do that, I tried to make a package.json file in screens folder and put it a name
{
"name": "#screens"
}
but is not working.
Update:
I tried to use babel-plugin-module-resolver and configure it with my .babelrc and .tsconfig but the problem persists
.babelrc
{
"plugins": [
[
"module-resolver",
{
"root": ["./src"],
"alias": {
"test": "./test",
"underscore": "lodash"
}
}
]
]
}
tsconfig.json
{
"compilerOptions": {
"allowJs": false,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "react-native",
"module": "es2015",
"moduleResolution": "node",
"outDir": "build",
"rootDir": "src",
"noImplicitAny": false,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"sourceMap": true,
"target": "es2015",
"lib": ["es2015", "es2017", "dom"],
"skipLibCheck": true,
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"test/*": ["test/*"],
"underscore": ["lodash"]
}
},
"exclude": ["node_modules"],
"include": ["src"]
}
PS: I am also using Typescript