I am having an issue where my path aliases (e.g.- import * as fromUsers from '#store/user/user.reducer';) are not being recognized within VS Code. (Note- on compiling everything works fine). VS Code reports "Cannot find module '#store/user/user.reducer'"
I have both a <root>/tsconfig.json, and a <root>/src/tsconfig.spec.json which look like:
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["dom", "es2015"],
"baseUrl": "./src",
"paths": {
"#store/*": ["app/store/*"],
"#core/*": ["app/core/*"],
"#components/*": ["app/components/*"],
"#app/*": ["app/*"],
"#assets/*": ["assets/*"],
"#env": ["environments/environment"],
"#pages/*": ["pages/*"],
"#theme/*": ["theme/*"]
},
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "src/**/*.spec.ts", "src/**/__tests__/*.ts"],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
},
"types": ["jasmine"]
}
and src/tsconfig.spec.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": ".",
"module": "commonjs",
"target": "es5",
"allowJs": true,
"paths": {
"#store/*": ["app/store/*"],
"#core/*": ["app/core/*"],
"#components/*": ["app/components/*"],
"#app/*": ["app/*"],
"#assets/*": ["assets/*"],
"#env": ["environments/environment"],
"#pages/*": ["pages/*"],
"#theme/*": ["theme/*"]
}
},
"include": ["**/*.spec.ts"],
"exclude": ["node_modules"]
}
Any thoughts on how I can get VS Code to recognize those aliases, so that I dont keep seeing errors being reported in the IDE?
Related
How do you stop tsc from processing a Javascript file required by another?
I want to run full checks on my main index.js, but it requires() a generated.js Javascript file created by emcc, which is perfectly fine, but doesn't pass a lot of tsc's checks.
I tried adding the file to my exclude list in my tsconfig.json, like:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [
"dom",
"webworker"
],
"allowJs": true,
"checkJs": true,
"outDir": "./dist",
"noImplicitAny": false,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"index.js"
],
"exclude": [
"generated.js"
]
}
but that had no effect. When I run tsc --build tsconfig.json I get a tone of errors from generated.js.
The tsconfig.json file looks for typescript files by default, while you are providing it .js files. you can change the file extensions from .js to .ts to let typescript look after them. so your tsconfig.json file may end up looking like this:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"lib": [
"dom",
"webworker"
],
"allowJs": true,
"checkJs": true,
"outDir": "./dist",
"noImplicitAny": false,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"index.ts"
],
"exclude": [
"node_modules",
"generated.ts"
]
}
I am working in MacBook Pro in React. The project works well. But I am running this project on Windows 10 and it drops a lot of errors. Switching property allowSyntheticDefaultImports in true
does not lead to success. An error: 'An export assignment cannot be used in a module with other exported elements.'
TSconfig:
{
"compilerOptions": {
"outDir": "build",
"module": "esnext",
"target": "es5",
"downlevelIteration": true,
"lib": ["es6", "dom", "es2019.object", "es2016.array.include"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "./src/",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"allowSyntheticDefaultImports" : false,
"plugins": [
{
"name": "typescript-tslint-plugin",
}
],
"baseUrl": "./src/",
"paths": {
"*": ["*"]
}
},
"exclude": [
"node_modules",
"cache",
"build",
"scripts",
"cypress",
"acceptance-tests",
"webpack",
"jest",
"config",
"src/setupTests.ts"
]
}
try adding "allowSyntheticDefaultImports": true in compilerOptions in
your tsconfig.json file and then use the syntax
Or try setting the esModuleInterop flag to true.
With flag esModuleInterop we can import CommonJS modules in compliance
with es6 modules spec
your file will look like this.
{
"compilerOptions": {
"outDir": "build",
"module": "esnext",
"target": "es5",
"downlevelIteration": true,
"lib": ["es6", "dom", "es2019.object", "es2016.array.include"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "./src/",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"allowSyntheticDefaultImports" : false,
"plugins": [
{
"name": "typescript-tslint-plugin",
}
],
"baseUrl": "./src/",
"paths": {
"*": ["*"]
}
},
"exclude": [
"node_modules",
"cache",
"build",
"scripts",
"cypress",
"acceptance-tests",
"webpack",
"jest",
"config",
"src/setupTests.ts"
],
"esModuleInterop": true, //<----------------------------add this
"allowSyntheticDefaultImports": true //<----------------------------and this
}
This is in my Webpack config:
usersAlias: path.resolve(__dirname, '../src/pages/users'),
This is in my tsconfig.json:
"baseUrl": ".",
"paths": {
"usersAlias/*": ["src/pages/users/*"],
}
This is the code hierarchy:
This is my usage in Àpp.js:
import Users from 'usersAlias/Users';
And this is the error I am getting:
Cannot find module 'usersAlias/Users'.ts(2307)
If I change Àpp.tsx to App.js Everything works! My issue is TypeScript related.
UPDATE
My Full tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": false,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
],
"baseUrl": ".",
"paths": {
"usersAlias/*": ["src/pages/users/*"],
}
}
Maybe you dont need the ...
module.exports = {
//...
resolve: {
alias: {
users: path.resolve(__dirname, '/src/pages/users'),
}
}
};
And in your code
import Users from 'users';
Check config here
I can't fix next error: when I build project for production, building is successfull. But when I build project with param --prod it's fail.
Error like this:
in node_modules\ng-zorro-antd\antd.d.ts.ɵep.html(1,999): : Object is possibly 'null'.
My TSlint setup is:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"strict": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
],
"removeComments": true
},
"exclude": [
"node_modules",
"**/*.spec.ts",
"**/*.ts.ɵin.html"
]
}
I tried to add node_modules folder to "exclude" but 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