I'm setting up a new React with the help of: Create React App
However, I'm running into a linting issue. I'm receiving the following linting error 'PropTypes' is not defined. (no-undef).
Here is the code that is causing the issue:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Routers extends Component {
static propTypes = {
history: PropTypes.object.isRequired
};
...
I tried playing around with the react/prop-types rule, but to no avail.
Since react 15.5, PropTypes is included in a separate package, 'prop-types'.
So this line will help
import PropTypes from 'prop-types'
You can read more here
According to this issue comment.
It appears to be because you have installed eslint 4.x when you should just use the eslint version that is shipped with create-react-app. You should remove any eslint you have manually installed and use the one that comes with the repo.
I had the same problem on a project with eslint installed globally.
I solved this case by installing eslint manualy in the project:
npm i eslint --save
bye
jeff
Please Install prop-types
using this code:
npm install --save prop-types
If you're using <script> tags; you can add this tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js" integrity="sha512-ssNhh7jlzc+K93ckIlSXFHHz6fSFv0l619WOv8xbFNRbFOujbasb42LVMOggDrQR1ScJncoWb+KAJx1uF3ipjw==" crossorigin="anonymous"></script>
You can get the minified/non-minified and other version here
Good Luck...
Please install the prop-types npm package - react 1.15 and greater on separate package is created.
Here to install package
You can place the PropTypes just after the class (outside the class):
Routers.propTypes = {
history: PropTypes.object.isRequired
}
Related
I'm trying to introduce React Testing Library into Create React App project, and I'm hitting a strange problem. For one of my tests, I need to use jest-dom, but I can't seem to import it successfully.
I've yarn add'ed it, and can't think of what step I missed.
expect.extend fails because its toHaveStyle is undefined.
Here's my test file, reduced down to the minimum:
import React from 'react';
import {render, screen} from '#testing-library/react';
import {toHaveStyle} from '#testing-library/jest-dom';
import '#testing-library/jest-dom/extend-expect';
//expect.extend({toHaveStyle});
it('is confusing me', () => {
// (Using `toBe(42) as an ersatz `console.log`)
expect([Object.keys(require('#testing-library/jest-dom')), Object.keys(require('#testing-library/react')), toHaveClass]).toBe(42);
});
The output is:
Expected: 42
Received: [[], ["render", "cleanup", "fireEvent", ...], undefined]
And, here's the relevant part of yarn.lock:
"#testing-library/jest-dom#^5.7.0":
version "5.7.0"
resolved "https://registry.yarnpkg.com/#testing-library/jest-dom/-/jest-dom-5.7.0.tgz#b2e2acb4c088a293d52ba2cd1674b526282a2f87"
integrity sha512-ZV0OtBXmTDEDxrIbqJXiOcXCZ6aIMpmDlmfHj0hGNsSuQ/nX0qPAs9HWmCzXvPfTrhufTiH2nJLvDJu/LgHzwQ==
dependencies:
"#babel/runtime" "^7.9.2"
"#types/testing-library__jest-dom" "^5.0.2"
chalk "^3.0.0"
css "^2.2.4"
css.escape "^1.5.1"
jest-diff "^25.1.0"
jest-matcher-utils "^25.1.0"
lodash "^4.17.15"
redent "^3.0.0"
"#testing-library/react#^10.0.4":
version "10.0.4"
resolved "https://registry.yarnpkg.com/#testing-library/react/-/react-10.0.4.tgz#8e0e299cd91acc626d81ed8489fdc13df864c31d"
integrity sha512-2e1B5debfuiIGbvUuiSXybskuh7ZTVJDDvG/IxlzLOY9Co/mKFj9hIklAe2nGZYcOUxFaiqWrRZ9vCVGzJfRlQ==
dependencies:
"#babel/runtime" "^7.9.6"
"#testing-library/dom" "^7.2.2"
"#types/testing-library__react" "^10.0.1"
Well, jest-dom documentation has been updated.
import {toHaveStyle} from '#testing-library/jest-dom';
would not work anymore. Instead,
import {toHaveStyle} from '#testing-library/jest-dom/matchers'
For reference, see jest-dom
Here is how I use this great library :
// in test file
import '#testing-library/jest-dom/extend-expect';
[...]
// then matchers are available in tests
expect(rtl.getByText('text').toHaveClass('some-class');
My import is slightly different than yours, I could not say precisely what goes wrong with yours but this is how I do.
Good luck !
module not found can't resolve node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in react 17
Okay so if there is anyone looking at this in 2022+ year, After downgrading from react-v18 to react-v17 I faced this issue. I had to run certain commands.
npm install web-vitals#1.0.1
npm install babel-loader --save-dev
npm install -D babel-loader #babel/core #babel/preset-env webpack
I also moved my #testing-library/jest-dom,#testing-library/react,#testing-library/user-event to devDependencies and downgraded them
Worked like a charm.
I am trying to import elements from react semantic ui like this after installing via npm.
import React, { Component } from "react";
import "./App.css";
import { Button } from "semantic-ui-react";
class App extends Component {
render() {
return <Button>hi</Button>;
}
}
export default App;
But i get this error.
I guess the app was already running when you installed semantic-ui package, therefore, the appropriate file were not loaded.
Keep in mind to restart your app after installing every package or simply stop it before installing.
There are two possible scenarios for this error:
1.Hot module reload not working: Sometimes the npm does not automatically reload the pages, so re-starting the app would solve this problem.
2.Yarn / NPM mismatch: Some packages (especially semantic-ui) throws error when there is a mismatch with package-json and yarn.lock. It is recommended to stick with yarn package manager if you are using yarn.
Hope this helps :)
I have tried installing react icons, in my application I ran the npm command:
sudo npm install react-icons --save
I didn't get any errors, apart from some optional dependencies, that where skipped
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.4
(node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
fsevents#1.2.4: wanted {"os":"darwin","arch":"any"} (current:
{"os":"linux","arch":"x64"})
Whenever I try to import some of the icons, I get an error
./src/components/SkiDaysCount.js
Module not found: Can't resolve 'react-icons/lib/md' in '
'/home/kristoffer/ReactApps/navbar/src/components'
here are my imports:
import {Terrain} from 'react-icons/lib/md'
import {SnowFlake} from 'react-icons/lib/ti'
import {Calender} from 'react-icons/lib/fa'
Why am I getting this error?
EDIT:
i have also tried using the old syntax for importing, with the same issue as such:
import Calender from 'react-icons/lib/fa/calender'
When you use the v3 way of importing the icons, you should not have lib be a part of the import path.
The icons also have the icon library name as prefix for the export.
import { FaCalendar } from 'react-icons/fa'
After looking through the icon directories react-icons/[fa,ti,md] and looking at the index.dt.ts file for the new names of the icons I came up with your answer.
import { MdTerrain } from "react-icons/md";
import { TiWeatherSnow } from "react-icons/ti";
import { FaCalendarAlt } from "react-icons/fa";
To use the icons in your component use the tags:
<FaCalendarAlt />
<TiWeatherSnow />
<MdTerrain />
For an explanation look at the Migration from version 2-> 3 on the react-icon page.
https://www.npmjs.com/package/react-icons
Not all the fa icons are free. I was getting this error when I was trying to import the paid icon of pencil as below.
import { FaPencil } from 'react-icons/fa'
If you see here for all the fa icons, you can see that the pencil needs the pro license.
As I was not having a pro license, I was getting the error. But we can always use the free versions of pencil, and we just need to import it as below.
import { FaPencilAlt } from 'react-icons/fa'
<button><FaPencilAlt /></button>
You should also check the implementation of your version from here.
If you have installed the 3.0.5 version of react-icons, Do try :
For Pencil(Edit):
import {FaPencilAlt} from 'react-icons/fa'
For Trash Can (Delete):
import {FaTrash} from 'react-icons/fa'
import {FaHiking, FaRightAlign,...} from 'react-icons/fa'
from the v3 of react icons library '/libname' is mandatory.
libname as 'fa'-> fontawesome, 'fi'->feathericons. for more info visit
https://react-icons.netlify.com/#/
maybe you have to update the "react-icons" package.
command:
npm update react-icons
This can also be caused by typo error.
say
import {Haiking) from 'react-icons/fa'
instead of
import {Hiking) from 'react-icons/fa'
perhaps you are in yarn mode and you need to use yarn add instead of npm install to install a package.
import { FaCalendar } from 'react-icons/fa';
import { MdTerrain } from "react-icons/md";
Mine was such an easy fix after all. All I needed was the full import name of the icon, even if just one icon always put curly {} and that was it fixed!
How many times do I delete node modules, install #latest and then realise ist the curlies! :-)
import {GoMail} from "react-icons/go";
guys!
Did anybody got
"Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead."
while using React 15.5.3 "react-transition-group/CSSTransitionGroup" add-on.
It looks like this addon uses old PropTypes.
Do somebody know how to avoid this Warning for this add-on?
It has been deprecated After React version 15.5. Hence you need to install it separately.,
Install: npm install prop-types
import React from 'react';
import PropTypes from 'prop-types';
class Component extends React.Component {
render() {
return <div>{this.props.text}</div>;
}
}
Component.propTypes = {
text: PropTypes.string.isRequired,
};
Edit: You need to get updated package for add-on compatible with react latest updates. It the package is yet not updated, you can make changes to them ypurself.
This bug fixed automatically when I updated "react-transition-group" to latest version. It looks that the npm package now works on PropTypes from 'prop-types'.
I have problem with writing in TypeScript & ReactJS. I have no idea how to import external libraries and use them properly in the code.
I'm trying to use react-autosuggest in my project so I'm:
Installing react-autosuggest with npm install --save react-autosuggest
Installing typing for this library with typings install --global --save dt~react-autosuggest
going to file where I want to use this and trying to import that and use
Here I have problem, because I still have problems with importing it.
When I'm trying to import it with import * as autosuggest from 'react-autosuggest' I'm getting error
error TS2497: Module ''react-autosuggest'' resolves to a non-module entity and cannot be imported using this construct.
When I'm importing with import Autosuggest from 'react-autosuggest' another error appears:
error TS1192: Module ''react-autosuggest'' has no default export.
Could you guide me how to do it?
To fix your import use require:
import AutoSuggest = require("react-autosuggest");
new AutoSuggest();
The export of the module is done with the export = syntax. Refer to this SO for details on why you need to import this with require: https://stackoverflow.com/a/29598404/5324369