React Next js Fails At popperjs module - reactjs

I have a next js project for a while. For sometime the build is ok, until I clean install the node module from scratch.
Now I got an error when ever try to build.
ModuleNotFoundError: Module not found: Error: Package path ./lib/enums is not exported from package {PROEJCT_PATH}\node_modules#popperjs\core (see exports field in {PROEJCT_PATH}\node_modules#popperjs\core\package.json)
Does anyone know what could be the issue here?
here are my package json
package json main project
{
"name": "my-project",
"version": "0.0.1",
"description": "TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project.",
"main": "server.js",
"scripts": {
"test": "jest",
"test:ci": "jest --ci",
"local": "next dev -p 2001",
"dev": "node server.js",
"build": "npx next telemetry disable && next build",
"start": "NODE_ENV=production node server.js",
"start_local": "node server.js",
"ri": "npm install && npm run dev",
"u-lib": "npm remove vesta-vnext-react-library"
},
"keywords": [],
"author": "Shopify",
"license": "MIT",
"bugs": {
"url": "https://github.com/Shopify/shopify-demo-app-node-react/issues"
},
"homepage": "https://github.com/Shopify/shopify-demo-app-node-react#readme",
"dependencies": {
"-": "0.0.1",
"#azure/identity": "1.3.0",
"#azure/msal-browser": "2.15.0",
"#azure/msal-react": "1.0.0",
"#azure/storage-blob": "^12.5.0",
"#fortawesome/fontawesome-free": "5.15.1",
"#koa/cors": "3.1.0",
"#material-ui/core": "4.11.2",
"#material-ui/data-grid": "4.0.0-alpha.23",
"#material-ui/icons": "4.11.2",
"#material-ui/lab": "4.0.0-alpha.57",
"#react-google-maps/api": "1.13.0",
"D": "1.0.0",
"async-retry": "1.3.1",
"axios": "^0.21.1",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^5.0.1",
"clsx": "1.1.1",
"dotenv": "8.2.0",
"enzyme": "3.11.0",
"filter-objects": "2.1.1",
"form-data": "^4.0.0",
"formidable": "^1.2.2",
"g": "2.0.1",
"hamburger-react": "2.4.0",
"isomorphic-fetch": "3.0.0",
"joi": "17.4.0",
"joi-password-complexity": "5.1.0",
"jquery": "3.6.0",
"js-cookie": "2.2.1",
"koa": "2.13.0",
"koa-router": "10.0.0",
"koa-session": "6.1.0",
"lodash": "4.17.21",
"lodash-es": "4.17.21",
"map": "1.0.1",
"material-table": "1.57.2",
"moment": "2.29.1",
"msal": "1.4.4",
"next": "^11.1.2",
"next-compose-plugins": "^2.2.1",
"next-transpile-modules": "^8.0.0",
"nextjs-cors": "^1.0.5",
"papaparse": "^5.3.1",
"powerbi-client-react": "1.3.0",
"progressbar.js": "1.1.0",
"react": "^17.0.2",
"react-bootstrap": "1.4.0",
"react-circular-progressbar": "2.0.4",
"react-cookie": "4.0.3",
"react-csv": "^2.0.3",
"react-d3-speedometer": "1.0.1",
"react-dom": "^17.0.2",
"react-draggable": "4.4.3",
"react-dropzone": "11.3.2",
"react-helmet": "6.1.0",
"react-hook-form": "6.14.1",
"react-icons": "4.1.0",
"react-idle-timer": "4.5.4",
"react-pro-sidebar": "0.4.4",
"react-select": "4.3.0",
"sass": "1.29.0",
"store-js": "2.0.4",
"tmp": "^0.2.1",
"my-library": "file:my-library-0.5.0.tgz"
},
"devDependencies": {
"#babel/preset-env": "^7.14.2",
"#babel/preset-react": "^7.13.13",
"#testing-library/jest-dom": "5.11.10",
"#testing-library/react": "11.2.6",
"#testing-library/user-event": "13.1.3",
"#types/jquery": "3.5.5",
"#types/lodash": "4.14.168",
"#types/node": "14.14.10",
"#types/react-csv": "^1.1.2",
"#types/react-test-renderer": "17.0.1",
"#typescript-eslint/eslint-plugin": "4.14.0",
"#typescript-eslint/parser": "4.14.0",
"babel-jest": "26.6.3",
"eslint": "5.16.0",
"eslint-plugin-react": "7.21.5",
"identity-obj-proxy": "3.0.0",
"jest": "26.6.3",
"jest-ts-auto-mock": "2.0.0",
"next-page-tester": "0.24.1",
"react-date-range": "^1.1.3",
"react-test-renderer": "17.0.2",
"ts-auto-mock": "3.1.2",
"ts-jest": "26.5.5",
"ttypescript": "1.5.12",
"typescript": "^4.4.2"
},
"directories": {
"test": "test"
}
}
package json my-library
{
"name": "my-library",
"version": "0.5.0",
"description": "A library that has usable components for vNext project",
"main": "dist/index.js",
"module": "dist/index.js",
"private": true,
"dependencies": {
"#azure/storage-blob": "12.5.0",
"#date-io/moment": "1.3.13",
"#fortawesome/fontawesome-svg-core": "1.2.35",
"#fortawesome/free-solid-svg-icons": "5.15.3",
"#fortawesome/react-fontawesome": "0.1.14",
"#material-ui/core": "4.11.2",
"#material-ui/icons": "4.11.2",
"#material-ui/pickers": "3.3.10",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "13.0.0",
"#types/react-phone-number-input": "3.0.7",
"bootstrap": "5.0.1",
"jquery": "3.6.0",
"lodash": "4.17.21",
"moment": "2.29.1",
"papaparse": "5.3.1",
"precss": "4.0.0",
"react-circular-progressbar": "2.0.4",
"react-data-table-component": "6.11.5",
"react-date-range": "1.1.3",
"react-dropzone": "11.3.2",
"react-helmet": "6.1.0",
"react-phone-input": "^1.2.1",
"react-phone-input-2": "^2.14.0",
"react-phone-number-input": "^3.1.25",
"styled-components": "5.0.1"
},
"peerDependencies": {
"#azure/storage-blob": "12.5.0",
"#material-ui/core": "4.11.2",
"#date-io/moment": "1.3.13",
"#material-ui/icons": "4.11.2",
"#rollup/plugin-node-resolve": "13.0.0",
"precss": "4.0.0",
"react-dropzone": "11.3.2",
"moment": "2.29.1",
"react-bootstrap": "1.6.0",
"react-helmet": "6.1.0",
"react-date-range": "1.1.3",
"react-data-table-component": "6.11.5",
"styled-components": "5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"ts-build": "tsc --project ./ --module commonjs",
"b-lib": "rollup -c && npm pack",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/preset-env": "7.14.2",
"#babel/preset-react": "7.13.13",
"#material-ui/lab": "4.0.0-alpha.57",
"#rollup/plugin-commonjs": "19.0.0",
"#rollup/plugin-image": "2.0.6",
"#rollup/plugin-typescript": "8.2.1",
"#storybook/addon-actions": "6.2.9",
"#storybook/addon-essentials": "6.2.9",
"#storybook/addon-links": "6.2.9",
"#storybook/node-logger": "6.2.9",
"#storybook/preset-create-react-app": "3.1.7",
"#storybook/react": "6.2.9",
"#testing-library/jest-dom": "5.11.4",
"#testing-library/react": "11.1.0",
"#testing-library/user-event": "12.1.10",
"#types/jest": "26.0.15",
"#types/jquery": "^3.5.6",
"#types/lodash": "4.14.170",
"#types/node": "12.0.0",
"#types/react": "17.0.0",
"#types/react-dom": "17.0.0",
"autoprefixer": "10.2.6",
"axios": "0.21.1",
"date-fns": "2.0.0-beta.5",
"moment": "2.29.1",
"postcss": "8.3.0",
"postcss-import": "14.0.2",
"react": "17.0.2",
"react-advanced-form": "1.7.2",
"react-advanced-form-addons": "1.3.3",
"react-bootstrap": "1.6.0",
"react-checkbox-tree": "1.6.0",
"react-data-table-component": "6.11.5",
"react-date-range": "1.1.3",
"react-dom": "17.0.2",
"react-helmet": "6.1.0",
"react-scripts": "4.0.3",
"rollup": "2.50.0",
"rollup-plugin-babel": "4.4.0",
"rollup-plugin-import-css": "2.0.1",
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.0",
"rollup-plugin-scss": "2.6.1",
"rollup-plugin-terser": "7.0.2",
"rollup-plugin-typescript2": "0.30.0",
"tsc": "2.0.3",
"tslib": "2.2.0",
"typescript": "4.2.4",
"web-vitals": "1.0.1"
},
"typings": "dist/index.d.ts",
"typescript": {
"definition": "dist/index.d.ts",
"reactDocgen": "none"
},
"repository": {
"type": "git",
"url": "__"
}
}

Related

Component cannot be used as JSX Component. Its Instance type is not a valid JSX element

Yesterday, in a separate folder, I initialized CRA + installed Material UI. Unfortunately (I think) this made me sprinkle the rest of the projects in separate folders.
I think I've searched all over the internet. I used "resolutions", nothing helps.... Of course, I cloned the repository, removed node modules, installed again and so on.
package.json file:
"name": "app",
"version": "3.1.4",
"private": true,
"typings": "./src/types.d.ts",
"engines": {
"node": "16.16.0"
},
"dependencies": {
"#ant-design/icons": "4.3.0",
"#craco/craco": "6.4.5",
"#dnd-kit/core": "4.0.0",
"#dnd-kit/sortable": "5.0.0",
"#honeybadger-io/js": "^4.7.1",
"#honeybadger-io/react": "^4.7.1",
"#react-pdf/renderer": "2.0.21",
"#stripe/react-stripe-js": "1.1.2",
"#stripe/stripe-js": "1.11.0",
"#types/big.js": "^6.1.3",
"#types/slug": "^5.0.3",
"antd": "4.10.2",
"antd-country-phone-input": "3.4.3",
"apexcharts": "3.23.1",
"axios": "0.21.2",
"big.js": "^6.1.1",
"craco-alias": "2.1.1",
"craco-less": "1.17.0",
"dompurify": "2.2.6",
"dotenv-cra": "3.0.1",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"event-source-polyfill": "1.0.24",
"file-saver": "2.0.5",
"formik": "2.2.9",
"framer-motion": "4.1.3",
"handlebars": "4.7.7",
"history": "4.10.0",
"html2canvas": "^1.3.2",
"jest": "26.6.0",
"js-levenshtein": "^1.1.6",
"jsonwebtoken": "8.5.1",
"linkifyjs": "2.1.9",
"luxon": "1.26.0",
"polished": "4.1.2",
"prettier-plugin-organize-imports": "^3.0.0",
"query-string": "6.13.7",
"react": "^17.0.2",
"react-apexcharts": "1.3.7",
"react-cookie": "^4.1.1",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "1.14.6",
"react-grid-layout": "^1.3.4",
"react-intl": "5.10.1",
"react-lines-ellipsis": "^0.15.3",
"react-portal": "^4.2.1",
"react-query": "^3.39.1",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"slug": "^5.2.0",
"smart-timeout": "2.5.2",
"source-map-explorer": "^2.5.3",
"styled-components": "5.2.1",
"talkjs": "0.14.5",
"ts-jest": "26.4.4",
"typescript": "^4.6.4",
"use-react-screenshot": "^1.0.2",
"uuid": "^8.3.2",
"web-vitals": "0.2.4",
"webpack": "4.44.2",
"yup": "^0.32.9"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick"
}
},
"scripts": {
"start": "npm i",
"dev": "craco start",
"build": "craco --max_old_space_size=5120 build",
"eject": "craco eject",
"lint": "eslint --ext .ts \"src/**/*\"",
"format": "prettier --write \"src/**/*\"",
"test": "REACT_APP_ENV=test jest --config ./jest.config.js --env=jest-environment-jsdom",
"test:watch": "REACT_APP_ENV=test jest --config ./jest.config.js --watch --env=jest-environment-jsdom",
"test:ci": "REACT_APP_ENV=test jest --config ./jest.config.js --ci --changedSince=origin/master --forceExit --env=jest-environment-jsdom --coverage",
"version": "conventional-changelog -p emojis -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
"release": "release-it",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
"defaults",
">0.2%",
"not dead"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.12.3",
"#babel/plugin-proposal-private-property-in-object": "^7.18.6",
"#testing-library/jest-dom": "5.11.6",
"#testing-library/react": "11.1.2",
"#testing-library/react-hooks": "^7.0.2",
"#testing-library/user-event": "12.2.2",
"#types/axios": "0.14.0",
"#types/dompurify": "2.2.1",
"#types/draft-js": "0.11.5",
"#types/draftjs-to-html": "0.8.0",
"#types/file-saver": "2.0.3",
"#types/handlebars": "4.1.0",
"#types/history": "4.7.6",
"#types/jest": "26.0.15",
"#types/js-levenshtein": "^1.1.1",
"#types/jsonwebtoken": "8.5.0",
"#types/linkifyjs": "2.1.3",
"#types/lodash.isequal": "4.5.5",
"#types/lodash.uniqueid": "4.0.6",
"#types/luxon": "1.26.0",
"#types/node": "12.0.0",
"#types/query-string": "6.3.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.11",
"#types/react-draft-wysiwyg": "1.13.1",
"#types/react-grid-layout": "^1.3.2",
"#types/react-helmet": "6.1.0",
"#types/react-intl": "3.0.0",
"#types/react-lines-ellipsis": "^0.15.1",
"#types/react-portal": "^4.0.4",
"#types/react-router-dom": "5.1.7",
"#types/react-slick": "^0.23.10",
"#types/styled-components": "5.1.7",
"#types/uuid": "^8.3.1",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "4.7.0",
"babel-loader": "8.1.0",
"conventional-changelog-cli": "2.1.1",
"conventional-changelog-core": "4.2.1",
"conventional-changelog-emojis": "3.1.0",
"core-js": "^3.22.8",
"eslint": "7.32.0",
"eslint-config-airbnb-typescript": "12.0.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-hooks": "4.3.0",
"husky": "4.3.5",
"jest-localstorage-mock": "2.4.3",
"jest-styled-components": "^7.0.8",
"jest-transform-stub": "2.0.0",
"prettier": "2.1.2",
"prettier-plugin-organize-imports": "^3.0.0",
"pretty-quick": "3.1.0",
"process": "0.11.10",
"react-is": "17.0.1",
"react-test-renderer": "^17.0.2",
"release-it": "14.11.5",
"svg-jest": "1.0.1"
},
"resolutions": {
"react-error-overlay": "6.0.9",
"world_countries_lists": "2.3.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
}
}

export 'useEffect' (imported as 'useEffect') was not found in 'react' (module has no exports)

I am receiving errors of:
It seems to be errors related with redux and react redux:
I also have a warning of:
Attempted import error: 'useMemo' is not exported from 'react' (imported as 'useMemo').
LOG from webpack.FileSystemInfo
<w> Managed item C:\Users\Bernadette Kotelo\Documents\Gahn Eden\frontend\node_modules\react-redux\node_modules\#babel\runtime isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
+ 11 hidden lines
Here's my package.json inside my react redux folder in node_modules:
{
"name": "react-redux",
"version": "8.0.2",
"description": "Official React bindings for Redux",
"keywords": [
"react",
"reactjs",
"redux"
],
"license": "MIT",
"author": "Dan Abramov <dan.abramov#me.com> (https://github.com/gaearon)",
"homepage": "https://github.com/reduxjs/react-redux",
"repository": "github:reduxjs/react-redux",
"bugs": "https://github.com/reduxjs/react-redux/issues",
"main": "./lib/index.js",
"types": "./es/index.d.ts",
"unpkg": "dist/react-redux.js",
"module": "es/index.js",
"files": [
"dist",
"lib",
"src",
"es"
],
"scripts": {
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --extensions \".js,.ts,.tsx\" --out-dir lib",
"build:es": "babel src --extensions \".js,.ts,.tsx\" --out-dir es",
"build:umd": "cross-env NODE_ENV=development rollup -c -o dist/react-redux.js",
"build:umd:min": "cross-env NODE_ENV=production rollup -c -o dist/react-redux.min.js",
"build:types": "tsc",
"build": "yarn build:types && yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:umd:min",
"clean": "rimraf lib dist es coverage",
"api-types": "api-extractor run --local",
"format": "prettier --write \"{src,test}/**/*.{js,ts,tsx}\" \"docs/**/*.md\"",
"lint": "eslint src --ext ts,tsx,js test/utils test/components test/hooks",
"prepare": "yarn clean && yarn build",
"pretest": "yarn lint",
"test": "jest",
"type-tests": "yarn tsc -p test/typetests/tsconfig.json",
"coverage": "codecov"
},
"peerDependencies": {
"#types/react": "^16.8 || ^17.0 || ^18.0",
"#types/react-dom": "^16.8 || ^17.0 || ^18.0",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0",
"react-native": ">=0.59",
"redux": "^4"
},
"peerDependenciesMeta": {
"#types/react": {
"optional": true
},
"#types/react-dom": {
"optional": true
},
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
},
"redux": {
"optional": true
}
},
"dependencies": {
"#babel/runtime": "^7.12.1",
"#types/hoist-non-react-statics": "^3.3.1",
"#types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"devDependencies": {
"#babel/cli": "^7.12.1",
"#babel/core": "^7.12.3",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-transform-react-display-name": "^7.12.1",
"#babel/plugin-transform-react-jsx": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/preset-typescript": "^7.14.5",
"#microsoft/api-extractor": "^7.18.1",
"#reduxjs/toolkit": "^1.6.1",
"#rollup/plugin-babel": "^5.2.1",
"#rollup/plugin-commonjs": "^15.1.0",
"#rollup/plugin-node-resolve": "^9.0.0",
"#rollup/plugin-replace": "^2.3.3",
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/jest-native": "^3.4.3",
"#testing-library/react": "13.0.0",
"#testing-library/react-12": "npm:#testing-library/react#^12",
"#testing-library/react-hooks": "^3.4.2",
"#testing-library/react-native": "^7.1.0",
"#types/object-assign": "^4.0.30",
"#types/react": "^18",
"#types/react-dom": "^18",
"#types/react-is": "^17",
"#types/react-native": "^0.67.4",
"#typescript-eslint/eslint-plugin": "^4.28.0",
"#typescript-eslint/parser": "^4.28.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.1",
"codecov": "^3.8.0",
"cross-env": "^7.0.2",
"eslint": "^7.12.0",
"eslint-config-prettier": "^6.14.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"glob": "^7.1.6",
"jest": "^26.6.1",
"prettier": "^2.1.2",
"react": "18.0.0",
"react-17": "npm:react#^17",
"react-dom": "18.0.0",
"react-dom-17": "npm:react-dom#^17",
"react-native": "^0.64.1",
"react-test-renderer": "18.0.0",
"react-test-renderer-17": "npm:react-test-renderer#^17",
"redux": "^4.0.5",
"rimraf": "^3.0.2",
"rollup": "^2.32.1",
"rollup-plugin-terser": "^7.0.2",
"ts-jest": "26.5.6",
"typescript": "^4.3.4"
}
}
And heres is my main app package.json:
{
"name": "frontend",
"proxy": "http://localhost:5000/",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/icons": "^2.0.9",
"#chakra-ui/react": "^2.3.2",
"#chakra-ui/system": "^2.2.9",
"#chakra-ui/theme-tools": "^2.0.11",
"#emotion/cache": "^11.10.3",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#hypertheme-editor/chakra-ui": "^0.2.0-dev.1",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.5",
"#mui/styled-engine": "^5.10.5",
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"apexcharts": "^3.35.5",
"axios": "^0.27.2",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"bootstrap": "^5.2.0",
"chart.js": "^3.9.1",
"chroma-js": "^2.4.2",
"framer-motion": "^7.2.1",
"jwt-decode": "^3.1.2",
"primeflex": "^3.2.1",
"primeicons": "^5.0.0",
"primereact": "^8.4.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.5.0",
"react-calendar": "^3.8.0",
"react-chartjs-2": "^4.3.1",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.2",
"react-github-btn": "^1.4.0",
"react-icons": "^4.4.0",
"react-is": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-table": "^7.8.0",
"react-toastify": "^9.0.8",
"react-transition-group": "^4.4.5",
"redux": "^4.2.0",
"redux-persist": "^6.0.0",
"sass": "^1.54.9",
"sass-loader": "^13.0.2",
"stylis": "^4.1.2",
"stylis-plugin-rtl": "^2.0.2",
"swiper": "^8.4.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have tried uninstalling redux and react-redux and installing them again. It failed.
The errors say all my react hooks cannot be imported in react, inside my node_mudules/react-redux folder. Which is confusing because I have react installed.
Please help me. Thanks
I just ran into this issue. I deleted my node_modules folder rm -rf node_modules/ and ran npm i, and the issue was fixed.

Module not found: Can't resolve "NPM LINKED MODULE" when using npm-link

I'm working on a TypeScript React application which heavily relies on a private NPM package. I can successfully link the NPM package, but after doing so I get the error <pre>/src/components/xxxx/xxxx/xxxxx/xxxxHoc.tsx Module not found: Can&apos;t resolve &apos;#CompanyName/Company-package&apos; in &apos;/home/liam/CompanyName/Company-product/src/components/xxxx/xxxx/xxxxx&apos;</pre>
riddle all over the application where the npm package is imported. NPM isntalling this package traditionally does works as intended but I need to be able to locally test the package.
Typically when I npm-link the package it gets removed from package.json, I'm not sure if thats how it's supposed to work? would love some insight if possible
I was successfully able to npm-link this package to a laravel applicaiton, but linking it to this particular react app does not work.
Main projects package.json file
{
"name": "Company-product",
"version": "0.1.0",
"private": true,
"dependencies": {
"#aws-sdk/client-dynamodb": "^3.37.0",
"#aws-sdk/util-dynamodb": "^3.37.0",
"#elastic/apm-rum": "^5.9.1",
"#elastic/apm-rum-react": "^1.3.1",
"#fingerprintjs/fingerprintjs": "^3.3.0",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.16",
"#CompanyName/NPM-LINKED-MODULE": "^2.10.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/fingerprintjs": "^0.5.28",
"#types/jest": "^26.0.24",
"#types/js-cookie": "^2.2.7",
"#types/node": "^12.20.33",
"#types/react": "^16.14.17",
"#types/react-csv": "^1.1.2",
"#types/react-dom": "^16.9.14",
"#types/react-router-dom": "^5.3.1",
"#types/react-select": "^3.0.28",
"aws-sdk": "^2.1012.0",
"bootstrap": "^4.6.0",
"deepmerge": "^4.2.2",
"formik": "^2.2.9",
"highcharts": "^8.2.2",
"highcharts-react-official": "^3.1.0",
"husky": "^4.3.8",
"ismobilejs": "^1.1.1",
"js-cookie": "^2.2.1",
"jwt-decode": "^3.1.2",
"luxon": "^1.28.0",
"mobx": "^6.3.5",
"mobx-react-lite": "^3.2.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"node-sass": "^4.14",
"nvm": "^0.0.4",
"react": "^17.0.2",
"react-bootstrap": "^1.6.4",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-map-gl": "^6.1.17",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.1",
"react-select": "^3.1.1",
"react-table": "^7.7.0",
"react-toastify": "^6.2.0",
"typescript": "^4.4.4",
"urijs": "^1.19.7",
"utility-types": "^3.10.0",
"web-vitals": "^0.2.4",
"worker-loader": "^3.0.8",
"yup": "^0.32.11"
},
"husky": {
"hooks": {
"pre-commit": "sh ./hooks/pre-commit"
}
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/luxon": "^1.27.1",
"#types/react-map-gl": "^5.2.11",
"#types/react-table": "^7.7.7",
"#types/urijs": "^1.19.17"
}
The linked NPM package package.json file
{
"name": "#CompanyName/linked-module",
"version": "2.10.0",
"description": "Company Package",
"author": "Company",
"license": "MIT",
"repository": "CompanyName/company-package",
"main": "dist/bundle.js",
"types": "dist/index.d.ts",
"dependencies": {
"#types/jquery": "^3.3.33",
"#types/node": "^12.20.33",
"#types/urijs": "^1.19.6",
"axios": "^0.21.4",
"deepmerge": "^4.2.2",
"dotenv": "^8.2.0",
"highcharts": "^8.2.2",
"ismobilejs": "^1.1.1",
"moment": "^2.24.0",
"urijs": "^1.19.7"
},
"devDependencies": {
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
Thanks for any awnsers

How to separate renderer and main process dependency while using React with electron?

I have React web app which I am trying to interoperate as desktop application. All my React dependencies are bundled by webpack on production so I don't need those node modules to be included in app.asar which unnecessarily increases size of my production build.
Now my problem is that it is blocking me to include main process dependency as I have rule to exclude the node_modules in package.json How can I separate the main process dependency to be included by electron-builder but ignore the render-process dependency. I am new to electron, so any help will be valuable for me.
My package.json looks like this:
"name": "app-name",
"version": "0.16.2",
"private": true,
"main": "public/electron.js",
"repository": "github repo",
"homepage": "./",
"build": {
"appId": "com.appname",
"productName": "productName",
"copyright": "copyright",
"dmg": {
"background": null,
"backgroundColor": "#ffffff",
"window": {
"width": "400",
"height": "300"
},
"contents": [{
"x": 100,
"y": 100
},
{
"x": 300,
"y": 100,
"type": "link",
"path": "/Applications"
}
]
},
"nsis": {
"createDesktopShortcut": "always",
"installerIcon": "./resources/icon.ico"
},
"mac": {
"target": "dmg",
"category": "public.app-category.business",
"icon": "./resources/icon.icns"
},
"win": {
"target": "nsis",
"extraResources": [
"./*.dll",
"!./exclude-me.dll"
]
},
"linux": {
"maintainer": "maintainer",
"target": "deb",
"category": "Utility"
},
"files": [
"./build/**/*",
"!node_modules"
],
"directories": {
"buildResources": "resources"
},
"publish": {
"provider": "github"
}
},
"scripts": {
"generate:meta": "node ./internals/scripts/generate-meta.js",
"start": "REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` craco start",
"electron:dev": "concurrently \"env-cmd -f .env.electron yarn start\" \"wait-on http://localhost:3002 && electron .\"",
"electron:prod": "yarn build:staging && electron-builder",
"electron:release": "electron-builder -p 'onTagOrDraft'",
"postinstall": "electron-builder install-app-deps",
"start:windows": "git rev-parse --short HEAD >sha.txt && set /p REACT_APP_CURRENT_GIT_SHA= < sha.txt && del sha.txt && craco start",
"start:prod": "env-cmd -f .env.production yarn start",
"start:dev": "env-cmd -f .env.staging yarn start",
"build": "yarn generate:meta && REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` craco build",
"build:staging": "env-cmd -f .env.staging yarn build",
"build:prod": "env-cmd -f .env.production yarn build",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
"lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
"test": "craco test",
"eject": "craco eject",
"generate": "graphql-codegen --config codegen.yml",
"extract-translations": "i18next",
"analyze": "cross-env REACT_APP_INTERACTIVE_ANALYZE=1 yarn build"
},
"husky": {
"hooks": {
"pre-push": "yarn lint",
"pre-commit": "pretty-quick --staged"
}
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#ant-design/icons": "^4.6.2",
"#apollo/client": "^3.3.16",
"#hookform/resolvers": "^2.4.0",
"#sentry/browser": "^6.13.3",
"#sentry/tracing": "^6.13.3",
"#stripe/react-stripe-js": "^1.4.1",
"#stripe/stripe-js": "^1.15.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#twilio/voice-sdk": "^2.0.1",
"#types/react-beautiful-dnd": "^13.1.1",
"#types/react-color": "^3.0.5",
"#types/react-highlight-words": "^0.16.3",
"#types/react-responsive": "^8.0.2",
"#welldone-software/why-did-you-render": "^6.1.1",
"antd": "^4.15.4",
"apollo-link-token-refresh": "^0.3.2",
"apollo-upload-client": "^15.0.0",
"apollo3-cache-persist": "^0.9.1",
"craco-less": "^1.18.0",
"date-fns": "^2.16.1",
"dompurify": "^2.2.6",
"electron-is-dev": "^2.0.0",
"electron-updater": "^4.3.9",
"env-cmd": "^10.1.0",
"fernet": "^0.4.0",
"firebase": "^9.1.1",
"graphql": "^15.5.0",
"history": "^5.0.0",
"husky": "^4.3.0",
"i18next": "^19.8.7",
"i18next-browser-languagedetector": "^6.0.1",
"i18next-http-backend": "^1.1.0",
"immer": "^8.0.1",
"jspdf": "^2.3.1",
"jwt-decode": "^3.1.2",
"libphonenumber-js": "^1.9.6",
"linkify-html": "^3.0.2",
"linkifyjs": "^3.0.1",
"lint-staged": "^10.5.3",
"lodash.debounce": "^4.0.8",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
"lodash.omit": "^4.5.0",
"lodash.startswith": "^4.2.1",
"npm-watch": "^0.11.0",
"papaparse": "^5.3.0",
"prettier": "^2.2.1",
"rc-picker": "^2.5.15",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-color": "^2.19.3",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.1",
"react-draggable": "^4.4.3",
"react-flag-kit": "^0.3.1",
"react-h5-audio-player": "^3.6.1",
"react-highlight-words": "^0.17.0",
"react-hook-form": "^7.4.0",
"react-i18next": "^11.8.6",
"react-icons": "^4.1.0",
"react-mic": "^12.4.6",
"react-perfect-scrollbar": "^1.5.8",
"react-phone-input-2": "^2.13.9",
"react-responsive": "^8.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"react-scroll": "^1.8.2",
"react-select": "^4.3.0",
"react-use-intercom": "^1.3.0",
"react-window": "^1.8.6",
"secure-ls": "^1.2.6",
"socket.io-client": "^3.0.4",
"styled-components": "^5.2.3",
"subscriptions-transport-ws": "^0.9.18",
"typescript": "^4.1.2",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^6.3.0",
"workbox-broadcast-update": "^6.3.0",
"workbox-cacheable-response": "^6.3.0",
"workbox-core": "^6.3.0",
"workbox-expiration": "^6.3.0",
"workbox-precaching": "^6.3.0",
"workbox-routing": "^6.3.0",
"workbox-strategies": "^6.3.0",
"xlsx": "^0.17.0",
"yup": "^0.32.5"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.12.1",
"#craco/craco": "^6.2.0",
"#graphql-codegen/cli": "1.20.1",
"#graphql-codegen/fragment-matcher": "2.0.1",
"#graphql-codegen/introspection": "1.18.1",
"#graphql-codegen/typescript": "^1.20.2",
"#graphql-codegen/typescript-document-nodes": "1.17.9",
"#graphql-codegen/typescript-graphql-files-modules": "^1.18.1",
"#graphql-codegen/typescript-operations": "1.17.14",
"#graphql-codegen/typescript-react-apollo": "2.2.1",
"#types/apollo-upload-client": "^14.1.0",
"#types/dompurify": "^2.2.1",
"#types/emoji-mart": "^3.0.4",
"#types/jest": "^26.0.15",
"#types/lodash.debounce": "^4.0.6",
"#types/lodash.get": "^4.4.6",
"#types/lodash.isempty": "^4.4.6",
"#types/lodash.omit": "^4.5.6",
"#types/lodash.startswith": "^4.2.6",
"#types/node": "^12.0.0",
"#types/papaparse": "^5.2.4",
"#types/react": "^16.9.53",
"#types/react-copy-to-clipboard": "^5.0.0",
"#types/react-dom": "^16.9.8",
"#types/react-mic": "^12.4.2",
"#types/react-router-dom": "^5.1.6",
"#types/react-scroll": "^1.8.2",
"#types/react-select": "^4.0.13",
"#types/react-window": "^1.8.2",
"#types/requestidlecallback": "^0.3.1",
"#types/socket.io-client": "^1.4.34",
"#types/styled-components": "^5.1.4",
"#typescript-eslint/eslint-plugin": "^4.14.1",
"#typescript-eslint/parser": "^4.14.1",
"babel-plugin-import": "^1.13.3",
"compression-webpack-plugin": "6.1.1",
"concurrently": "^6.3.0",
"craco-swc": "^0.1.0",
"cross-env": "^7.0.3",
"electron": "^15.2.0",
"electron-builder": "^22.13.1",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"i18next-parser": "^3.6.0",
"less": "^3.12.2",
"prettier-eslint": "^12.0.0",
"pretty-quick": "^3.1.0",
"simple-progress-webpack-plugin": "^2.0.0",
"wait-on": "^6.0.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpackbar": "^5.0.0-3"
},
"description": "description",
"author": "author"
} ```
If those dependencies are packed with webpack you can safely move them to devDependencies, which aren't included in the node_modules of the final application

create-react-app script "start" vs manually typing in the command line behaves differently

I have a create-react-app project with the "start" script as "nodemon backend/app.js". Both running yarn start (npm start) or manually typing cd backend --> nodemon app.js run the server fine. However, the script runs into an error when calling for requests whereas the manual option works fine. Any guidance or help would be appreciated. The script option can't seem to retrieve the token whereas the manual option works fine.
package.json
{
"name": "personal_project",
"version": "1.0.0",
"description": "Personal website",
"main": "src/components/App/index.js",
"scripts": {
"test": "jest",
"format": "prettier \"src/**/*.{js,jsx, tsx}\" --write",
"lint": "tslint --project",
"dev": "parcel index.html",
"build": "parcel build index.html",
"start": "nodemon backend/app.js",
"predeploy": "yarn run build",
"deploy": "gh-pages -b master -d build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wakoong/personal_website.git"
},
"author": "Woosik Koong <woosik.koong#gmail.com>",
"license": "ISC",
"bugs": {
"url": "https://woosika.com/"
},
"homepage": "https://wakoong.github.io/playground/",
"devDependencies": {
"#babel/cli": "^7.6.4",
"#babel/core": "^7.6.4",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"#testing-library/jest-dom": "^4.1.2",
"#testing-library/react": "^9.3.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.12.3",
"prettier": "^1.14.2",
"react-table": "^6.10.3",
"tslint": "^5.19.0",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.0.0"
},
"dependencies": {
"#material-ui/core": "^4.3.3",
"#material-ui/icons": "^4.2.1",
"#reach/router": "^1.2.1",
"#types/reach__router": "^1.2.4",
"#types/react": "^16.9.2",
"#types/react-dom": "^16.8.5",
"#types/react-redux": "^7.1.2",
"algotrader": "^2.4.9",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"cross-fetch": "^3.0.4",
"d3": "^5.12.0",
"dotenv": "^7.0.0",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"gh-pages": "^2.1.1",
"http-proxy-middleware": "^0.20.0",
"jest": "^24.9.0",
"marked": "^0.7.0",
"mixin-deep": "^2.0.1",
"mongodb": "^3.2.7",
"mongoose": "^5.6.4",
"morgan": "^1.9.1",
"react": ">=15",
"react-dom": "16.9.0",
"react-google-login": "^5.0.4",
"react-is": "^16.10.2",
"react-markdown": "^4.1.0",
"react-redux": "^6.0.1",
"react-router-dom": "^5.1.2",
"react-window-size": "^1.2.2",
"recharts": "^1.8.5",
"reducers": "^3.0.0-alpha",
"redux": "^4.0.1",
"redux-api-middleware": "^3.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"request": "^2.88.0",
"request-promise": "^4.2.5",
"robinhood": "^1.6.4",
"safer-eval": "^1.3.5",
"set-value": "^3.0.1",
"store": "^2.0.12",
"typescript": "^3.5.3",
"url-loader": "^1.1.2",
"warning": "^4.0.3"
},
"engines": {
"node": "11.x"
}
}

Resources