I'm having some trouble with a piece of code in React.
I've created a gh repo that reproduce the error : https://github.com/AnatoleLucet/next-issue
I'm trying to do a hook that gets some local data (in my real app it's a translation system, but you get the idea). Thing is, I pass each "part" of my data (see data/myData.ts and data/index.ts) in a function called formatData, this function is declared in the same file as my hook (hooks/myHook.ts). Then when I use my hook in a component (see pages/index.tsx) I get the following error :
I don't understand why the browser (or webpack ?) doesn't initialize formatData at the right time...
I'm using Nextjs but I don't think it's related to the issue, although I haven't tried on a "vanilla" React project.
As a temporary fix, I can move formatData to another file like utils/data.ts.
You have a circular dependency.
hooks/myHook.ts imports from data/index.ts
data/index.ts imports from data/myData.ts
data/myData.ts imports from hooks/myHook.ts
Related
I am working on MUI template and when I make changes i have seen it is showing errors that usually does not matter. e.g if I import a component in a file but i decide not to use it , react will show me error saying something like this
Line 12:3: 'Story' is defined but never used no-unused-vars
in one of my file I decided not to use this (story) component and react showed me this error. its annoying when u have a lot of changes to make and you keep getting these kinda errors. how can I get rid of these kind of errors permanently
First solution is to remove any unused imports, and declarations of variables/methods/components.
The second solution is to paste this link above your line
//eslint-disable-next-line
I want to use i18n react useTranslation hook inside Context component. I guess that important thing is that the context was working correctly as long as useTranslation hook was used inside if statement which breaks the rules of hooks and sonarcloud mark this as A rate bug. But as I moved useTranslation call on the very top of the component I get following error:
Error: Should have a queue. This is likely a bug in React. Please file an issue.
And this inside console
The context and project itself is quite large so I am not sure how to provide enough code to present the problem.
As it turned out someone working on the project in the past didn't wrap LocaleContext over the Context I was struggling to repair so in my case all I had to do was following slight change from this:
<MyContext>
</LocaleContext>
<Component />
</LocaleContext>
</MyContext>
to this:
<LocaleContext>
<MyContext>
<Component />
</MyContext>
</LocaleContext>
Our React-Redux App uses create-react-app. We’re trying to back-apply Jest/Enzyme/redux-mock-store to a large code base. Our src/store.js file is the standard react-redux script that runs the reducers and constructs an initial state. This src/store.js is central to the problem.
Problem is that when we start the jest test-run, jest loads src/store.js 7 times, and then (roughly) once for every test. I must suppress this and can’t figure out how. The reason I must suppress it is that it always leaves the store in its initial state and there is one crucial AppConfig property in that store which must be populated to prevent javascript errors that stop jest. I already have a function which returns a mock store for use with the Provider. That works well. But our components call out from constructor(), componentDidMount(), etc to api functions. Those api functions don’t see the state dropped from Provider. Instead, the api functions do stuff like this:
// AppConfig is an immutable Map
const { AppConfig } = store.getState();
const stuff = AppConfig.get(‘stuff’).toJS();
That’s a JS error because AppConfig is empty and toJS() is called on undefined. (That can never be a problem in run-time because we construct no component without AppConfg being ready.) There are 2 solutions involving refactoring the App that I can do. But I’d rather figure out how to properly use jest. How can I supply the mock redux state without it getting clobbered by jest's repeated loads of src/store.js???
This is killing me. What in Jest, create-react-app, or ??? initiates these unwanted loads of src/store.js? How to override? Is there a config that causes jest to call my function instead of src/store.js?
I figured out my own problem. Will post here in case someone else that is new with jest may benefit from my folly.
Jest does not load src/store.js. The culprit is my shallow component tests because the components have statements like this:
import StuffService from '../../api/stuff';
The calls to the api from the component look like this:
// e.g. from componentDidMount
StuffService.get.myRequest();
But in the es6 module that defines StuffService, at the top we have something like:
import store from '../../store';
// lower in the js file, we have code as shown in my previous post:
const { AppConfig } = store.getState();
That's what is causing src/store to keep running. Will study Jest's Manual Mocks for a solution.
Hi I am quite new to reactjs but I started to understand few things. But this one giving me a headache, I have a small reactjs component that will be added in an existing site. The problem is inside my component I wanted to use a function in a JS file that is declared masterpage of the site. The name of the function I want to access is "SPClientPeoplePicker_InitStandaloneControlWrapper", so whenever I build my component I get the following error :
'SPClientPeoplePicker_InitStandaloneControlWrapper' is not defined no-undef
I tried using windom.SPClientPeoplePicker_InitStandaloneControlWrapper but the problem is in window "SPClientPeoplePicker_InitStandaloneControlWrapper" is giving me a different function. It would be nice if that library can be scoped inside my component
I tried calling library using import but it didnt work
import clientforms from "https://standardsSite.com/_layouts/15/clienttemplates.js";
I solve the problem I use loadjs its very handy.
loadjs(
[
"https://mysharepointsite.com/_layouts/15/clienttemplates.js",
"https://mysharepointsite.com/_layouts/15/clientforms.js",
"https://mysharepointsite.com/_layouts/15/clientpeoplepicker.js",
"https://mysharepointsite.com/_layouts/15/autofill.js"
],
"SPLibrary"
);
let self = this;
loadjs.ready("SPLibrary", function() {
self.handleSubmit(self.props.name);
});
I'd like to get the 'basic' (US States) example of the nifty react-magic-move component working at JSFiddle, for tinkering. (See also impressive video demo at https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424)
I've added the react-magic-move 'dist' script to the Base React (JSX) fiddle, plus the other (minimally-adapted) example JS/CSS/HTML. You can see the attempt here:
http://jsfiddle.net/69z2wepo/4692/
However, it's triggering an error late-in-initial-rendering:
Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's 'render' method). Try rendering this component inside of a new top-level component which will hold the ref.
It's clearly loading the MagicMove code and succeeding on most of the rendering: after the error, the real-DOM has been assembled. Including the dist script after React ought to work.
Thinking it might be a problem specific to JSFiddle's panes, I tried the same setup in local files: same error. Thinking it might be a JSX-in-browser interaction, I tried precompiled JSX: same error. (See http://jsfiddle.net/5vjqabv3/325/). First got the error with React 0.13.1; tried rolling back to 0.12.0's base fiddle: same error. (See http://jsfiddle.net/kb3gN/10548/)
At the moment of the exception, the current element (ReactElement, div, ref 'AL') has a null _owner property – which seems off.
Any ideas what's preventing the necessary React-owner-relationship from being set up? Is the react-magic-move dist script broken or otherwise unusable in this desired 'load-after-React' manner?
This is what I did to get the examples working locally
git clone git#github.com:ryanflorence/react-magic-move.git
cd react-magic-move
npm install
scripts/dev-examples
now open up http://localhost:8080/basic/ in your browser, and it works somehow
I had a similar situation with a different react module. What we did was add an alias to our webpack.config.js named react that pointed to our node_modules/react. This keeps any other instances of react from loading. It would look like this
alias: {
'react': path.join(__dirname, 'node_modules', 'react')
},