I wanted to use React Bootstrap Table in my project and I'm getting the following error.
Uncaught ReferenceError: arguments is not defined at Object../node_modules/react-bootstrap-table2-toolkit/lib/src/search/SearchBar.js
here is the following import which are referred from their official website.
import ToolkitProvider, {Search} from 'react-bootstrap-table2-toolkit';
const {SearchBar} = Search;
where search can not be found from this import.
Here is an easy fix, I resolved this issue by changing the import
from
import ToolkitProvider, {Search} from 'react-bootstrap-table2-toolkit';
to
import ToolkitProvider, {Search} from 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit';
The fix isnt still in place; change your import pointing to the .min file of toolkit
replace this
import ToolkitProvider, { CSVExport } from "react-bootstrap-table2-toolkit";
with this
import ToolkitProvider , { CSVExport } from 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min'
My App was working fine and suddenly i got this error.
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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
import { useContext } from "react";
import jwtDecode from "jwt-decode";
import AuthContext from "./context";
import authStorage from "./storage";
const useAuth = () => {
const { user, setUser } = useContext(AuthContext);
const logIn = (authToken) => {
const user = jwtDecode(authToken);
setUser(user);
authStorage.storeToken(authToken);
};
const logOut = () => {
setUser(null);
authStorage.removeToken();
};
return { user, logIn, logOut };
};
export default useAuth;
All looks fine. except maybe actually importing React
import React, { useContext } from "react";
I know you don't need this for React from React 17, but there's no official statement from react native saying they use the new JSX compiler that doesn't require the import statement
also check the AuthContext file you imported
I'm working on getting firebase working for a webapp project for class. It has not been easy. I keep getting errors, and every change I make creates a different error. Firebase is initialized in the project. Here is my most recent error:
>provider.ts:239 Uncaught Error: Component analytics has not been registered yet
>>at Provider.initialize (provider.ts:239),
>>at initializeAnalytics (api.ts:108),
>>at firebase-config.js:23,
>>>initialize # provider.ts:239,
>>>initializeAnalytics # api.ts:108,
>>>(anonymous) # firebase-config.js:23
This error seems to be stemming from my firebase-config file, but I'm genuinely lost:
// Import the functions you need from the SDKs you need
//import * as firebase from 'firebase/app';
import { initializeApp } from '../node_modules/firebase/firebase-app.js';
import { initializeAnalytics , getAnalytics } from '../node_modules/firebase/firebase-analytics.js';
const firebaseConfig = {
[config keys]
};
// Initialize Firebase
const fb_app = initializeApp(firebaseConfig); // returns an app
initializeAnalytics(fb_app); // added to circumvent error, but it still appears.
const analytics = getAnalytics(fb_app);
console.log(analytics);
export {fb_app};
Any help would be appreciated. Thanks
If you are using v9 SDK, your import statements must be
import { initializeApp } from 'firebase/app';
import { initializeAnalytics , getAnalytics } from 'firebase/analytics';
Not the files directly.
There is a relevant discussion here: https://issueexplorer.com/issue/firebase/firebase-js-sdk/5597
I Also Faced Same issue in React-native-web With webpack project. It was Just Conflict Issue in Webpack CompileLibs Dependencies. If You have "firebase" in Your webpack.config.js file remove from there.
In my project I am successfully using render and screen from #testing-library/react, However everytime I do screen.getAllBy or screen.getByRole or anything else other than getByText I am getting such errors. One of them was,
typeerror: _react2.screen.getAllBy is not a function
This occurred upon the usage of screen.getAllBy.
My imports includes,
import React from 'react';
import { render, screen } from '#testing-library/react';
import { BrowserRouter } from 'react-router-dom;
import TestComponent from './TestComponent';
Am I missing an import or is there something wrong with my code?
it (`Testing Component`, () => {
render(<BrowserRouter><TestComponent /></BrowserRouter>
expect(screen.getAllBy('li')).toBeInTheDocument();
});
getAllBy is just one of the variants of the queries. Complete query would be getAllByLabelText, getAllByRole etc. Check the react-testing-library docs about Queries.
I have a file test_stuff.js that I am running with npm test
It pretty much looks like this:
import { assert } from 'assert';
import { MyProvider } from '../src/index';
import { React } from 'react';
const myProvider = (
<MyProvider>
</MyProvider>
);
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});
Unfortunately, I get the error
/Users/me/projects/myproj/test/test_stuff.js:11
var myProvider = _react.React.createElement(_index.MyProvider, null);
^
TypeError: Cannot read property 'createElement' of undefined
at Object.<anonymous> (/Users/me/projects/myproj/test/test_stuff.js:7:7)
What does that mean? I am importing React from 'react' successfully, so why would React be undefined? It is _react.React, whatever that means...
To import React do import React from 'react' You add brackets when the thing you are importing is not the default export in that module or file. In case of react, it's the default export.
This might apply to your other imports depending on how you defined them.
import React, { Component } from 'react'
This worked for me. I'm not sure why it fixed my version of this issue, though. So if you are someone who stumbled upon this problem and you use create-react-app as your starting boilerplate, this way of importing React will do the trick. (as of Oct '18, lol)
For those who are working ReactJS with TypeScript.
import * as React from 'react';
This error occured to me due to carelessness. It's actually
import React from 'react';
Brackets are for named exports such as this:
import React, { useState, useEffect } from 'react';
This issue occurred while importing React from react, I placed it inside curly brackets.
Please do this:
import React, {useState} from "react";
Instead of:
import {React, useState} from "react";
Trying to use destructor for importing the React object may cause you problems like this import {React} from 'react';.
This might be the cause of the error 90% of the time running this code above.
rather use:
import React from 'react';
And then you can access any member of the React class via:
React.
Change:
import { React } from 'react' to import React from 'react'
Because React is a default export and you don’t need curly braces for any default exports.
If in case you need to import multiple classes from 'react', you can have an alias for them except React. Something like,
import React, * as react from 'react';
React is exported by default in that module, no need {}.
I got this when trying to mock a component when unit testing but was not setting it up correctly
What I was doing that caused the error:
jest.mock("./SomeComponent", () => {
return <div>MockSomeComponent</div>
});
What I needed to do:
jest.mock("./SomeComponent", () => {
return () => <div>MockSomeComponent</div>
});
This error can be occured due to carelessness. Please add
import React from 'react'
It will be resolved after that