Related
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 want to import table container for my react application. but I can't use it because of my material ui version error.
How i update my version to latest version. I suppose that it's the solution for that error.
I have already tried npm uninstall and npm uninstall, but didn't solve yet. Help me.
{
"name": "material-dashboard-react",
"version": "1.6.0",
"description": "Material Dashboard React. Coded by Creative Tim",
"private": false,
"main": "dist/index.js",
"dependencies": {
"#khanacademy/react-multi-select": "^0.3.3",
"#lls/react-light-calendar": "^2.0.7",
"#material-ui/core": "^3.9.4",
"#material-ui/icons": "3.0.2",
"#progress/kendo-react-dropdowns": "^3.4.1",
"#progress/kendo-react-intl": "^3.4.1",
"animate.css": "^3.7.2",
"axios": "^0.19.1",
"bootstrap": "^4.3.1",
"chartist": "0.10.1",
"classnames": "2.2.6",
"firebase": "^7.0.0",
"history": "4.7.2",
"jquery": "^1.9.1",
"material-ui-next-responsive-table": "^0.5.1",
"multi-select-react": "^0.1.8",
"multiselect-dropdown-react": "^1.0.5",
"multiselect-react-dropdown": "^1.2.4",
"perfect-scrollbar": "1.4.0",
"prettier": "1.16.4",
"prop-types": "15.7.1",
"react": "^16.8.1",
"react-bootstrap": "^1.0.0-beta.12",
"react-bootstrap-dialog": "^0.13.0",
"react-bootstrap-modal": "^4.2.0",
"react-chartist": "0.13.3",
"react-confirm-alert": "^2.4.1",
"react-datepicker": "^2.9.6",
"react-devtools": "^4.4.0",
"react-dialog": "^1.0.2",
"react-dom": "16.8.1",
"react-dropdown": "^1.6.4",
"react-dropdown-multiselect": "^1.0.0",
"react-dropdown-tree-select": "^2.1.1",
"react-google-maps": "9.4.5",
"react-light-calendar": "^1.0.3",
"react-multiple-select-dropdown": "^2.0.0",
"react-multiselect-checkboxes": "^0.1.1",
"react-notification-alert": "0.0.12",
"react-notifications": "^1.4.3",
"react-notifications-component": "^2.1.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"react-select": "^3.0.8",
"react-swipeable-views": "0.13.1",
"react-table-container": "^2.0.3",
"react-toastify": "^5.4.0",
#material-ui/core version ^3.9.4 doesn't have <TableContainer>
so you need to update #materia-ui/core version
latest version v4.9.2, so please update version and try
1) Go to package.json file in your project root.
2) Locate #material-ui/core in dependencies. Currently, you will see it as "#material-ui/core": "^3.9.4".
3) Now edit the version number. For example, "#material-ui/core": "^4.9.2".
4) Run npm install.
That's it!
You can follow this procedure for any dependency when you want to change the version. But make sure that those versions are compatible with each other dependencies (if any).
Good luck!
Doing Lynda - Building and Deploying a Full-Stack React Application tutorial, and get stuck at a point, get following error:
./src/index.js
Error: [BABEL] /Users/kukodajanos/Workspace/ticket/src/index.js: The (relay-query) Babel 5 plugin is being run with an unsupported Babel version. (While processing: "/Users/kukodajanos/Workspace/ticket/node_modules/babel-plugin-react-relay/lib/index.js")
at Array.reduce (<anonymous>)
I tried suggestion written here: https://github.com/facebookarchive/relay-starter-kit/issues/74
npm i babel-relay-plugin#latest --save
It did not help, give same error.
Dependencies from package.json here:
"dependencies": {
"#babel/core": "7.5.5",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "1.13.0",
"#typescript-eslint/parser": "1.13.0",
"babel-eslint": "10.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.3",
"babel-preset-react-app": "^9.0.1",
"babel-relay-plugin": "^0.11.0",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"eslint": "^6.1.0",
"eslint-config-react-app": "^5.0.1",
"eslint-loader": "2.2.1",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.8.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.8.0",
"jest-watch-typeahead": "0.3.1",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-app-polyfill": "^1.0.2",
"react-dev-utils": "^9.0.3",
"react-dom": "^16.9.0",
"react-router": "3.0.2",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.2",
"url-loader": "2.1.0",
"webpack": "4.39.1",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
}
"devDependencies": {
"babel-plugin-react-relay": "^0.10.0"
}
I have an AngularJS project written in TypeScript with PhpStorm.
When compiling with Webpack, I get the following error :
Error:(42, 43) TS2694:Namespace 'angular' has no exported member 'angularFileUpload'.
So there is a problem somewhere. But what bugs me is that PhpStorm is still able to resolve the type and to open the file defining it while complaining that the type cannot be resolved :
Here's an animated gif showing the behavior:
I have the same problem with another library.
In fact, it seems that typings trying to extend the ng namespace are overridden by something later on, and I don't find where.
I have included #types/ng-file-upload and defined the types root in my tsconfig like shown in the animated gif.
Thanks in advance for any advise you could give me.
EDIT :
Here's the content of my package.json file:
{
"name": "...",
"version": "0.0.1",
"description": "...",
"repository": {
...
},
"scripts": {
"gulp": "gulp build --theme=default",
"gulp:prod": "gulp build --theme=default --env=prod",
"gulp:watch": "gulp build --theme=default --watch",
"gulp:watch:prod": "gulp --theme=default --watch --env=prod",
"webpack:native:watch": "webpack --config build/webpack/config/root.config.ts --env.app=native --env.target=julien-localhost --watch",
"webpack:native:prod": "webpack --config build/webpack/config/root.config.ts --env.app=native --env.target=production --env.env=prod",
"webpack:angularjs/admin:watch": "webpack --config build/webpack/config/root.config.ts --env.app=angularjs/admin --env.target=julien-localhost --watch",
"webpack:angularjs/admin:prod": "webpack --config build/webpack/config/root.config.ts --env.app=angularjs/admin --env.target=production --env.env=prod"
},
"dependencies": {
"angular": "^1.6.9",
"angular-animate": "^1.6.9",
"angular-aria": "^1.6.9",
"angular-clipboard": "~1.6.2",
"angular-local-storage": "~0.7.1",
"angular-material": "^1.1.9",
"angular-messages": "^1.6.9",
"angular-moment-picker": "^0.10.2",
"angular-resource": "^1.6.9",
"angular-sanitize": "^1.6.9",
"angular-translate": "~2.17.0",
"angular-ui-notification": "^0.3.6",
"angular-ui-router.statehelper": "~1.3.1",
"bootstrap": "^4.1.3",
"font-awesome": "~4.7.0",
"inversify": "^4.13.0",
"jquery": "^3.3.1",
"jquery-backstretch": "^2.1.16",
"jquery-mousewheel": "^3.1.13",
"jquery-ui": "^1.12.1",
"lodash": "^4.17.10",
"mainloop.js": "^1.0.4",
"malihu-custom-scrollbar-plugin": "^3.1.5",
"moment": "~2.20.1",
"moment-timezone": "^0.5.14",
"ng-file-upload": "~12.2.13",
"parsleyjs": "^2.8.1",
"particles.js": "^2.0.0",
"q": "^1.5.1",
"raven-js": "^3.26.4",
"reflect-metadata": "^0.1.12",
"satellizer": "^0.15.5",
"scrollmonitor": "^1.2.4",
"toastr": "^2.1.4"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.3.1",
"#types/angular": "~1.6.43",
"#types/angular-mocks": "^1.5.11",
"#types/angular-route": "^1.3.4",
"#types/angular-ui-notification": "0.0.4",
"#types/angular-ui-router": "^1.1.40",
"#types/es6-promise": "^3.3.0",
"#types/jquery": "^3.3.6",
"#types/lodash": "^4.14.104",
"#types/modernizr": "^3.5.2",
"#types/ng-file-upload": "~12.2.2",
"#types/node": "^9.6.34",
"#types/q": "^1.5.1",
"#types/reflect-metadata": "^0.1.0",
"#types/source-map": "~0.5.7",
"#types/uglify-js": "^2.6.30",
"#types/webpack-env": "^1.13.6",
"#uirouter/angularjs": "^1.0.15",
"awesome-typescript-loader": "^3.4.1",
"browser-sync": "~2.23.6",
"browser-sync-webpack-plugin": "^2.0.1",
"chalk": "^2.3.1",
"circular-dependency-plugin": "^4.4.0",
"clone": "2.1.2",
"copy-webpack-plugin": "~4.4.1",
"force-case-sensitivity-webpack-plugin": "^0.2.1",
"gulp-angular-embed-templates": "^2.3.0",
"gulp-autoprefixer": "^5.0.0",
"gulp-compass": "^2.1.0",
"gulp-ng-annotate": "^2.1.0",
"gulp-yaml-packages": "~1.0.15",
"html-webpack-plugin": "~2.30.1",
"loader-utils": "^1.1.0",
"ngtemplate-loader": "~2.0.1",
"node-neat": "^2.0.0-beta.0",
"raw-loader": "0.5.1",
"ts-loader": "~3.5.0",
"ts-node": "~5.0.0",
"tslib": "^1.9.0",
"tslint": "~5.9.1",
"tslint-loader": "~3.5.3",
"typescript": "^2.9.2",
"url-loader": "0.6.2",
"webpack": "^3.11.0",
"webpack-merge": "~4.1.1",
"webpack-strip-block": "github:jballant/webpack-strip-block"
}
}
I've found the problem...
My tsconfig.json file contains:
{
"compilerOptions": {
[...]
"types": ["reflect-metadata", "webpack-env"]
}
}
And that's the problem, this limits what typings are included by the compiler to the ones defined in the option :
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types
That's one more check you need to make if you're in the same situation.
If that can help someone.
I am seeing a strange crash in the Chrome and Firefox when my code initially loads:
Uncaught TypeError: angular.module(...).constant(...).constant(...).factory(...).factory(...).factory(...).directive(...) is not a function
Next I see a suspicious:
ReferenceError: io is not defined in my socket factory
angular.module("xxx").factory("socket", ...)
when it attempts to access io at the line containing:
var ioSocket = io("", {
path: "/socket.io-client"
})
NOTE: I only see this crash when running a non minimized version of the code.
This project was initially generated by yeoman angular-fullstack. Also I don't believe this second error has anything to do with having something wrong with importing socket.io/socket.io.js -- only an artifact of the first error.
NOTE:
grunt serve
works properly, but
grunt serve:dist
exhibits the crash above.
I originally thought that I had a dependency injection issue and so I turned on the directive ng-strict-di and was able execute grunt serve without any errors. SO this seems to suggest that the failure of grunt serve:dist isn't an injection issue, although I do have many packages being used.
Can you suggest some modifications to the yeoman settings that may help determine what is breaking the code during the build.
grunt serve:dist
basically adds:
concat, uglify, cssmin, and cdnigy
I already have uglify set to not mangle with the option: mangle:false.
I have been fighting with this for three days and I haven't made much progress. If you have any ideas, I would GREATLY appreciate it!
THANKS!
I am running node v4.4.4.
And the package.json file is:
{
"name": "tracker2",
"version": "1.0.0",
"main": "server/app.js",
"dependencies": {
"JSONStream": "^1.1.1",
"acorn": "^3.1.0",
"assert": "^1.3.0",
"aws-sdk": "^2.3.11",
"base64-stream": "^0.1.3",
"bcryptjs": "^2.3.0",
"bluebird": "^3.3.5",
"body-parser": "^1.15.1",
"bson": "^0.4.23",
"bson-objectid": "^1.1.4",
"codemirror": "^5.14.2",
"composable-middleware": "^0.3.0",
"compression": "^1.6.2",
"connect-mongo": "^1.1.0",
"connect-multiparty": "^2.0.0",
"cookie-parser": "^1.4.1",
"ejs": "^2.4.1",
"errorhandler": "^1.4.3",
"exectimer": "^2.0.0",
"express": "^4.13.4",
"express-handlebars": "^3.0.0",
"express-jwt": "^3.4.0",
"express-session": "^1.13.0",
"extend": "^3.0.0",
"gc-stats": "https://registry.npmjs.org/gc-stats/-/gc-stats-0.0.6.tgz",
"github": "^0.2.4",
"github-api": "^1.2.1",
"heapdump": "https://registry.npmjs.org/heapdump/-/heapdump-0.3.7.tgz",
"html2plaintext": "^1.0.1",
"htmlparser": "^1.7.7",
"htmlparser2": "^3.9.0",
"ical-generator": "^0.2.7",
"js-json": "^0.1.4",
"jsonwebtoken": "^6.2.0",
"jws": "^3.1.3",
"jwt-decode": "^2.0.1",
"lodash": "^4.12.0",
"method-override": "~2.3.3",
"mime-types": "^2.1.11",
"mocha": "^2.4.5",
"moment": "https://registry.npmjs.org/moment/-/moment-2.10.6.tgz",
"moment-timezone": "^0.5.4",
"mongodb": "^1.4.40",
"mongoose": "^4.4.14",
"mongoskin": "^1.4.13",
"monk": "^1.0.1",
"morgan": "^1.7.0",
"ng-file-upload": "^12.0.4",
"nodemailer": "^2.4.1",
"nodemailer-sendgrid-transport": "^0.2.0",
"nodemailer-sendmail-transport": "^1.0.0",
"passport": "^0.3.2",
"passport-facebook": "latest",
"passport-github": "^1.1.0",
"passport-github2": "^0.1.10",
"passport-google-oauth": "latest",
"passport-local": "~1.0.0",
"passport-twitter": "latest",
"phantomjs-prebuilt": "^2.1.7",
"q": "^1.4.1",
"random-id": "0.0.2",
"rekuire": "^0.1.9",
"request": "^2.72.0",
"serve-favicon": "^2.3.0",
"sessionstore": "^1.2.13",
"shrinkwrap": "^0.4.0",
"socket.io": "^1.4.6",
"socket.io-client": "^1.4.0",
"socketio-jwt": "^4.3.4",
"sprintf-js": "^1.0.2",
"ssl-root-cas": "^1.1.10",
"tmp": "0.0.28",
"tracer": "^0.8.3",
"uri.js": "^0.1.3",
"uuid": "^2.0.2",
"xmldom": "^0.1.22"
},
"devDependencies": {
"connect-livereload": "^0.5.4",
"grunt": "^1.0.1",
"grunt-angular-templates": "^1.0.3",
"grunt-asset-injector": "^0.1.0",
"grunt-autoprefixer": "^3.0.4",
"grunt-build-control": "DaftMonk/grunt-build-control",
"grunt-concurrent": "^2.3.0",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-htmlmin": "^1.4.0",
"grunt-contrib-imagemin": "^1.0.0",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-dom-munger": "^3.4.0",
"grunt-env": "~0.4.4",
"grunt-express-server": "^0.5.3",
"grunt-google-cdn": "~0.4.3",
"grunt-karma": "^1.0.0",
"grunt-mocha-test": "~0.12.7",
"grunt-newer": "^1.2.0",
"grunt-ng-annotate": "^2.0.2",
"grunt-node-inspector": "^0.4.1",
"grunt-nodemon": "^0.4.2",
"grunt-open": "~0.2.3",
"grunt-protractor-runner": "^3.1.0",
"grunt-rev": "~0.1.0",
"grunt-svgmin": "^3.2.0",
"grunt-usemin": "^3.1.1",
"grunt-wiredep": "^2.0.0",
"jit-grunt": "^0.10.0",
"jshint-stylish": "^2.2.0",
"karma": "^0.13.22",
"karma-chrome-launcher": "^1.0.1",
"karma-coffee-preprocessor": "^1.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-html2js-preprocessor": "^1.0.0",
"karma-jade-preprocessor": "0.0.11",
"karma-jasmine": "^1.0.2",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-ng-jade2js-preprocessor": "^0.2.1",
"karma-ng-scenario": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-requirejs": "^1.0.0",
"karma-script-launcher": "^1.0.0",
"open": "~0.0.5",
"requirejs": "^2.2.0",
"should": "^8.3.1",
"supertest": "^1.2.0",
"time-grunt": "^1.3.0"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"start": "node server/app.js",
"test": "grunt test",
"update-webdriver": "node node_modules/grunt-protractor-runner/node_modules$
},
"private": true
}
This one was PAINFUL to find. It turns out that the minimization blows up the code IF there is a missing ';' SEMI-COLON at the end of the file with .directive. I found that angular-timezone-selector.js needed to have a ';' added at the end of the file. NOW all works as expected!
I HOPE THIS HELPS SOMEONE ELSE:
Key: check all you bower components that the *.js files end with a ';' where needed.