I am in the process of introduing webpack 5 to our angularjs app (we slowly shifting to Angular). I am facing this error where webpack is not importing the packages I have in my node_modules folder. I have this angular-route that I am including in my webpack vendor list. When webpack goes to node_modules/angular-route/index.js, it is not recognizing module.exports = 'ngRoute' and thus not including it in my bundled file.
My tsconfig.json has
"module": "es6"
"target": "es5"
"lib": ["DOM", "es5", "es6"]
Would appreciate any input on this as it is pretty frustrating. Thank you!
Related
I'm new to TypeScript and am facing this annoying problem. The terminal (or whole project) won't auto refresh as regular React apps with JS do. Usually, as I make changes and fix bugs pointed out by the linter, the development server will auto refresh and show either the compiled product or the subsequent bugs.
This is happening both in projects that are migrating from JS to TS and projects that are started with TS.
tsconfig.json for project bootstraped with create-react-app and TS
{
"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": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
In one of the projects I kicked off with TS, this is how I installed things:
npx create-react-app my-project --template typescript
In another project in which I am trying to migrate, this is how I installed the necessary things:
npm install -D typescript
npx tsc -init
npm install -D #types/react #types/react-dom #types/reach__router
I can observe the same thing. Not a real fix but a quick workaround: Insert a space somewhere (in an empty line for example) and save the file. The error should have gone.
I have a TypeScript React app using npx create-react-app --template typescript. When I run npm start, I get an error in one of my files:
TypeScript error in /<path>/App.tsx:
Cannot find module 'moment'. TS2307
Import:
import moment from 'moment'
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"noImplicitAny": false,
"experimentalDecorators": true
},
"include": ["src", "husky.config.js", "lint-staged.config.js"]
}
Using "moment": "^2.25.0" in package.json. Using npm.
Looking in the node_modules directory, I can see the moment package, and the package.json file says moment is on version 2.25.0
I've tried clearing npm cache, deleting node_modules and package-lock.json, reinstalling, importing like import * as moment from 'moment'.
Any ideas? This just randomly started happening today. Thanks in advance.
Update
moment version 2.25.1 is released. This fixes the issue.
Old Answer
It's an issue of moment version 2.25.0,
https://github.com/moment/moment/issues/5486
Delete your package-lock.json and node_modules folder, replace this line of code in your package.json
"moment": "2.24.0",
note, remove the ^, else it will keep installing 2.25.0
then npm install
This should resolve the issue.
You have to install a package before actually using it in your code. So you can Install moment library using npm (node package manager)
npm install moment
and then import this library
import * as moment from 'moment'
Then you are good to go.
You have done exactly right, nothing wrong in the scaffolding the app. Just a mistake in the import statement as it has been updated.
As of version 2.13.0, Moment includes a typescript definition file.
Install via NPM
npm install moment
Import and use in your Typescript file-
import * as moment from 'moment';
let now = moment().format('LLLL');
Note: If you have trouble importing moment
For Typescript 2.x try adding "moduleResolution": "node" in compilerOptions in your tsconfig.json file(in your app root directory) and then use any of the below syntax
import * as moment from 'moment';
import moment = require('moment');
For Typescript 1.x try adding "allowSyntheticDefaultImports": true in compilerOptions in your tsconfig.json file and then use the syntax
import moment from 'moment';
let now = moment().format('LLLL');
npm install moment
delete node_modules <--- if you still found error
then npm i <--- install the package again
and then import this library
import * as moment from 'moment'
I'm using TodoMvc Typescript-Angular as blueprint for my AngularJS application. It is all good and works fine. Basically I can:
Install or update all dependencies with that package.json doing npm install or npm update.
Compile the ts code under js doing npm run compile which is configured to be tsc --sourcemap --out js/Application.js js/_all.ts.
I'm also working with WebStorm and would like to get the tsconfig.json equivalent to the command before ... how can I do that?
Doing tsc --init I get a new generic tsconfig.json generated but it is not the equivalent to the command tsc --sourcemap --out js/Application.js js/_all.ts ... is there a way to generate it according to a package.json setup? also taking into account the TS version there etc?
The following config should work:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"outFile": "js/Application.js"
},
"exclude": [
"node_modules"
],
"include": ["js/_all.ts"]
}
I am trying to build & publish my first NPM module and have some questions about best practice when compiling. The project is a React component written in Typescript and using SASS.
My component works as it should when I import the index.ts directly into a test file and bundle the whole thing with webpack. However, if I bundle it I loose all the niceness of the Typings when importing into another project but if I try to use the compiled JS without bundling I have been getting errors resolving various assets including SCSS/CSS files and JSON files.
I know it's a rather large question but I've been unable to find a really good answer as to how I should be structuring the project. I've noticed a few thing from looking at other packages:
- build/dist folders generally contain a bundled js file
- lib folders generally contain js files and typings and sometimes map files
So, the question I have is how to the bundles and compiled js files relate to each other and how should I be setting up my compilers to get it working.
I've been playing with webpack and tsc but can't seem to get the combination working. The latest issue I am having is that the compiled JS in my dist folder complains that it can't resolve the module.scss files which is correct as the scss was compiled to css using node-sass but clearly the references haven't updated properly. The bundle works when I use webpack but looses typings when importing into another project.
My TSCONFIG looks like this:
{
"compilerOptions": {
"target": "es5",
"lib": ["es6", "dom", "es2017"],
"module": "commonjs",
"declaration": true,
"outDir": "./dist",
"strict": true,
//"rootDir": "src",
"jsx": "react",
"resolveJsonModule": true,
"sourceMap": true,
"moduleResolution": "node"
},
"include": ["src"],
"exclude": ["node_modules", "**/__tests__/*", "temp"]
}
and I'm using the following script to build the compiled JS:
"build":"tsc && node-sass --recursive --output dist --source-map true --source-map-contents src && cp -r ./src/schemas ./dist/"
The source is on github here: https://github.com/androidpage/json-form-builder
Apologies the project is a bit of a mess at the moment but the primary goal was to learn how to structure and compile a project thus this question :)
Thanks for any help you can offer.
I have Asp.Net Core 2.0 with React solution and using VSTS CI build. During the build phase, I am getting an error -
node_modules\#types\react\index.d.ts(109,81): Error TS2344:
Build:Type 'ChangeTargetHTMLAttributes<T>' does not satisfy the
constraint 'DOMAttributes<T>'.
I am using React 15.0 and my tsconfig.json content is -
{
"compilerOptions": {
"baseUrl": ".",
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"jsx": "react",
"sourceMap": true,
"skipDefaultLibCheck": true,
"strict": true,
"types": ["webpack-env"],
"noImplicitThis": false
},
"exclude": ["bin", "node_modules"]
}
My CI pipeline is:
Use NuGet 4.4.1
NuGet restore
dotnet restore
Build Web project (I am getting error at this point)
Deploy
I was getting above error when I used "Azure Web App" template. When I used "ASP.NET Core" template for CI build phase and created a separate release for CD, I did not get above error.
So basically using "ASP.NET Core" template was the right thing as I was building an ASP.NET Core solution.