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"
Related
I started a new job and here the client is written in react. The big problem is that everything is very old and uses classes instead of React hooks. One simple example of an issue is the need to use mobx 6 or higher however this will require going over all the classes removing the #observable and changing it to make it observable. I don't even know how to start transitioning to a newer version of React with hooks since there is no way of doing it gradually only all at once. In any case if someone can help me with a suggestion or what can be done I will appreciated very much here is dependencies in my package.json if it's of any help
"dependencies": {
"babel-plugin-react-intl": "~3.0.1",
"babel-plugin-wildcard": "~2.1.2",
"bestzip": "^2.2.0",
"bootstrap": "~4.2.1",
"classnames": "~2.2.6",
"config": "~1.27.0",
"coreui.io": "^1.0.0-alpha.6",
"cross-env": "~5.2.0",
"event-emitter-es6": "~1.1.5",
"font-awesome": "~4.7.0",
"js-file-download": "~0.4.4",
"jsx-control-statements": "~3.2.8",
"lodash": "~4.17.4",
"mobx-react-intl": "~1.4.0",
"moment": "~2.20.1",
"papaparse": "~4.3.7",
"preact-context": "~1.1.2",
"query-string": "~6.1.0",
"react": "16.8.0",
"react-app-polyfill": "~0.2.0",
"react-beautiful-dnd": "^13.1.0",
"react-bootstrap-table": "~4.3.1",
"react-dates": "~20.0.0",
"react-dom": "16.8.0",
"react-fast-compare": "~2.0.4",
"react-fontawesome": "~1.6.1",
"react-google-charts": "~3.0.11",
"react-inlinesvg": "~0.6.2",
"react-interval": "~2.0.2",
"react-intl": "~2.8.0",
"react-json-view": "^1.19.1",
"react-ladda": "~6.0.0",
"react-rangeslider": "~2.2.0",
"react-router-dom": "~4.3.1",
"react-select": "~1.2.1",
"react-smooth-range-input": "~0.2.4",
"react-transition-group": "~1.2.1",
"reactstrap": "~7.1.0",
"shx": "^0.3.3",
"simple-line-icons": "~2.4.1",
"superagent": "~3.8.0",
"superagent-auth-bearer": "~0.0.1",
"svgo": "~1.0.3",
"three2": "npm:three#0.125.2",
"webpack-cli": "~3.2.1"
},
"devDependencies": {
"babel": "~6",
"babel-cli": "~6.24.1",
"babel-eslint": "~10.0.1",
"babel-loader": "~7.1.1",
"babel-plugin-flow-react-proptypes": "~3.3.0",
"babel-plugin-syntax-async-functions": "~6.13.0",
"babel-plugin-transform-decorators-legacy": "~1.3.4",
"babel-polyfill": "~6.23.0",
"babel-preset-env": "~1.6.0",
"babel-preset-es2015": "~6.24.1",
"babel-preset-react": "~6.24.1",
"babel-preset-stage-1": "~6.24.1",
"babel-preset-stage-2": "~6.24.1",
"babili-webpack-plugin": "~0.1.2",
"cobertura-merge": "*",
"copy-webpack-plugin": "~4.6.0",
"css-hot-loader": "~1.3.0",
"css-loader": "~2.1.0",
"eslint": "~4.4.1",
"eslint-config-wix": "~1.1.16",
"eslint-loader": "~1.9.0",
"extract-text-webpack-plugin": "~4.0.0-beta.0",
"file-loader": "~3.0.1",
"flow-bin": "~0.48.0",
"flow-status-webpack-plugin": "~0.1.7",
"html-webpack-plugin": "~3.2.0",
"install": "~0.10.1",
"jest": "~20.0.4",
"jest-cli": "~20",
"jest-html-reporters": "^1.2.1",
"jest-junit": "*",
"mobx": "~5.9.0",
"mobx-react": "~5.4.3",
"mobx-react-devtools": "~4.2.15",
"node-sass": "~4.14.0",
"nodemon": "~1.11.0",
"npm": "~5.3.0",
"optimize-css-assets-webpack-plugin": "~3.1.1",
"preact": "~10.0.0-alpha.0",
"preact-compat": "~3.18.4",
"react-c3js": "~0.1.20",
"resolve-url": "~0.2.1",
"resolve-url-loader": "~3.0.0",
"sass-loader": "~7.1.0",
"style-loader": "~0.18.2",
"svg-react-loader": "~0.4.6",
"url-loader": "~1.1.2",
"webpack": "~4.29.0",
"webpack-dev-server": "~3.1.14",
"webpack-merge": "~4.1.0"
},
I've tried to migrate material ui from v3 to v4 , but have got this issue
I thought that this issue related to prop IconComponent for Select component , but after adding it to each #material-ui/core/Select component in my project it didn't help .
Also I've found this changes in material ui github repository https://github.com/mui-org/material-ui/pull/17390/files maybe it will help
Also you can find below all my dependencies:
"dependencies": {
"#babel/runtime": "^7.6.2",
"#date-io/date-fns": "0.0.2",
"#material-ui/core": "4.4.3",
"#material-ui/icons": "3.0.1",
"#material-ui/pickers": "3.2.6",
"#material-ui/styles": "^4.4.3",
"axios": "0.19.0",
"classnames": "2.2.6",
"compression-webpack-plugin": "3.0.0",
"connected-react-router": "6.4.0",
"date-fns": "2.0.0-alpha.27",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0",
"history": "4.6.3",
"humps": "2.0.0",
"jss": "^10.0.0",
"jss-camel-case": "6.1.0",
"jss-default-unit": "8.0.2",
"jss-expand": "5.3.0",
"jss-extend": "6.2.0",
"jss-global": "3.0.0",
"jss-nested": "6.0.1",
"jss-props-sort": "6.0.0",
"jss-vendor-prefixer": "8.0.1",
"lodash": "4.17.14",
"moment": "2.23.0",
"normalizr": "3.3.0",
"prop-types": "15.6.2",
"qs": "6.5.2",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-dropzone": "10.1.4",
"react-hot-loader": "4.8.8",
"react-image": "2.1.1",
"react-intl": "2.7.2",
"react-intl-po": "2.2.2",
"react-intl-redux": "2.0.2",
"react-motion": "0.5.2",
"react-pose": "4.0.8",
"react-redux": "7.0.3",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-spinners": "0.4.7",
"react-universal-component": "4.0.0",
"recompose": "0.30.0",
"redux": "4.0.1",
"redux-axios-middleware": "4.0.0",
"redux-devtools-extension": "2.13.8",
"redux-form": "8.2.2",
"redux-form-validators": "^3.2.2",
"redux-immutable-state-invariant": "2.1.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"store2": "2.7.1",
"uglifyjs-webpack-plugin": "2.0.1"
},
elementType was added in prop-types 15.7.0, and you are using 15.6.2
Upgrade your prop-types to version 15.7.0 or higher and the error should disappear.
I am getting the following error when I am building my Reacttsx project.
Error:
node_modules/#types/react-router/node_modules/#types/react/index.d.ts
(2746,14): Duplicate identifier 'LibraryManagedAttributes'
Following is my package.json file
"devDependencies": {
"enzyme-adapter-react-16": "1.1.1",
"react-scripts-ts": "2.14.0",
"rimraf": "2.6.2",
"#types/jest": "^23.3.10",
"#types/node": "^10.12.11",
"#types/react": "16.7.18",
"#types/react-dom": "^16.0.11",
"typescript": "^3.2.1"
},
"dependencies": {
"#progress/kendo-drawing": "^1.5.7",
"#progress/kendo-react-pdf": "^2.5.0",
"#types/d3": "5.0.0",
"#types/enzyme": "3.1.9",
"#types/react-loadable": "5.3.3",
"#types/react-redux": "5.0.15",
"#types/react-router-dom": "^4.3.1",
"antd": "3.12.1",
"axios": "^0.18.0",
"elasticsearch": "^15.2.0",
"google-maps-react": "^2.0.2",
"moment": "^2.24.0",
"react": "^16.7.0",
"react-csv": "^1.0.19",
"react-dom": "^16.6.3",
"react-drawer": "1.3.4",
"react-file-reader": "1.1.4",
"react-google-autocomplete": "^1.0.18",
"react-google-maps": "^9.4.5",
"react-loadable": "5.3.1",
"react-loader-spinner": "^2.2.0",
"react-moment": "^0.8.4",
"react-onclickoutside": "^6.7.1",
"react-redux": "5.0.7",
"react-router": "4.2.0",
"react-router-dom": "^4.3.1",
"react-router-redux": "4.0.8",
"react-scripts-ts": "3.1.0",
"react-toastify": "4.0.0-rc.5",
"react-transition-group": "2.3.1",
"redux": "3.7.2",
"socket.io-client": "^2.2.0"
}
I am using npm install for installing packages. Please suggest
please help me to understand what is the problem
when I start npm start I have a error
_this.compiler.applyPluginsAsync is not a function
npm version is 6.4.1
node version is v 10.13.0
my package.json file
"devDependencies": {
"#types/enzyme": "^3.1.15",
"#types/enzyme-adapter-react-16": "^1.0.3",
"#types/jest": "^23.3.9",
"#types/node": "^10.12.9",
"#types/react": "^16.7.6",
"#types/react-dom": "^16.0.9",
"#types/react-intl": "^2.3.12",
"#types/react-redux": "^6.0.9",
"#types/react-router": "^4.4.1",
"#types/react-router-dom": "^4.3.1",
"#types/react-select": "^2.0.7",
"#types/react-table": "^6.7.16",
"#types/reactstrap": "^6.4.2",
"#types/redux": "^3.6.0",
"autoprefixer": "7.1.6",
"babel-jest": "^22.1.0",
"babel-loader": "^7.1.2",
"babel-preset-react-app": "^3.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"fork-ts-checker-webpack-plugin": "^0.2.10",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"json-server": "^0.14.0",
"node-sass": "^4.9.3",
"postcss-loader": "2.0.8",
"react-dev-utils": "^5.0.3",
"react-dropzone": "^5.1.1",
"redux-devtools-extension": "^2.13.5",
"resolve": "1.6.0",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"ts-jest": "22.0.1",
"ts-loader": "^2.3.7",
"tsconfig-paths-webpack-plugin": "^2.0.0",
"tslint": "^5.7.0",
"tslint-config-prettier": "^1.16.0",
"tslint-react": "^3.2.0",
"typescript": "^3.1.6",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "0.6.2",
"webpack": "^4.26.0",
"webpack-dev-server": "^3.1.10",
"webpack-manifest-plugin": "1.3.2"
}
According to the official repo of fork-ts-checker-webpack-plugin, this was reported in this issue and fixed in version 0.6.1. Update that package and try again to see if it happens.
I am currently working on a react project with karma, enzyme as my test framework. I have gone through the enzyme document from: https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md. In this document, it says that to.have.equal is the API to check a value. See below example.
expect(wrapper.find(Foo)).to.have.length(3);
but when I write my test cases, karma complains to is not defined. After some searching I have to use below code instead of to.have.equal.
expect(wrapper.find(Foo).length).toEqual(1);
The enzyme version is used is '^2.5.1'. Did I use a wrong version? Or the document is out of date? If so, where I can find the correct API document?
--EDIT1--
Below is the command I used to run karma:
./node_modules/karma/bin/karma start config/karma.conf.js --single-run --browsers PhantomJS
Below is the dependencies listed in my package.json file:
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.6.5",
"babel-eslint": "^6.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-preset-airbnb": "^2.1.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-2": "^6.13.0",
"classnames": "^2.2.5",
"cross-env": "^1.0.7",
"css-loader": "^0.23.1",
"enzyme": "^2.5.1",
"eslint": "^3.0.1",
"eslint-plugin-babel": "^3.0.0",
"eslint-plugin-react": "^5.2.2",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.10.0",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^0.13.19",
"karma-babel-preprocessor": "^6.0.1",
"karma-browserify": "^5.0.0",
"karma-chrome-launcher": "^0.2.2",
"karma-jasmine": "^0.3.7",
"karma-mocha": "^0.2.1",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"koa": "^1.2.0",
"koa-router": "^5.4.0",
"koa-serve-index": "^1.1.1",
"koa-static": "^2.0.0",
"koa-views": "^4.1.0",
"koa-webpack-dev-middleware": "^1.2.1",
"koa-webpack-hot-middleware": "^1.0.3",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"loader-utils": "^0.2.16",
"phantomjs-prebuilt": "^2.1.4",
"postcss": "^5.1.2",
"postcss-display-inline-block": "^1.0.0",
"postcss-easysprites": "^0.1.7",
"postcss-import": "^8.1.2",
"postcss-less": "^0.14.0",
"postcss-loader": "^0.9.1",
"postcss-modules": "^0.5.0",
"precss": "^1.4.0",
"raphael": "^2.2.1",
"react-css-modules": "^3.7.6",
"react-hot-loader": "^1.3.0",
"rimraf": "^2.4.3",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dashboard": "^0.0.1",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.12.2"
},
"dependencies": {
"axios": "^0.15.2",
"bootstrap": "^3.3.7",
"history": "^3.0.0",
"jquery": "^3.0.0",
"react": "^15.3.2",
"react-addons-test-utils": "^15.3.2",
"react-bootstrap": "^0.30.5",
"react-dom": "^15.0.1",
"react-form": "^0.0.2",
"react-paginate": "^2.2.3",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-router": "^2.1.2",
"redux-thunk": "^2.1.0"
}
Enzyme (and AFAIK the examples) was written with Mocha in mind:
Enzyme was originally designed to work with Mocha [...]
See the Karma example:
it("contains spec with an expectation", function() {
expect(mount(<Foo />).find('.foo').length).toBe(1);
});
As the docs state:
Enzyme is compatible with Karma, but often requires a little bit of configuration.
Don't conflate test runners with rendering frameworks, or assertion libraries (like Chai) with either.