I am developing an Angular module and after compiling and bundling it with ngc and rollup I am getting the following error in my Angular project:
Cannot find module "jquery/index"
In one of the module files I have the following import:
import * as jQuery from 'jquery';
In the module's UMD file the jquery import is declared as jquery/index. When I change it to jquery everything works as it should. However each time I rebuild and bundle the package I have to fix the problem again as rollup (or ngc) somehow changes the import from jquery to jquery/index.
So the main question is why the jquery import statement is changed after compiling and bundling?
My tsconfig:
{
"compilerOptions": {
"declaration": true,
"module": "es2015",
"target": "es5",
"baseUrl": ".",
"stripInternal": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"outDir": "../build",
"rootDir": ".",
"lib": [
"es2016",
"dom"
],
"skipLibCheck": true,
"types": []
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"strictMetadataEmit": true,
"skipTemplateCodegen": true,
"flatModuleOutFile": "chassis-core.js",
"flatModuleId": "chassis-core"
},
"files": [
"./index.ts"
]
}
Related
I used Vite to scaffold a typescript-react project, and i wanted to use the given tsconfig.json file to create shortcuts for my directories, so i wont have to deal with long relative paths when importing stuff in my components.
This is tsconfig.json :
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./src",
"paths": {
"#styles/*": ["styles/*"],
"#routes/*": ["routes/*"],
"#components/*": ["components/*"],
"#assets/*": ["assets/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
I get an error when trying to import LandingPage.module.css into my component LandingPage.tsx using this line : import styles from "#styles/LandingPage.module.css";
here's the relevant folder structure :
The Intellisense in VS Code when i type import styles from "#styles/" shows only the js file in styles folder, and doesn't pick up on the css module.
Attempted solution :
A comment about restarting the Typescript server, didn't work.
Ref : This SO question
I have a angular project generated with nrwl/nx, I generated an model folder manually, but if I try to import something from it I have to do it manually. Is there anyway to make a file where I can put the path to my models and it will automatically be found?
I looked a bit and found this in my tsconfig.base.json
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"module": "esnext",
"lib": ["es2017", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {
"#moniesta-admin/auth-lib": ["libs/auth-lib/src/index.ts"],
}
},
"exclude": ["node_modules", "tmp"]
}
I tried to add it like my auth-lib folder but that does not work either. This is how the index.ts of auth-lib looks:
export * from './lib/auth-lib.module';
EDIT:
I tried to add my model like this:
"#moniesta-admin/model": ["model/index.ts"],
this is how the index.ts looks:
export * from '../models/*'
but this gives me the following error:
the typedeclaration or module was not found
EDIT v2:
Command is the following:
ng g #nrwl/angular:lib
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'm trying to run a typescript file with ts-node. Getting a weird error:
import { tes } from "./tes";
^
SyntaxError: Unexpected token {
at Module._compile (internal/modules/cjs/loader.js:720:23)
If I copy the project ts files into an empty directory and try to run the file without any configuration it works fine, so it's something in the configuration.
I also tried generating a brand new angular package format project:
ng new proj --create-application=false
cd proj
ng g library x
And if I delete all the tsconfig files associated with the project and the library, ts-node runs fine. When I leave them in I get the same error.
The tes file is inside a Angular Package Format library. This is the top level tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
],
"paths": {
"csv": [
"dist/csv/csv",
"dist/csv"
]
}
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
This is the project specific tsconfig.lib.json :
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
]
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
Thoughts?
It looks like your tsconfig is set to output js using esnext modules, which aren't understood by node without configuration. You can either:
Remove the "module": "esnext", line from your tsconfig.json
Or, assuming you want to keep your config for Angular, configure your node to use the new ES module syntax e.g. by following the answer here
I try to import Highcharts-more like this:
import Highmore from '../../node_modules/highcharts/highcharts-more';
then im getting the following Error:
Module '../../node_modules/highcharts/highcharts-more' was resolved to 'C:/Users/.../node_modules/highcharts/highcharts-more.js', but '--allowJs' is not set.
So I go into my tsconfig.json and add allowJs to my settings:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
After that Im getting a new Error:
Cannot write file 'C:/Users/../node_modules/highcharts/highcharts-more.js' because it would overwrite input file.
I need highcharts-more in my whole Project and I couldnt find another way to import it. Please help
Use the same syntax as it's shown in this doc (Typescript section): https://www.npmjs.com/package/highcharts
The example is done for the exporting module - highcharts-more module should be imported analogically.