I used to work with tsd for managing my type definitions, but as it's deprecated, I'm trying to migrate to typings which is my opinion more complicated, but should be the way to go, I guess.
I want to install a type definition and for that I use the --ambient flag.
In Visual Studio I have the typings.json file which looks like that:
{
"name": "Test",
"version": false,
"ambientDependencies": {
"angular": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular.d.ts#ca92a5b250433c38230b5f4138b36453862342bf",
"jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#ca92a5b250433c38230b5f4138b36453862342bf"
}
}
This was automatically created when migrating from tsd to typings but now once I need a new type definition, for instance angular-route I use the following command:
typings install angular-route --ambient
This works fine, but the typings.json does not get updated.
What is the point and why am I missing? Why were angular and jquery both migrated to typings.json and when installing angular-routethe file does not get refreshed?
Actually in Typings 1.0 they did some breaking changes.
"ambient" is now "global". Just in case, installing from DefinitelyTyped must be explicit.
The following will install jQuery and save it to typings.json
typings install dt~jquery --global --save
See the link in Igor's answer for more info
You forgot --save
typings install angular-route --ambient --save
command syntax above is now obsolete and only applicable to version 0.x
Link to Typings command help
Update
As pointed out by #AndresM there are breaking changes in going from version 0.x to 1.x. See the documentation Updating From 0.x to 1.0?. The command syntax in #AndresM answer is the correct way to execute a typings command using DefinitelyTyped store and Typings version 1.x.
Now with Typescript2.0(https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/) the global is also gone. The following will install jQuery and angular typings:
npm install --save #types/angular #types/jquery
Your package.json will then have:
"dependencies": {
"#types/angular": "^1.5.16",
"#types/jquery": "^2.0.33"
}
Your node_modules directory will have #types/angular and #types/jquery directories which contain index.d.ts files.
Related
TLDR:
how can I instruct storybook to use babel-loader v8.1.0 OR force react-scripts to use babel-loader v^8.2.2 ?
Details
I Develop a lib with ./example folder which is itself project created with create-react-app. I wanted to add storybook in addition to the normal example pages, so I installed storybook.
after installing storybook I can no longer start the example project with yarn start or the story book with yarn storybook.
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.1.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
D:\Eliav\projects\git projects\react-xarrows\examples\node_modules\babel-loader (version: 8.2.2)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
well I know what the issue but I don't know how to fix it:
I'm using react-scripts v4.0.3 which for unknown reason requiring exactly babel-loader v8.1.0. i can see this it in yarn.lock:
react-scripts#^4.0.1:
version "4.0.3"
...
dependencies:
...
babel-loader "8.1.0"
and storybook requiring babel-loader v8.2.2 or above:
"#storybook/builder-webpack4#6.2.9":
version "6.2.9"
...
dependencies:
...
babel-loader "^8.2.2"
already tried
what is written in the error above.
hoped that yarn upgrade would upgrade babel-loader from v8.1.0 to v8.2.2 but it does not work because react-scripts require exactly v8.1.0
a workaround that worked
Create a .env file in your project directory and include SKIP_PREFLIGHT_CHECK=true in the file.
but I want to avoid it. is it possible?
So for anyone to whom this is still unclear.
I used create-react-app to create a new app
I added storybook using npx sb init
then they clashed.
SOLUTION:
yarn add babel-loader#8.1.0
UPDATE:
The error you often see is that CRA (create-react-app) relies on specific dependencies (e.g. for webpack or babel).
What can also be done is you specify which versions those dependencies must resolve to, based on the error messages
This can be done using the resolutions field in package.json, e.g.:
"resolutions": {
"babel-loader": "8.1.0",
"webpack": "4.x.x",
}
After this all will work Fine.
2 Links to consider https://github.com/facebook/create-react-app/issues/10123
and https://github.com/storybookjs/storybook/issues/4764#issuecomment-740785850
Seems that most people are installing the package to get it to work even thou it says not to install in manually.
So try:
yarn add babel-loader#8.1.0
I am using create-react-app for a project. I installed various eslint plugins etc, however, we all know that create-react-app already comes with certain dependencies that are not shown in package.json.
I want the newest eslint version which is currently 5.3.0. Create-react-app comes with 5.16.0. WITHOUT EJECTING, how do I bring this dependency to the newest version without breaking everything?
I get the following error:
The react-scripts package provided by Create React App requires a dependency:
"eslint": "^5.16.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
:\node_modules\eslint (version: 5.3.0)
Things in package.json will take precedence so if you upgrade version of eslint, react-scripts should always take the latest version.
There is a small loophole though. If you fiddle too much with dependencies you might get the warning about mismatch version by react-scripts. To avoid that you can create .env file and can specify the following.
SKIP_PREFLIGHT_CHECK=true
I just solved this issue, the error says:
The react-scripts package provided by Create React App requires a dependency:
"eslint": "5.16.0"
but also says you have another version at package.json that's
\node_modules\eslint (version: 5.3.0) in my case was 6.1.0
so my solution was:
I searched for the dependency called eslint and updated the version similar to Create React App expected "eslint": "^5.16.0" at package.json
Then run npm install and now you can run npm start... if you have troubles with slint-plugin-import just update the version as well.
Installed typings globally
npm install -g typings.
Installed AngularJS types
typings install dt~angular --save
jsconfig.jsong file is in the root of my angular project along with typings.json and typings folder containing the angular module typings. I restarted vscode, still nothing.
What else can I check?
For JS projects, typings should be acquired automatically. Take a look at our documentation on automatic type acquisition for more info.
If automatic type acquisition is not working for some reason, try using #types instead of using typings:
npm i --save-dev #types/angular
These typings files should be automatically picked up for intellisense in VSCode.
Then if you still don't see proper intellisense, please open an issue. Include your jsconfig.json and some example code.
I try to set up a new project with angular 1.5.5 and I want to make use of typescript for my code. I use Visual Studio Code as my coding tool.
I added the typings for angular to my project:
typings install angular --save --ambient
I added a typings.d.ts file and a tsconfig.json file but I don't have intellisense any of the .ts files I've added...
Don't know what am I doing wrong? Can someone help me?
I try setup small project to reproduce the problem: download link
Great thx in advance!
Alexander.
I guess you must have seen an error when executing:
typings install angular --save --ambient
First of all you must install the new TypeScript Definition Manager:
npm install typings --global
then you must use this command in your project's folder:
typings install dt~angular --global --save
as explained in the quick start.
This command should create a file typings.json which should look something like this:
{
"globalDependencies": {
"angular": "registry:dt/angular#1.5.0+20160517064839"
}
}
If you're wondering what that dt prefix is, you can run:
typings search --name angular
and you will see that dt represents the source:
I think you must restart VS Code to see the effects and have intellisense.
I ran into some issues myself and here are the steps I took to make it work.
Open the terminal and run...
npm install typings -g
cd ~/root of your project
I had an error running typings install dt~angular --save --global
I install locally typings install dt~angular --save
Notice the typings folder in the root of your project. If you can't see the typings folder restart VS Code or cmd+shift+p and type reload and choose Reload Window.
In the root also is a typings.json file with the following object.
{
"dependencies": {
"angular": "registry:dt/angular#1.6.0+20170223151516"
}
}
In the root of your project create an empty jsconfig.json
After creating the jsconfig.json file I Reload Window again. I opened the app.js file and got intellisense for angularjs.
One way to get intellisense is to add a ///<reference path="../typings.d.ts" /> to the top of your typescript files. As you add definitions, make sure to add them to the typings.d.ts file.
Your file structure is wrong:
tsconfig.json should be on the root directory of you app, i.e. AngularApp.
usually, typings.d.ts is there as well.
After you move these two files, remember to change the path inside them. Ts files must be included.
//tsconfig.json
{
//...
"files":[
"typings.d.ts",
"public/app/app.ts"
]
}
//typings.d.ts
/// <reference path="typings/browser.d.ts" />
If you want to download.
I want to use existing library like GSAP. I am using webpack, though I don't know what is the right way to do this. Should I be using bower to install my packages and injecting them into my index.html where there are the js and css injection points as if I had used grunt? Or should I be npm installing packages?
You have to use npm package installation and you have to use like
npm install --save GSAP
it will also update your package.json file.