I'm having problems with the Atom IDE. It seems to me that the interpretation of other types of libraries, like Jquery, is not well accepted by the Typescript interpreter of the Atom.
Does anyone know if in Atom, the procedure is different?
At VSC, the interpretation is perfect. Already on the Atom, sucks!
Note: I already have Atom IDE and Typescript installed on the Atom.
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"outDir": "app/js",
"noEmitOnError": true,
"noImplicitAny": true,
"removeComments": true,
"module": "system",
"strictNullChecks": true
},
"include": [
"app/ts/**/*"
]
}
package.json
{
"name": "alurabank",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "tsc",
"watch": "tsc -w",
"server": "lite-server --baseDir=app",
"start": "concurrently \"npm run watch\" \"npm run server\""
},
"author": "",
"license": "ISC",
"devDependencies": {
"#types/jquery": "^2.0.42",
"concurrently": "^3.5.0",
"lite-server": "^2.3.0",
"typescript": "^2.3.2"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
Related
I am using these commands in /server/package.json to build and run my server code:
"start": "npm run compile && node ./dist/index.js",
"dev": "concurrently \"npm tsc --watch\" \"nodemon -q dist/index.js\""
These scripts build my JavaSCript from my TypeScript source just fine. But when node/nodemon runs /server/dist/index.js it errors with this error:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/.../server/dist/graphql/typeDefs' imported from /Users/.../server/dist/index.js
I know the paths are correct: If I Cmd + click on the relative path ie ./graphql/typeDefs on line 9 of server/dist/typeDefs (where the error occurs) in VSCode it opens that file up in a new tab. The corresponding TS file that the JS is generated from: https://github.com/currenthandle/next-apollo/blob/jwt/server/src/index.ts#L10
If I switch the imports to requires then it works...
Can anyone see what is going wrong there? I'm using node.js version v18.12.1
package.json
{
"name": "eth-saturday",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"compile": "tsc",
"start": "npm run compile && node ./dist/index.js",
"dev": "concurrently \"npm tsc --watch\" \"nodemon -q dist/index.js\""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#apollo/server": "^4.2.2",
"#prisma/client": "^4.7.1",
"graphql": "^16.6.0",
"jsonwebtoken": "^8.5.1",
"next-auth": "^4.18.6",
"zod": "^3.19.1"
},
"devDependencies": {
"#rollup/plugin-typescript": "^10.0.1",
"#types/node": "^18.11.13",
"concurrently": "^7.6.0",
"prisma": "^4.7.1",
"rollup": "^3.7.3",
"typescript": "^4.9.4"
}
}
tsconfig.json
{
"compilerOptions": {
"rootDirs": ["src"],
"outDir": "dist",
"lib": ["es2020"],
"target": "es2020",
"module": "esnext",
"moduleResolution": "node",
"esModuleInterop": true,
"types": ["node"]
}
}
package.json
{
"version": "1.0.0",
"description": "",
"dependencies": {
"#types/express": "^4.17.13",
"#types/node": "^18.6.4",
"chalk": "^5.0.1",
"dotenv": "^16.0.1",
"express": "^4.18.1",
"nodemon": "^2.0.19",
"tsc-watch": "^5.0.3",
"typescript": "^4.7.4"
},
"devDependencies": {},
"scripts": {
"start": " nodemon node --es-module-specifier-resolution=node --experimental-modules dist/index.js",
"build": " tsc --watch && npm run start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"type": "module"
}
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist",
"moduleResolution": "node",
"importHelpers": true,
"target": "ESNext",
"module": "ES6",
"lib": [
"ES6",
"dom","ESNext"
],
"allowSyntheticDefaultImports": true,
"noUnusedParameters": false
},
"exclude": ["node_modules", "**/node_modules/*"],
}
my ts code
import chalk from "chalk";
import express from "express"
import { getTodo } from './addTodo';
const app = express()
app.listen(4000,()=>{
console.log(chalk.green("server is up on http://localhost:4000"))
},)
app.get("/",getTodo)
so when I compile like that its givin module not found err but when I change
import { getTodo } from './addTodo.js';
like that code every time I need to change to file extension with my hand.
I search on google to fix but they have many result have but never can fix my problem
can you help me thanks from now.
i find solution problem was
package.json
"start": " nodemon node --es-module-specifier-resolution=node --experimental-modules dist/index.js"
nodemon already starting node prompt.
so we need to delete node
"start": " nodemon --es-module-specifier-resolution=node --experimental-modules dist/index.js"
I have 2 typescript / node projects, both using the same version of node. However when I use import * as Crypto from 'crypto'; in each project, they point to two different versions of the crypto module:
I'm quite new to node and javascript / typescript and struggling to trying to understand why, hoping someone can enlighten me. My question is: why does import * as Crypto from 'crypto'; resolve to two different versions of crypto even though the projects are setup to use the same versions (I think!)? What determines which version of a built-in module is used? And how can I resolve this so both use the same?
Here's my setup:
===Project 1===
node -v
v14.15.2
npm -v
6.14.9
package.json
{
"name": "functions",
"scripts": {
"lint": "eslint \"src/**/*\"",
"build": "tsc",
"serve": "npm run build && firebase emulators:start --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "12"
},
"main": "lib/index.js",
"dependencies": {
"#google-cloud/firestore": "^4.8.0",
"#sentry/node": "^5.29.2",
"#sentry/tracing": "^5.29.2",
"axios": "^0.21.1",
"bad-words": "^3.0.4",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.8.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "^2.22.0",
"firebase-functions-test": "^0.2.0",
"typescript": "^3.8.0"
},
"private": true
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"target": "es2017"
},
"compileOnSave": true,
"include": [
"src"
]
}
===Project 2===
node -v
v14.15.2
npm -v
6.14.9
package.json
{
"name": "user-approval",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"lint": "eslint \"src/**/*\"",
"build": "tsc",
"start": "node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"engines": {
"node": "12"
},
"license": "ISC",
"dependencies": {
"#sentry/node": "^5.29.2",
"#sentry/tracing": "^5.29.2",
"#slack/bolt": "^2.5.0",
"#slack/web-api": "^5.14.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.8.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "^2.22.0",
"typescript": "^3.8.0"
},
"private": true
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"sourceMap": true,
"strict": true,
"target": "es2017"
},
"compileOnSave": true,
}
I suspect the projects have different versions of the #types/node package installed. If you run
npm update #types/node
in each project, it should update each of them to the latest.
I was confused at first because #types/node didn't appear in your package.json files, but it doesn't even if you install it unless you add --save-dev. Even though npm install defaults to --save normally, apparently not for #types packages — which makes sense, they're just a dev dependency, not a runtime dependency.
I'd probably add them as a dev dependency by doing:
npm install #types/node --save-dev
Failed to compile.
/moonholdings.io/node_modules/#types/react-dom/node_modules/#types/react/index.d.ts
(2312,14): Duplicate identifier 'LibraryManagedAttributes'.
Not sure why I'm getting this.
I've downgraded my "#types/node" from 10 to 8 and that didn't work.
Also tried "#types/node": "^9.6.7"
My Repo: https://github.com/Futuratum/moonholdings.io
My package.json
{
"name": "moonholdings.io",
"version": "0.1.0",
"private": true,
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/ --source-map",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive --source-map",
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"dependencies": {
"#types/react": "^16.4.14",
"#types/react-redux": "^6.0.9",
"node-sass-chokidar": "^1.3.3",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts-ts": "2.17.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#types/jest": "^23.3.2",
"#types/node": "^8.10.29",
"#types/react-dom": "^16.0.7",
"typescript": "^3.0.3"
}
}
Here is my tsconfig
{
"compilerOptions": {
"traceResolution": false,
"strictNullChecks": true,
"noImplicitAny": true,
"module": "esnext",
"target": "es5",
"lib": [
"es2015",
"es2017",
"es6",
"es7",
"es5",
"dom"
],
"jsx": "react",
"experimentalDecorators": true,
"moduleResolution": "node",
"baseUrl": "./src",
"noUnusedLocals": true,
"noUnusedParameters": false,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"importHelpers": true,
"strictFunctionTypes": false
},
"include": [
"src/**/*",
"webpack/**/*"
],
"files": [
"core.ts",
"sys.ts",
"types.ts",
"tsc.ts",
"registerServiceWorker.ts",
"src/registerServiceWorker.ts",
"src/setupTests.ts"
],
"exclude": [
"typings/browser.d.ts",
"typings/browser",
"typings",
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest"
]
}
You may find that the duplicates are located in node_modules/#types/react and node_modules/types/react-dom/#types/react or a similar set-up, in which one of the packages has a nested dependency on the other.
Uninstalling and reinstalling #types/react-dom and #types/react together is what fixed it for me.
yarn remove #types/react-dom #types/react
yarn add -D #types/react-dom #types/react
I'm still not sure what caused that bug, however I've checked out a much earlier version of my app, where it was stable. So going to continue work from there.
Here is the working package.json
{
"name": "moonholdings.io",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"dependencies": {
"#types/jest": "^23.3.1",
"#types/node": "^10.9.4",
"#types/react": "^16.4.13",
"#types/react-dom": "^16.0.7",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-ts-with-scss": "2.1.0",
"typescript": "^3.0.3"
},
"devDependencies": {}
}
I had the same error.
I upgraded #types/react and #types/react-dom to their latest versions in package.json and it fixed my error.
I am trying to use the new collection types of ES6 in my typescript/react project.
interface MyComponentProps{
myMap: Map<String, {isAvailable?: boolean}>,
}
...
this.props.myMap.keys();
IntelliJ and Webpack can compile my code without warnings, but I got an error at runtime in Chrome 55.
this.props.myMap.forEach is not a function
tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node",
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react"
}
}
package.json
{
"name": "cocktails-db",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"production": "webpack -p",
"start": "webpack-dev-server -d",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.15.3",
"elasticsearch": "^12.1.0",
"react": "^15.4.0",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.0",
"react-router": "^3.0.0",
"react-router-bootstrap": "^0.23.1",
"react-select2-wrapper": "^1.0.4-beta1"
},
"devDependencies": {
"#types/axios": "^0.9.34",
"#types/bootstrap": "^3.3.32",
"#types/elasticsearch": "^5.0.1",
"#types/react": "^0.14.51",
"#types/react-bootstrap": "0.0.37",
"#types/react-dom": "^0.14.19",
"#types/react-router": "^2.0.41",
"#types/react-router-bootstrap": "0.0.27",
"html-webpack-plugin": "^2.24.1",
"ts-loader": "^1.2.2",
"typescript": "^2.0.10",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
I still can use the Map type when type in the browser's console, so I guess it's a problem of typescript compilation.
I am missing a dependency somewhere ?
--- Edit ---
It was actually an initialization problem, but I still don't know why I don't get Typescript feedback/type warning.
This is how I call ´MyComponent´
myMap : any;
...
this.myMap="";
...
render() {
return (
<div>
<MyComponent myMap={this.myMap}> </MyComponent>
</div>
)
Problem solved; That had nothing to do with a compilation problem, but because wrong object initialisation.