I've installed formik and yup using npm install formik and npm install yup.
They appear in package.json in dependencies object.
In my file they are imported like:
import * as Yup from 'yup';
import { Formik, Form, Field } from 'formik';
but when I run npm start I get this error message:
Line 3:22: Unable to resolve path to module 'yup' import/no-unresolved Line 5:37: Unable to resolve path to module 'formik' import/no-unresolved
What is the reason of this? Maybe it is something related to eslint.
My eslintrc:
{
"extends": [
"airbnb",
"react-app",
"prettier",
"prettier/flowtype",
"prettier/react"
],
"rules": {
// Allow jsx tags inside .js files.
"react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}],
// Disable props spreading (<App {...props} />) warning.
"react/jsx-props-no-spreading": 1,
// Throw warning instead of error when using array index as a key.
"react/no-array-index-key": 1,
// Disable react prop-types validation
"react/prop-types": 0,
// Allow modules with named exports only.
"import/prefer-default-export": 0,
// Throw warning instead of error. Feel free to choose your favorite option https://eslint.org/docs/rules/arrow-body-style
"arrow-body-style": ["warn", "as-needed"],
// Make prettier code formatting suggestions more verbose.
"prettier/prettier": ["warn"],
// Throw warning when <a href="#"> or <a href="javascript:void(0)"> are used. Use <button> instead.
"jsx-a11y/anchor-is-valid": ["warn", {"aspects": ["invalidHref"]}],
// Allow using (props) => <Component /> and ({propName}) => <Component /> syntax.
"react/destructuring-assignment": "off",
// Disable <Fragment> => <> replacement. Feel free to change
"react/jsx-fragments": "off",
// Below is the set of functional rules to warn developer about accidental mutations, which may cause error in reducers etc.
// No delete operator.
"fp/no-delete": "warn",
// Warning when Object.assign(a, b) used, since it mutates first argument. Object.assign({}, a, b) is ok.
"fp/no-mutating-assign": "warn",
"no-underscore-dangle": 0,
"import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
},
"plugins": ["prettier", "fp"],
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "./src"]
}
}
}
}
My package-json:
{
"name": "graab-bo-front",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.3",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-fp": "^2.3.0",
"eslint-plugin-prettier": "^3.1.2",
"formik": "^2.1.4",
"husky": "^4.2.3",
"lint-staged": "^10.0.0",
"node-sass": "^4.13.0",
"prettier": "^1.19.1",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-semantic-ui-datepickers": "^2.7.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-mock-store": "^1.5.4",
"redux-saga": "^1.1.3",
"reduxsauce": "^1.1.2",
"semantic-ui-react": "^0.88.2",
"yup": "^0.29.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"fix": "eslint --fix ./src/",
"lint": "eslint ./src/",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"devDependencies": {
"@storybook/addon-actions": "^5.3.18",
"@storybook/addon-links": "^5.3.18",
"@storybook/addons": "^5.3.18",
"@storybook/preset-create-react-app": "^2.1.2",
"@storybook/react": "^5.3.18"
}
}