This morning I had this error in my react application: SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021.
I saw that react must be updated, that's what I did and I went to version 17.0.2 of react-dom and react.
But I only get errors like this:
TypeScript error in ... : Generic type 'ValueType' requires 2 type argument(s). TS2314
I have tried to solve them, but when I solve one error, another comes up and it goes on and on.
Note: I get the project from a former developer who did not provide me with any doc and the code is not commented on so my radius of action is very small
Related
This problem is killing me, but I keep getting this error when I compile and run (I am using .NET Core 3.0 with react app):
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
The error points to my ../src/index.js file:
Here is the error displayed
Here is the code that is flagged with the invalid hook call error
I'm not sure what's going on, i spent the past 3 hours trying to fix it but I just can't get the homepage to show.
I understand the hooks error, but I don't understand why its getting called.
I have the matching versions of React and React DOM, 16.13.1
For my react components, I use classes.
I'm not sure how to check for different copies of react
I'm quite new to React so maybe i misunderstood or messed up somewhere, please help me here, thank you.
EDIT:
Check if redux is installed on the client. This error occurs when it isn't installed on client directory but server directory.
check package.json of client.
Maybe a crazy solution but in my case nothing was actually wrong with my code. I was going nuts trying to find the error. But what actually helped, was upgrading the version of Typescript installed in my project from 4.4 to 4.9. Don't see any evident connection but after the upgrade everything worked like a charm. :)
yesterday I was able to create my react babylon app with react-scripts. After updating babylon to 4.1.0 I receive the following error:
./node_modules/babylonjs/babylon.js TypeError:
/git/proconf_sa/node_modules/babylonjs/babylon.js: Property left of ForInStatement expected node to be of a type [“VariableDeclaration”,“LVal”] but instead got null
Any idea what the problem could be? I updated from version 3.1.0-alpha3.7.
Thanks.
I was facing the same problem, however using Angular. I resolved by removing a package that uses svg.js#2.7.1 !!! From what you discover, this error is caused by the discontinued version of svg.js#2.7.1 !!! Look inside your application that there is a package using this and remove it!
If using apexcharts update it, because it depends on svg.js!
(NOTE: Sorry for possible errors in my writing, I'm Brazilian, I'm having to use Google translator to write this)
I've recently started using TypeScript with Expo. I've done all the linter/formatter integrations like typescript-eslint so I can catch most of the errors during coding. To check if the code compiles, I run npx tsc every once in a while and fix accordingly.
One thing that I haven't fully grasped yet is why my app builds successfully even when there are numerous compile errors. I expect (and prefer) to see a red screen error for every compile error rather than the app build successfully and me find it out later. For example,
function square<T>(x: T): T {
console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'.
return x * x;
}
is a typical TypeScript error that (I believe?) can be easily checked at compile time. I want it to result in a big red screen error and the build to fail.
I'm quite new to TypeScript so it's possible that I'm missing something very important. What exactly is causing this leniency and is there a way to enforce stricter checks?
The first thing to understand is that Typescript is a superset of Javascript, and in this case it doesn't actually get type checked during compilation.
Essentially what happens is Babel just strips out the Typescript and converts it to Javascript, which then gets compiled into the js bundles.
You can take a look at the first line of the following Babel docs as well as the caveats:
https://babeljs.io/docs/en/next/babel-plugin-transform-typescript
Since Babel does not type-check, code which is syntactically correct, but would fail the TypeScript type-checking may successfully get transformed, and often in unexpected or invalid ways.
What I would suggest is extending your build command to first include tsc or rather Typescript compilation, with noEmit set to true in your tsconfig.
Update: I found another instance where this applies recently when adding jest and typescript to a project. At the bottom of the Jest docs they actually state the same thing:
https://jestjs.io/docs/en/getting-started#using-typescript
However, there are some caveats to using TypeScript with Babel. Because TypeScript support in Babel is transpilation, Jest will not type-check your tests as they are run. If you want that, you can use ts-jest.
The straight answer to this question is: Babel, strips out all typescript marks before compiling. Therefore you won't see it erroring out in the cli.
While upgrading to React 16.9 i am getting the following error. The problem is that i do not have component named: "t". how can i get the real name of it? I don't have unsafe methods on my code so i assume its related to 3rd party lib.
bundle.js:174471 Warning: componentWillReceiveProps has been renamed, and is not recommended for use
Move data fetching code or side effects to componentDidUpdate.
If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static
getDerivedStateFromProps. Learn more at:
Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the
UNSAFE_ name will work. To rename all deprecated lifecycles to their
new names, you can run npx react-codemod rename-unsafe-lifecycles in
your project source folder.
Please update the following components: t
I experienced the same after upgrading to React 16.9.
It is not easy to track down the root of the warnings (I switched parts of the code on/off until I had the warning isolated).
For me it turned out to be the react-moment library. There's an open issue in that project to resolve the warning: https://github.com/headzoo/react-moment/issues/96
Is Deprecated lifecycles warning when using react 16.9.0
React 16.9 Deprecation Will warning
I'm trying to build a game in Clojurescript using Reagent and React-Pixi, but as soon as I try to do anything I get:
Error: Invariant Violation: PIXIStage.render() A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
A minimal case to reproduce this is:
(ns react-sprites.core
(:require [cljsjs.react-pixi]
[reagent.core :as r]))
(def stage (r/adapt-react-class js/ReactPIXI.Stage))
(defn root [] [stage {:width 300 :height 300}])
(r/render-component [root]
(. js/document (getElementById "app")))
specifically, using the react-pixi and reagent versions:
[reagent "0.6.0-rc"]
[cljsjs/react-pixi "0.8.1-0"]
Additional Information
I've gone and traced around in the debugger, and the invariant violation is being thrown on a canvas that's being generated by React.createElement("canvas") in ReactPIXI's render() method, so apparently the canvas being created isn't a valid ReactComponent. I really don't know where to go from here.
It turns out that the problem here came down to a version incompatibility. I thought I was running on Reagent 0.6 and using the latest React, but it seems like the app didn't get properly updated and was still using 0.5.1 which uses a React version that's incompatible with react-pixi's. To fix it, I had to force the update, at which point it started working. While reproducing this issue I also had problems with the browser cache.
In summary, things worth trying include:
$ lein clean
# edit the dependency information
$ lein figwheel
Clearing cache
Downgrading then upgrading versions (perhaps?)
As a side note, I was led astray by a combination of other error messages I found while debugging, some of which warn about the possibility that there were multiple React versions running on the page. Since I didn't get one of those, I had prematurely ruled out the possibility.
There is a library called puck, which is a ClojureScript wrapper around PixiJS. This may be another route to apply ClojureScript in building game.