I created a standard app with tns create project --ng which ran fine (and adding platform android)
I also wanted to use graphQL so added apollo-client and graphql tag:
npm install apollo-client --save
npm install angular2-apollo --save
npm install graphql-tag --save
So now when I build with tns build android the error I get is...
node_modules/#types/isomorphic-fetch/index.d.ts(7,5): error TS2300:
Duplicate identifier '"audio"'.
which clashes with (from what I can see)
node_modules/tns-core-modules/declarations.d.ts(25,5): error TS2300:
Duplicate identifier '"audio"'.
isomorphic-fetch is added when apollo-client was added. Not too sure about the typings issue but would be good to know how to get around this.
EDIT:
looking at the guide
I have the 2 items set to false in the tsconfig.json which seem to continue despite of the error...
"noEmitHelpers": false,
"noEmitOnError": false
But I would like to know how to fix this properly.
I ran into the same issue but worked around it in a project with the following dependencies:
nativescript#2.5.1
typescript#2.2.1 (bundles isomorphic-fetch typings in dom)
apollo-client#1.0.0-rc.5
This requires changes to tsconfig.json and references.d.ts described in my response to Github nativescript-dev-typescript issue 19.
While this setup works in the browser with Angular CLI and builds for NativeScript using tns android without relaxing "noEmitOnError": true in tsconfig.json, I then had to debug a runtime exception with an apollo-client call to redux which attempts to call node.js code leading to the following error:
ReferenceError: process is not defined
…
/tns_modules/redux/lib/index.js', line: 38, column 4
This was worked-raound by adding global.process = { env: {} }; as the first line in main.ts, as described in NativeScript Github issue 2937, which StackOverflow won't allow me to link to due to my lack of reputation points.
Well I see tns-core-modules/declarations.d.ts is imported with tns-core-modules/tns-core-modules.base.d.ts so actually Nativescript should provide optionally one more definition where they dont include the request definitions in the base file
Related
So I have package 1 that I wrote in Typescript that contains mocha tests and I'm pretty sure that it works as it should. I push all the code to the git provider and pull it via npm on package 2. When I start React with Typescript on package 2, I get the following:
I tried adding webpack.config.js, various tsconfig.json configuration changes and multiple npm commands that are connected to cache cleaning and reinstalling but nothing works. This error is just plain weird because, from what I know, there shouldn't be any compilation errors regarding class variables.
FIX
This was a very quick fix. So, in short, if the provider with which you started your Typescript application doesn't provide you with webpack or babel file you will have to transpile any module from node_modules into Javascript that you try to import. In this case I just transpiled package 1 and package 2 worked perfectly.
I am working on a typescript website that is hosted on AWS amplify through a Github repo and I have been having intermittent issues deploying the site. Normally, the site builds properly and without major issues/impediments, but occasionally, the site will fail on the frontend portion of the build.
The primary error that it gives is:
2021-09-24T02:11:16.620Z [WARNING]: 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:
/codebuild/output/--/--/--/node_modules/babel-loader (version: 8.2.2)
Manually installing incompatible versions is known to cause hard-to-debug issues.
It goes on to detail some steps to take in order to remedy the issue, which I have tried unsuccessfully a number of times (delete locks, node module folder, remove babel-loader from package.json) I also tried adding SKIP_PREFLIGHT_CHECK=true to a .env file. Doing this resolved that error, but brought up another error as detailed here:
2021-09-24T02:07:11.394Z [INFO]: ./node_modules/#usedapp/core/node_modules/ethers/lib.esm/utils.js 30:0-32:73
Attempted import error: 'TransactionTypes' is not exported from '#ethersproject/transactions'.
Again, the compilation works on my personal machine, and only presents (intermittent) issues upon attempting to build the same Github repo on Amazon Amplify
Please let me know if you have any thoughts or suggestions!
-Snips
Looks like the lib you are using didn't export something you need, if you control the lib you should export it.
Make sure you set "isolatedModules": true in your tsconfig.json
I have an npm package (that I published) which causes duplicate React instances and hence the following Component Exception:
"Invalid hook call. Hooks can only be called inside of the body of a function component..."
What should I do in order to prevent this error from occurring in projects that download this package?
EDIT: The following answer relates to publishing a package and not installing.
For future generations (and current) in case you came across with the same issue, meaning that you ran npm ls react and saw 2 different instances of React. The problem is due to the fact that React should be in your package.json under the peerDependencied and not under dependencies.
You can find a lot of info about it online but I recommend reading this article as it simplifies the subject and makes it clear.
Within a single app, React may exist in several instances (the most probable reason):**
If you use Node for package management, you can run to check the React duplicity in your project folder:
npm ls react
to slove the issue : 1. don't use react , react-dom as dependencies or devDepenencies in your published package's package.json file, rather just mention them as peerDependencies
2.(how usually I solve this issue): mention inside the webpack.config.js file :
resolve: {
alias: {
react: path.resolve("./node_modules/react"),
},
},
Simple, when you create your package, dont specify any version to react
in dependency add "react:": "*"
This will mean that it will use whatever react version that are installed on the user project
I have a monorepo which exposes a TypeScript module, which is consumed & used by a React TypeScript project.
When the module inserts arbitrary React elements to the virtual DOM - everything works as expected, including when I try to use React Router (which was initially problematic but I was able to fix that).
However, when I try to use react-intl, via FormattedMessage, I get the error:
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
Which is especially annoying as I see this printed in the console logs:
The above error occurred in the <Context.Consumer> component:
in FormattedMessage
in h2
in div
in Loading (at App.tsx:11)
in IntlProvider (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)
(note the IntlProvider wrapping Loading - which is the element that uses FormattedMessage which can't find IntlProvider).
I imagine this is somehow related to versioning, or having 2 instances of React / React DOM / IntlProvider, but I have no idea to how solve this, and I have spent quite a lot of time trying everything I could think of.
For what it's worth, here's what I use:
TypeScript - for both module and project
Webpack to pack the module, where I declared React, ReactDOM and react-intl as externals and added them as peerDependencies rather than direct dependencies
create-react-app for the project
I was able to create a minimal repro repository, here's how to repro my issue:
<cd somewhere>
git clone https://github.com/chakaz/repro-repo .
cd repro-lib
npm install
npm run build:dev
cd ../project
npm install
npm run start
Anyone has any idea? Tons of thanks in advance!
With your above way in order to make it work, you have to delete node_modules in your repro-lib dir cause it will install dependencies in both dirs.
So in order to resolve problem of monorepo, I'd like to suggest you use yarn's workspace functionality as described carefully here: https://classic.yarnpkg.com/en/docs/workspaces/
To summary, it's a great functionality to help working with multiple workspaces by just only yarn install once.
Here are a few steps to make your repo working:
Put package.json at the root level of the project with following content:
{
"private": true,
"workspaces": ["project", "repro-lib"]
}
Go to project dir and replace following line in package.json:
"pf-common": "file:../repro-lib"
to
"pf-common": "1.0.0"
Finally, just go back to root top level install deps again:
yarn install
That's it! Now you can re-run your application to see how it works.
NOTE: In terms of having interest in monorepo, lerna is also great tool comes to help by providing great CLI.
I have installed Jest v17.0.3 in my react project.
When I run jest locally it works fine, but on the build server it fails with:
Error: Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'
Both machines are running node version 6.9.1 and npm version 4.0.2.
use same version of react and react-dom. My problem fixed after using this command
npm install --save react#15.4.0 react-dom#15.4.0
this problem specially occurs on react 15.4.0 above.
Can you check which version of React you are using? Is it the same on both servers? I would try removing node_modules and reinstalling the dependencies. The reason I am suggesting this is that in React v15.4.0 you cannot import private apis and it seems that ReactDebugTools.js is trying to import from react/lib/....
From the blogpost about React v15.4.0 (Link):
However, there is a possibility that you imported private APIs from react/lib/*, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.
Hope this helps!
In the latest versions of react we often see this error as we have loaded 2 versions of react:
To make sure you have just 1 version, run the following in your terminal:
npm ls react-dom
npm ls react
Both the react and react-dom versions need to be same.
If any one of these returns more than 1 version then that's not supported. You have to then correct it in your corresponding package.json
I had the same issue and i removed the node_modules and ran npm install and it fixed the problem.