I'm trying to run a legacy react native app on my cellphone but I'm getting this strange error. I can't get any details or where on my code this problem exist.
I think it may be on some dependency. I'll put part of my package.json here:
{
"dependencies": {
"#react-native-community/async-storage": "^1.12.0",
"#react-native-community/clipboard": "^1.2.3",
"axios": "0.18.0",
"compare-versions": "^3.6.0",
"d3-geo": "1.11.6",
"formik": "1.5.1",
"geolib": "2.0.24",
"lodash": "4.17.11",
"moment": "2.24.0",
"native-base": "2.12.0",
"rbush": "^3.0.1",
"rbush-knn": "^2.1.0",
"react": "16.6.3",
"react-native": "0.58.5",
"react-native-animatable": "1.3.1",
"react-native-camera": "1.12.0",
"react-native-config": "1.3.3",
"react-native-event-listeners": "^1.0.3",
"react-native-fs": "2.13.3",
"react-native-geojson": "^0.1.1",
"react-native-geolocation-service": "2.0.0",
"react-native-gesture-handler": "1.0.16",
"react-native-head-less-js": "1.0.6",
"react-native-image-crop-picker": "0.22.0",
"react-native-image-resizer": "1.0.1",
"react-native-keychain": "^3.1.3",
"react-native-maps": "0.25.0",
"react-native-masked-text": "1.11.0",
"react-native-permissions": "1.1.1",
"react-native-qrcode-scanner": "1.1.2",
"react-native-splash-screen": "3.2.0",
"react-native-swiper-flatlist": "1.0.10",
"react-native-version-check": "^3.4.0",
"react-native-zip-archive": "4.0.0",
"react-navigation": "3.3.0",
"react-redux": "6.0.1",
"realm": "2.29.2",
"redux": "4.0.1",
"redux-saga": "1.0.1",
"reduxsauce": "1.0.1",
"rn-fetch-blob": "0.10.15",
"seamless-immutable": "7.1.4",
"styled-components": "4.1.3",
"supercluster": "4.1.1",
"unorm": "1.5.0",
"uuid": "3.3.2",
"yup": "0.26.10"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"babel-plugin-transform-remove-console": "6.9.4",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.52.0",
"react-test-renderer": "16.6.3"
}
}
It is a legacy project so react native version is 0.58.5 and I'm using node version 10 to run.
I am working in a React project that is using react-scripts in its version 3.4.4 among other dependencies and I have to check all the third-party libraries added into the final bundle.
As example, if I check the requires and dependencies from react-scripts in the package-lock.json file:
"react-scripts": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.4.tgz",
"integrity": "sha512-7J7GZyF/QvZkKAZLneiOIhHozvOMHey7hO9cdO9u68jjhGZlI8hDdOm6UyuHofn6Ajc9Uji5I6Psm/nKNuWdyw==",
"requires": {
"#babel/core": "7.9.0",
"#svgr/webpack": "4.3.3",
"#typescript-eslint/eslint-plugin": "^2.10.0",
"#typescript-eslint/parser": "^2.10.0",
"babel-eslint": "10.1.0",
"babel-jest": "^24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2",
"camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"css-loader": "3.4.2",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.2.1",
"eslint-loader": "3.0.3",
"eslint-plugin-flowtype": "4.6.0",
"eslint-plugin-import": "2.20.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "4.3.0",
"fs-extra": "^8.1.0",
"fsevents": "2.1.2",
"html-webpack-plugin": "4.0.0-beta.11",
"identity-obj-proxy": "3.0.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"mini-css-extract-plugin": "0.9.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react-app-polyfill": "^1.0.6",
"react-dev-utils": "^10.2.1",
"resolve": "1.15.0",
"resolve-url-loader": "3.1.2",
"sass-loader": "8.0.2",
"semver": "6.3.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "2.3.8",
"ts-pnp": "1.1.6",
"url-loader": "2.3.0",
"webpack": "4.42.0",
"webpack-dev-server": "3.11.0",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1"
},
"dependencies": {
"fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
}
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
}
}
},
My question is, are all the requires and dependencies such, as example, webpack-dev-server, dotenv, sass-loader added into the final bundle?
Thanks!
No. What Webpack ends up including is not something published or reported. Using react-scripts alone would seen hundreds of modules and versions being shipped in production. Any library you add on top just adds to that weight.
With tree shaking and build deps, you can't rely upon that requires at all. Some of those, like Jest or ESLint, are dev-only. They have no runtime. Others will. Some runtime deps will be shaken out too, so can't rely on just recognizing the lib.
I have a component library that exports components
// Test.tsx
import React from 'react';
const Test = () => <p>Test</p>;
export default Test;
and
// TestB.tsx
import React from 'react';
import { Typography } from '#material-ui/core';
const TestB = () => <Typography>TestB</Typography>;
export default TestB
In my other package I'm importing the components as so
import React from 'react';
import { Box } from '#components';
import { Test, TestB } from 'component-library';
const Example = (): JSX.Element | null => {
return (
<Box mb={3}>
<Test />
<TestB />
</Box>
);
};
export default Example;
When I import Test I get the expected <p>Test</p> but when I import TestB I get the following error:
react.development.js:1476 Uncaught 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. 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.
at resolveDispatcher (react.development.js:1476)
at Object.useContext (react.development.js:1484)
at useTheme (useTheme.js:4)
at useStyles (makeStyles.js:222)
at WithStyles (withStyles.js:55)
at renderWithHooks (react-dom.development.js:14803)
at updateForwardRef (react-dom.development.js:16816)
at beginWork (react-dom.development.js:18645)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
I have confirmed react and react-dom are both on the version 16.9.0
-- though this doesn't seem relevant since it will work with Test, but not TestB
I don't see how I could be breaking the Rules of Hooks with the implementation of TestB since it doesn't use any hooks
I have tried removing all but one version inclusion of react through package.json
-- again this doesn't seem relevant since it will work with Test, but not TestB
Component Library package.json dependencies
"dependencies": {
"#material-ui/core": "4.11.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-svg": "^13.0.6"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#types/jest": "^24.0.24",
"#typescript-eslint/eslint-plugin": "^4.25.0",
"#typescript-eslint/parser": "^4.25.0",
"babel-loader": "^8.2.2",
"eslint": "^7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"jest": "^24.9.0",
"rollup": "^1.27.13",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-typescript2": "^0.25.3",
"standard": "^14.3.1",
"standard-prettier": "^1.0.1",
"ts-jest": "^24.2.0",
"typescript": "^3.7.3"
},
Projects package.json dependencies
"dependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-flow-strip-types": "^7.1.6",
"#babel/plugin-transform-modules-commonjs": "^7.4.3",
"#babel/polyfill": "^7.6.0",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.0.0",
"#babel/preset-typescript": "^7.9.0",
"#date-io/moment": "1.x",
"#emotion/core": "^10.0.10",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/pickers": "^3.2.10",
"#stripe/react-stripe-js": "^1.1.2",
"#stripe/stripe-js": "^1.4.0",
"#styled-system/css": "^1.0.3",
"#typeform/embed": "^0.5.12",
"attr-accept": "^1.1.0",
"autoprefixer": "^8.0.0",
"awesome-typescript-loader": "^4.0.0",
"axios": "^0.19.2",
"babel-loader": "^8.0.4",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-styled-components": "^1.10.0",
"classnames": "^2.2.5",
"compression-webpack-plugin": "^1.0.0",
"core-js": "^3.2.1",
"cropperjs": "^1.3.3",
"css-hot-loader": "^1.3.6",
"css-loader": "^0.28.7",
"d3": "^6.2.0",
"d3-selection": "^2.0.0",
"date-fns": "^2.9.0",
"dot-prop-immutable": "^1.4.0",
"downshift": "^5.0.3",
"emotion-theming": "^10.0.10",
"empty": "^0.10.1",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^7.3.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jest": "^21.5.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1",
"extract-text-webpack-plugin": "^3.0.1",
"faker": "^4.1.0",
"fetch-mock": "^6.5.2",
"file-loader": "^0.11.2",
"file-saver": "^2.0.2",
"final-form": "^4.20.1",
"final-form-arrays": "^3.0.2",
"final-form-calculate": "^1.3.1",
"glob": "^7.1.2",
"hellosign-embedded": "^2.8.0",
"identity-obj-proxy": "^3.0.0",
"isomorphic-fetch": "^2.2.1",
"js-yaml": "^3.10.0",
"jwt-decode": "^2.2.0",
"lint-staged": "^10.2.11",
"loaders.css": "^0.1.2",
"lost": "^8.2.0",
"components": "https://github.com/example/components#dev",
"mock-geolocation": "^1.0.11",
"moment": "2.24.0",
"moment-locales-webpack-plugin": "^1.2.0",
"moment-timezone": "^0.5.28",
"node-sass": "^4.12.0",
"notistack": "^0.9.11",
"numeral": "^2.0.6",
"path-complete-extname": "^1.0.0",
"postcss-automath": "^1.0.1",
"postcss-calc": "^7.0.2",
"postcss-flexbugs-fixes": "^3.2.0",
"postcss-font-magician": "^2.0.0",
"postcss-import": "^10.0.0",
"postcss-initial": "^2.0.0",
"postcss-loader": "^2.0.6",
"postcss-smart-import": "^0.7.5",
"precss": "^2.0.0",
"prettier-eslint": "^8.7.0",
"prop-types": "^15.5.10",
"qs": "^6.5.1",
"ramda": "^0.27.1",
"rc-time-picker": "^3.7.2",
"react": "17.0.2",
"react-addons-shallow-compare": "^15.6.0",
"react-confetti": "^6.0.0",
"react-content-loader": "^4.0.1",
"react-cropper": "^1.0.1",
"react-dates": "^21.8.0",
"react-datetime": "^2.16.3",
"react-dom": "17.0.2",
"react-final-form": "^6.5.1",
"react-final-form-arrays": "^3.1.2",
"react-final-form-listeners": "^1.0.3",
"react-hot-loader": "^4.6.3",
"react-measure": "^2.0.2",
"react-modal": "^3.8.1",
"react-motion": "^0.5.1",
"react-onclickoutside": "^6.7.0",
"react-portal": "^4.0.0",
"react-pose": "^4.0.8",
"react-pose-text": "^3.1.0",
"react-query": "^2.5.13",
"react-redux": "^7.2.0",
"react-resize-detector": "^6.6.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-select": "^1.0.0-rc.10",
"react-svg-loader": "^1.1.1",
"react-switch": "^2.0.0",
"react-table": "^7.0.1",
"react-tabs": "^2.2.2",
"react-test-renderer": "^16.5.2",
"react-text-mask": "^5.4.3",
"react-textfit": "^1.1.0",
"react-use": "^15.3.4",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.6",
"react-window-infinite-loader": "^1.0.5",
"react-youtube": "^7.5.0",
"react_ujs": "^2.4.4",
"recompose": "^0.26.0",
"redux": "^4.0.1",
"redux-actions": "^2.6.5",
"redux-analytics": "^0.3.1",
"redux-form": "^8.3.6",
"redux-mock-store": "^1.4.0",
"redux-observable": "^1.1.0",
"redux-persist": "^5.6.12",
"redux-responsive": "^4.3.8",
"redux-thunk": "^2.2.0",
"regenerator-runtime": "^0.11.0",
"reselect": "^3.0.1",
"resolve-url-loader": "^2.1.0",
"rxjs": "^6.4.0",
"sass-loader": "^6.0.6",
"shortid": "^2.2.8",
"sinon": "^6.3.5",
"start-server-and-test": "^1.7.11",
"style-loader": "^0.18.2",
"styled-components": "^4.1.3",
"styled-normalize": "^8.0.4",
"styled-system": "^3.2.1",
"svg-react-loader": "^0.4.5",
"swr": "^0.2.0",
"ts-jest": "^23.1.3",
"typescript": "^3.8.3",
"typings-for-css-modules-loader": "^1.7.0",
"warnings-to-errors-webpack-plugin": "^2.0.1",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-dev-server": "^2.7.1",
"webpack-manifest-plugin": "^1.3.1",
"webpack-merge": "^4.1.0",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"#svgr/cli": "^5.4.0",
"#testing-library/cypress": "^6.0.0",
"#testing-library/react": "^8.0.6",
"#types/classnames": "^2.2.3",
"#types/faker": "^4.1.4",
"#types/fetch-mock": "^6.0.3",
"#types/intercom-web": "^2.8.7",
"#types/jest": "^25.2.3",
"#types/jwt-decode": "^2.2.1",
"#types/moment-timezone": "^0.5.4",
"#types/qs": "^6.5.1",
"#types/query-string": "^6.3.0",
"#types/ramda": "^0.27.36",
"#types/react": "^16.7.20",
"#types/react-content-loader": "^3.1.4",
"#types/react-dates": "^17.1.14",
"#types/react-dom": "^16.0.11",
"#types/react-loadable": "^5.4.2",
"#types/react-measure": "^2.0.2",
"#types/react-modal": "^3.8.2",
"#types/react-motion": "^0.0.26",
"#types/react-onclickoutside": "^6.0.3",
"#types/react-redux": "^7.1.9",
"#types/react-router-dom": "^5.1.3",
"#types/react-select": "^1.2.7",
"#types/react-table": "^7.0.13",
"#types/react-test-renderer": "^16.0.2",
"#types/recompose": "^0.26.1",
"#types/redux-actions": "^2.6.0",
"#types/redux-form": "^7.4.16",
"#types/redux-mock-store": "^1.0.0",
"#types/shortid": "^0.0.29",
"#types/sinon": "^5.0.5",
"#types/styled-components": "^4.1.18",
"#types/styled-system": "^3.1.1",
"#types/webpack-env": "^1.13.6",
"#typescript-eslint/eslint-plugin": "^3.4.0",
"#typescript-eslint/parser": "^3.4.0",
"cypress": "6.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"jest": "^26.0.1",
"miragejs": "^0.1.35",
"pre-commit": "^1.2.2",
"prettier": "^2.0.5"
},
Any thoughts?
Moving everything to devDependencies for the most part and adding the prepare script seemed to be what I was missing.
My package.json ended up looking like this
{
"version": "0.1.0",
"main": "dist/index.js",
"module": "build/index.es.js",
"jsnext:main": "build/index.es.js",
"files": ["dist", "build"],
"scripts": {
"prepare": "npm run build",
"build": "rollup -c",
"format": "prettier-standard --format",
"test": "jest --coverage",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"lint": "eslint 'src/**/*.{{j,t}s,{j,t}sx}'",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"peerDependencies": {
"#material-ui/core": "4.11.4",
"react": "^16"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#material-ui/core": "4.11.4",
"#storybook/addon-actions": "^6.2.9",
"#storybook/addon-essentials": "^6.2.9",
"#storybook/addon-knobs": "^6.2.9",
"#storybook/addon-links": "^6.2.9",
"#storybook/react": "^6.2.9",
"#types/jest": "^24.0.24",
"#typescript-eslint/eslint-plugin": "^4.25.0",
"#typescript-eslint/parser": "^4.25.0",
"babel-loader": "^8.2.2",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-react": "^7.23.2",
"eslint": "^7.27.0",
"jest": "^24.9.0",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-svg": "^13.0.6",
"react": "^17.0.2",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-typescript2": "^0.25.3",
"rollup": "^1.27.13",
"standard-prettier": "^1.0.1",
"standard": "^14.3.1",
"storybook-addon-paddings": "^4.1.1",
"storybook-dark-mode": "^1.0.8",
"ts-jest": "^24.2.0",
"typescript": "^3.7.3"
},
"jest": {
"preset": "ts-jest",
"testEnvironment": "node"
},
"standard": {
"ignore": [
"node_modules/",
"build/"
]
}
}
And rollup.config by request
import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import resolve from 'rollup-plugin-node-resolve'
import pkg from './package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs',
exports: 'named',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
exports: 'named',
sourcemap: true
}
],
external: ["react", "#material-ui/core", "react-is"],
plugins: [
external(),
resolve(),
typescript({
rollupCommonJSResolveHack: true,
exclude: [
'**/__tests__/**',
'**/*.stories.*'
],
clean: true
}),
commonjs({
include: ['node_modules/**'],
namedExports: {}
})
]
}
I had exactly the same setup and problem, but I focussed too much on the problem, that the imported MUI-component is calling this error. But when you read the error message closely, there is also the possibility of "You might have more than one copy of React in the same app". The reason for my wrong conclusion was that my app did not throw an error once I removed the MUI component. Accordingly, it could not be the React error. Unfortunately, this was not the case! After some more desperate research on every detail, I found this post: Invalid Hook call....
So inside the APP folder (which is using your library) I ran the command npm link <path_to_local_library>/node_modules/react, which fixed my error. See the details for npm link.
I am getting following errors in node terminal when I try to start my react-app
[at-loader] ./node_modules/#types/webpack/index.d.ts:23:16
TS2665: Invalid module name in augmentation. Module 'webpack/lib/dependencies/HarmonyExportSpecifierDependency' resolves to an untyped module at 'C:/Work/walmart/gravity/Finance-AI-App/node_modules/webpack/lib/dependencies/HarmonyExportSpecifierDependency.js', which cannot be augmented.
[at-loader] ./node_modules/#types/webpack/index.d.ts:24:12
TS2693: 'any' only refers to a type, but is being used as a value here.
[at-loader] ./node_modules/#types/webpack/index.d.ts:701:51
TS1093: Type annotation cannot appear on a constructor declaration.
[at-loader] ./node_modules/#types/webpack/index.d.ts:701:51
TS2526: A 'this' type is available only in a non-static member of a class or interface.
[at-loader] ./node_modules/#types/webpack/index.d.ts:2050:44
TS2694: Namespace 'webpack.compilation' has no exported member 'Module'.
my package.json contains
"devDependencies": {
"#babel/cli": "7.0.0",
"#babel/core": "7.0.0",
"#babel/preset-env": "7.0.0",
"#babel/preset-react": "7.0.0",
"#types/d3": "^5.0.0",
"#types/d3-sankey": "^0.11.0",
"#types/jest": "23.3.1",
"#types/lodash": "4.14.116",
"#types/node": "10.7.1",
"#types/react": "16.7.7",
"#types/react-dom": "16.0.10",
"#types/react-redux": "6.0.7",
"#types/react-router": "4.0.30",
"#types/react-router-dom": "4.3.0",
"awesome-typescript-loader": "5.2.1",
"babel-loader": "8.0.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "1.0.0",
"dotenv": "6.2.0",
"express": "4.16.3",
"file-loader": "2.0.0",
"html-webpack-plugin": "3.2.0",
"husky": "1.1.2",
"ignore-loader": "0.1.2",
"image-webpack-loader": "^4.4.0",
"jest": "23.5.0",
"node-sass": "4.9.3",
"prettier": "1.15.3",
"react-addons-test-utils": "15.6.2",
"react-hot-loader": "4.3.4",
"reactotron-react-js": "2.1.1",
"reactotron-redux": "2.1.0",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"stylelint": "9.5.0",
"stylelint-config-recommended-scss": "3.2.0",
"stylelint-config-standard": "18.2.0",
"stylelint-webpack-plugin": "0.10.5",
"tslint": "5.11.0",
"tslint-config-prettier": "1.15.0",
"typescript": "3.1.0-rc.20180911",
"uglifyjs-webpack-plugin": "1.3.0",
"webpack": "4.17.1",
"webpack-cli": "3.1.0",
"webpack-dev-middleware": "3.1.3",
"webpack-dev-server": "3.1.5",
"webpack-merge": "4.1.4"
},
"dependencies": {
"#material/elevation": "0.40.1",
"#types/webpack": "^4.46.2",
"#vx/axis": "0.0.176",
"#vx/curve": "0.0.165",
"#vx/event": "0.0.165",
"#vx/glyph": "0.0.170",
"#vx/gradient": "0.0.165",
"#vx/grid": "0.0.179",
"#vx/group": "0.0.170",
"#vx/responsive": "0.0.179",
"#vx/scale": "0.0.165",
"#vx/shape": "0.0.176",
"#vx/text": "0.0.175",
"#vx/tooltip": "0.0.165",
"anychart": "^8.6.0",
"anychart-react": "^1.4.1",
"axios": "^0.18.0",
"babel-preset-minify": "0.5.0",
"bootstrap": "^4.3.1",
"compression": "1.7.3",
"connected-react-router": "4.4.1",
"d3": "^5.9.2",
"d3-plugins-sankey": "^1.2.1",
"d3-sankey": "^0.12.3",
"dayjs": "1.7.7",
"file-saver": "^2.0.1",
"graphql-request": "1.8.2",
"helmet": "3.15.0",
"history": "4.7.2",
"jquery": "^3.4.1",
"localforage": "1.7.3",
"lodash": "4.17.10",
"mdi-react": "4.4.0",
"mocker-data-generator": "2.6.6",
"number-abbreviate": "2.0.0",
"popper.js": "^1.14.3",
"prop-types": "^15.7.2",
"react": "16.7.0-alpha.2",
"react-dom": "16.7.0-alpha.2",
"react-faux-dom": "^4.5.0",
"react-redux": "5.0.7",
"react-redux-loading-bar": "^4.2.0",
"react-redux-spinner": "^2.0.0",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"redux": "4.0.0",
"redux-persist": "5.10.0",
"redux-thunk": "2.3.0",
"request-promise": "4.2.2",
"reselect": "4.0.0",
"stylelint-scss": "3.1.3",
"tslint-react": "3.6.0",
"url-loader": "^2.1.0",
"uuid": "3.3.2",
"xlsx": "^0.14.3"
}
I am not getting any issues when running app in my local. But still the terminal contains this log. Also it prevents to push the code to repo since validation gets failed in webpack scripts. I tried to install latest version and unable to get rid of this.
Can someone please help?
The version of #types/webpack in your package.json (v4.46.2) is incompatible with the version of Typescript you are running.
Try running npm view #types/webpack. In the output you can find a list of tags named for Typescript versions, e.g. ts3.9, ts3.8, etc. Each tag is associated with the latest version of #types/webpack that is compatible with that version of Typescript.
Good luck!
I created my app with dotnet new reactredux (2.0) some time ago, it uses webpack 2.5.3, I'm really keeen to update to more up to date version, however there are plenty of dependecies that don't support newer versions. Is there anybody who successfully did that?
dependecies that bother me a most:
aspnet-webpack
aspnet-webpack-react
seems discountinued
there my full project dependencies:
"devDependencies": {
"#types/history": "4.6.0",
"#types/jest": "^22.1.3",
"#types/react": "^16.3.13",
"#types/react-dom": "^16.0.4",
"#types/react-hot-loader": "3.0.3",
"#types/react-redux": "4.4.45",
"#types/react-router": "^4.0.23",
"#types/react-router-dom": "^4.2.5",
"#types/react-router-redux": "5.0.3",
"#types/webpack": "2.2.15",
"#types/webpack-env": "1.13.0",
"#types/fetch-mock": "^6.0.0",
"#types/enzyme": "^3.1.10",
"#types/enzyme-adapter-react-16": "^1.0.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"css-loader": "0.28.4",
"domain-task": "^3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"foundation-sites": "^6.4.4-rc1",
"history": "4.6.3",
"jest": "22.4.2",
"jest-cli": "22.4.2",
"fetch-mock": "^6.0.1",
"jquery": "3.2.1",
"node-noop": "1.0.0",
"node-sass": "^4.7.2",
"react": "^16.3.2",
"react-dom": "^16.2.0",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-router-dom": "4.2.2",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"sass-loader": "^6.0.6",
"style-loader": "0.18.2",
"ts-jest": "22.0.4",
"ts-nameof": "^0.10.3",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"circular-dependency-plugin": "^4.4.0"