# upgrade npm to latest LTS
nvm install --lts
# install deps
npm install --legacy-peer-deps
...
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'material-kit-2-pro-react@2.0.0',
npm WARN EBADENGINE required: { node: '14 || 15 || 16', npm: '>=6' },
npm WARN EBADENGINE current: { node: 'v18.12.1', npm: '8.19.2' }
npm WARN EBADENGINE }
...
npm start
Starting the development server...
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (/Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/react-scripts/scripts/start.js:19
throw err;
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (/Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/webpack/lib/NormalModule.js:417:16)
at /Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/webpack/lib/NormalModule.js:452:10
at /Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/webpack/lib/NormalModule.js:323:13
at /Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /Users/lmaitre/Workspaces/Expansible/lab-website/website/node_modules/babel-loader/lib/index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.12.1
Upgrade to react-scripts v5 to fix ERR_OSSL_EVP_UNSUPPORTED error.
Use --legacy-peer-deps when installing modules in install:clean target.
Then fix swiper imports.
Then fix conditional use of useContext hook.
Here is a patch:
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index fc5047e..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
- "env": {
- "browser": true,
- "es2021": true
- },
- "extends": ["plugin:react/recommended", "airbnb", "prettier"],
- "parserOptions": {
- "ecmaFeatures": {
- "jsx": true
- },
- "ecmaVersion": 12,
- "sourceType": "module"
- },
- "plugins": ["react", "prettier"],
- "rules": {
- "prettier/prettier": [
- "error",
- {
- "endOfLine": "auto"
- }
- ],
- "react/react-in-jsx-scope": "off",
- "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
- "react/jsx-props-no-spreading": [
- 1,
- {
- "custom": "ignore"
- }
- ],
- "react/jsx-curly-spacing": [2, "never"]
- },
- "settings": { "import/resolver": { "node": { "paths": ["src"] } } }
-}
diff --git a/package.json b/package.json
index 3be496a..577cc92 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
"react-dom": "17.0.2",
"react-flatpickr": "3.10.7",
"react-router-dom": "6.0.2",
- "react-scripts": "4.0.3",
+ "react-scripts": "5.0.1",
"react-syntax-highlighter": "15.4.5",
"rellax": "1.12.1",
"swiper": "7.3.4",
@@ -49,7 +49,7 @@
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
- "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
+ "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install --legacy-peer-deps && npm start"
},
"eslintConfig": {
"extends": [
diff --git a/src/components/MKPagination/index.js b/src/components/MKPagination/index.js
index 6901081..c8e69d0 100644
--- a/src/components/MKPagination/index.js
+++ b/src/components/MKPagination/index.js
@@ -29,7 +29,10 @@ const Context = createContext();
const MKPagination = forwardRef(
({ item, variant, color, size, active, children, placement, ...rest }, ref) => {
- const context = item ? useContext(Context) : null;
+ let context = useContext(Context);
+ if (item == null) {
+ context = null;
+ }
const paginationSize = context ? context.size : null;
let placementValue = "flex-end";
diff --git a/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/code.js b/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/code.js
index ac104e8..6820e7f 100644
--- a/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/code.js
+++ b/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/code.js
@@ -4,11 +4,11 @@ const testimonialsTwoCode = `import { useRef } from "react";
import SwiperCore, { Autoplay, Navigation } from "swiper";
// SwiperJS react components
-import { Swiper, SwiperSlide } from "swiper/react/swiper-react";
+import { Swiper, SwiperSlide } from 'swiper/react';
// SwiperJS styles
-import "swiper/swiper.min.css";
-import "swiper/modules/navigation/navigation.min.css";
+import 'swiper/css';
+import 'swiper/css/navigation';
// @mui material components
import Container from "@mui/material/Container";
diff --git a/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/index.js b/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/index.js
index 851722b..cd22048 100644
--- a/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/index.js
+++ b/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/index.js
@@ -19,11 +19,11 @@ import { useRef } from "react";
import SwiperCore, { Autoplay, Navigation } from "swiper";
// SwiperJS react components
-import { Swiper, SwiperSlide } from "swiper/react/swiper-react";
+import { Swiper, SwiperSlide } from 'swiper/react';
// SwiperJS styles
-import "swiper/swiper.min.css";
-import "swiper/modules/navigation/navigation.min.css";
+import 'swiper/css';
+import 'swiper/css/navigation';
// @mui material components
import Container from "@mui/material/Container";
diff --git a/src/pages/Blogs/SingleArticle/sections/Steps.js b/src/pages/Blogs/SingleArticle/sections/Steps.js
index 583c985..d115647 100644
--- a/src/pages/Blogs/SingleArticle/sections/Steps.js
+++ b/src/pages/Blogs/SingleArticle/sections/Steps.js
@@ -19,11 +19,11 @@ import { useRef, useState } from "react";
import SwiperCore, { Autoplay, Navigation } from "swiper";
// SwiperJS react components
-import { Swiper, SwiperSlide } from "swiper/react/swiper-react";
+import { Swiper, SwiperSlide } from 'swiper/react';
// SwiperJS styles
-import "swiper/swiper.min.css";
-import "swiper/modules/navigation/navigation.min.css";
+import 'swiper/css';
+import 'swiper/css/navigation';
// @mui material components
import Container from "@mui/material/Container";
@@ -31,7 +31,7 @@ import Grid from "@mui/material/Grid";
// Material Kit 2 PRO React components
import MKBox from "components/MKBox";
-import MKTypography from "components/MKTypography";
+import MKTypography from "components/MKTypography";;
function Steps() {
// install SwiperJS modules
diff --git a/src/pages/Company/Pricing/sections/Header.js b/src/pages/Company/Pricing/sections/Header.js
index e9579ce..50586d8 100644
--- a/src/pages/Company/Pricing/sections/Header.js
+++ b/src/pages/Company/Pricing/sections/Header.js
@@ -17,11 +17,11 @@ Coded by www.creative-tim.com
import SwiperCore, { Autoplay, Navigation } from "swiper";
// SwiperJS react components
-import { Swiper, SwiperSlide } from "swiper/react/swiper-react";
+import { Swiper, SwiperSlide } from 'swiper/react';
// SwiperJS styles
-import "swiper/swiper.min.css";
-import "swiper/modules/navigation/navigation.min.css";
+import 'swiper/css';
+import 'swiper/css/navigation';
// Pricing page components
import SliderHeader from "pages/Company/Pricing/components/Header";
diff --git a/src/pages/Company/Pricing/sections/Testimonials.js b/src/pages/Company/Pricing/sections/Testimonials.js
index 2985681..0fdd75c 100644
--- a/src/pages/Company/Pricing/sections/Testimonials.js
+++ b/src/pages/Company/Pricing/sections/Testimonials.js
@@ -19,11 +19,11 @@ import { useRef } from "react";
import SwiperCore, { Autoplay, Navigation } from "swiper";
// SwiperJS react components
-import { Swiper, SwiperSlide } from "swiper/react/swiper-react";
+import { Swiper, SwiperSlide } from 'swiper/react';
// SwiperJS styles
-import "swiper/swiper.min.css";
-import "swiper/modules/navigation/navigation.min.css";
+import 'swiper/css';
+import 'swiper/css/navigation';
// @mui material components
import Container from "@mui/material/Container";
- Material Kit 2 PRO React: Premium MUI & ReactJS Kit @ Creative Tim
- Quick Start | Material Kit 2 React @ Creative Tim
- Error: error:0308010c:digital envelope routines::unsupported [Node Error Solved]
- reactjs - Module not found: Error: Package path ./react/swiper-react is not exported from package - Stack Overflow
- Migration Guide to Swiper 7
- reactjs - Why do functional components wrapped in forwardRef receive null refs when I use the useContext hook? - Stack Overflow
- React Hooks #2 : Les cas particuliers useContext, useReducer et useImperativeHandle — rednet.io
- [Bug] material-kit-2-pro-react-v2.0.0 Fails on NPM Install · Issue #97 · creativetimofficial/ct-material-kit-pro-react