I have a jquery/react web application that only fails when I try to access the heroku production deployment on IE 11. When built locally, the app runs fine on IE 11. All other browsers function as expected in both local and production environment.
The error I'm getting is 'SCRIPT1010: Expected identifier'. It points to this line in my main.js, {var n=e&&e.__esModule?function(){return e.default}:function(){return e};
I've attempted to add various polyfills to no effect. The fact that this fails only in the production version and specifically on IE 11 confuses me. If you any insight or can even assist with some tips as to how to better debug in IE, it would be greatly appreciated as I'm accustomed to using just chrome developer tools.
Thanks.
Edit: here is the dependency portion of my package.json:
"dependencies": {
"12factor-config": "^1.3.1",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.18.2",
"consolidate": "^0.14.5",
"express": "^4.15.3",
"gsap": "^1.20.4",
"handlebars": "^4.0.10",
"hoek": "^5.0.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"lodash": "^4.17.5",
"marked": "^0.3.17",
"newrelic": "^4.2.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "^3.1.3",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"webpack": "^3.10.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^2.11.0"
},
I narrowed the problem down to the 'gsap' dependency, for some reason this was breaking production on IE11.
Related
Given a project with its node's package.json installing eslint and a few plugins, how can I know where a particular rule is set?
I see a rule being applied (space-before-function-paren) but I cannot find it either in any of the .eslintrc files in the project, or in the documentation of the plugins.
Additionally, I'm working with VSCode with some extensions such as ESLint itself, which could potentially be interfering here, but again I'm not sure how/where to check which part is applying that rule (though I think this is unlikely to be happening, as npm run lint fails if the code fails against the mentioned rule.
I'm posting the relevant parts of the package.json file:
{
// ...
"scripts": {
"watch": "NODE_ENV=development node build/build.js --watch",
"build": "NODE_ENV=development node build/build.js",
"build:prod": "NODE_ENV=production node build/build.js",
"unit": "NODE_ENV=test jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit/specs",
"ci-lint": "eslint --ext .js,.vue src test/unit/specs --format checkstyle --output-file lint_out/unit_timeline.xml"
},
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.27",
"autoprefixer": "^8.2.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-jest": "^22.4.3",
"babel-loader": "^7.1.4",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"chalk": "^2.3.2",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"cssnano": "^3.10.0",
"eslint": "^5.10.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.1.0",
"jest": "^22.4.3",
"jest-junit": "^3.6.0",
"jest-serializer-vue": "^1.0.0",
"node-notifier": "^5.2.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^2.0.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.3",
"postcss-url": "^7.3.1",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"semver": "^5.5.0",
"shelljs": "^0.8.1",
"uglifyjs-webpack-plugin": "^1.2.4",
"url-loader": "^1.0.1",
"vue-jest": "^2.3.0",
"vue-loader": "^14.2.2",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.21",
"webpack": "^3.11.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-file-list-plugin": "0.0.6",
"webpack-merge": "^4.1.2",
"yargs": "^11.0.0"
}
// ...
}
Unfortunately, it seems there's no "eslint" way to perform such a report.
If you run eslint with debug options, you get a lot of information about how the program runs: what file is processing, with which configuration, how it fails, etc., but not from where a rule was taken.
I managed to find it by simply running a grep + find within the node_modules directory, and being sure which module was providing the rule by simply changing it and seeing the eslint results afterwards.
In the past months I have been developing a React web application that is displayed within a ASP.NET Core web project (template of Visual Studio). The application has worked in recent months and is used by users who will display it exclusively in IE 11 (Office web add-in that uses IE 11 rendering engine). I have used the 'fetch' method extensively and did not experience problems after adding the babel-polyfill npm package. Unfortunately, today I received the following error:
'fetch' is undefined
The polyfill packages are still present and I am unclear as to why this error is reported suddenly. As stated above it did work before, and I am unsure what caused the situation in which the 'isomorphic-fetch' package stopped working. Below you will find the package.json contents. Any insight into where to look for the root cause of this problem would be greatly appreciated!
{
"name": "ReactApp",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "4.6.0",
"#types/react": "15.0.38",
"#types/react-dom": "15.5.1",
"#types/react-hot-loader": "3.0.3",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-router-dom": "4.1.1",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2"
},
"dependencies": {
"#microsoft/office-js": "^1.1.2",
"#types/prop-types": "^15.5.2",
"babel-polyfill": "^6.26.0",
"moment": "^2.20.1",
"office-ui-fabric-core": "^9.3.0",
"office-ui-fabric-react": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.29.0.tgz"
}
}
Changed react and react-dom to 16.2.0 in my package JSON and receiving the following error.
Uncaught Error: Cannot find module "react/lib/ReactComponentTreeHook"
Have tried clearing my node_modules, reinstalling everything, starting with a fresh project and adding dependencies in small chunks to narrow down the issue, and trying just about every option already seen on stack overflow.
my package.json is as follows:
{
"name": "",
"version": "0.0.1",
"description": "",
"main": "index.js",
"repository": {
"type": "git",
"url": "..."
},
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"dependencies": {
"axios": "^0.17.1",
"body-parser": "^1.18.2",
"classnames": "^2.2.5",
"connect-mongo": "^2.0.0",
"cookie-parser": "^1.4.3",
"express": "^4.16.2",
"express-session": "^1.15.6",
"moment": "^2.19.3",
"mongoose": "^4.13.6",
"multer": "^1.3.0",
"node-sass": "^4.7.2",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"qs": "^6.5.1",
"react": "^16.2.0",
"react-click-outside": "^3.0.0",
"react-dom": "16.2.0",
"react-redux": "5.0.6",
"redux": "3.7.2",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"serve": "^6.4.1",
"style-loader": "^0.19.0",
"svg-sprite-webpack-plugin": "^1.1.0",
"svg-spritemap-webpack-plugin": "^1.0.3",
"url-loader": "^0.6.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"webpack": "^3.10.0"
},
"author": "",
"license": "ISC",
"homepage": ""
}
After placing a breakpoint at the line erroring out, it seems that the stack trace is coming form the import of react-dom, but if that is at the latest version matching react, i don't understand why i am having this issue.
Out of options that I can think of, would appreciate any help. Thanks.
Have tried clearing my node_modules, reinstalling everything
Remember that since NPM 5-th version it generates package lock file, without purging that reinstalling modules will not work appropriately.
Also check following - if some package has own dependency on old react package version, it will be installed into nested node_modules directory, and then everything is dependent on project/loaders structure. In come circumstance, invalid new or old package version will be loaded. In some npm packages, like graphql, special warning added for that case: "Maybe you have installed different version of package".
So, check other packages' versions, and maybe update them.
I am having this issue while installing all node_modules. And this is making me crazy.
babel-loader#7.1.2 requires a peer of webpack#2 || 3 but none was
installed.
Here is my package.json file
{
"name": "react-router-firebase-auth",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react-scripts": "0.9.5"
},
"dependencies": {
"#atlaskit/button": "3.0.0",
"#atlaskit/css-reset": "1.1.4",
"#atlaskit/field-text": "4.0.1",
"#atlaskit/modal-dialog": "2.1.1",
"#atlaskit/page": "4.0.1",
"#atlaskit/util-shared-styles": "2.3.1",
"#shopify/polaris": "^1.5.1",
"babel-eslint": "^7.0.0",
"bootstrap": "^3.3.7",
"eslint": "3.16.1",
"eslint-plugin-react": "6.4.1",
"express": "^4.16.1",
"firebase": "^4.5.0",
"firebase-admin": "^5.4.1",
"firestore": "^1.1.6",
"fixed-data-table": "^0.6.4",
"griddle-react": "^1.8.1",
"jquery": "^3.2.1",
"node-localstorage": "^1.3.0",
"nodemon": "^1.12.1",
"react": "^15.5.3",
"react-bootstrap": "^0.31.3",
"react-bootstrap-button-loader": "^1.0.8",
"react-bootstrap-navbar": "^1.1.0",
"react-data-grid": "^2.0.59",
"react-date-picker": "^6.1.2",
"react-dom": "^15.5.3",
"react-fontawesome": "^1.6.1",
"react-router-dom": "^4.0.0-beta.8",
"react-scripts": "^0.9.5",
"react-transition-group": "^1.2.0",
"reactstrap": "^4.8.0",
"requestify": "^0.2.5",
"simple-react-bootstrap": "^0.2.7",
"styled-components": "1.4.6",
"url": "^0.11.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I am using create-react-app for this project. So i could not change webpack.config.js file. What am i supposed to do here?
Please read this post. It describes what a peer dependency is.
https://stackoverflow.com/a/34645112/2379376
What that means is that you have webpack not installed at all or you have a different version (webpack 1.x) installed. But this plugin needs webpack in version 2 or 3 to function properly.
What you can do is
npm install webpack -g
So npm will install the newest version of webpack on your system.
But now other peer warnings could occur when other loaders need an older version of webpack.
When using Webpack 4:
I've faced the same error but I actually had the webpack 4 installed. In order to solve this I used the instruction on babel-loader documentation and installed the following extra libraries: babel-loader, #babel/core and #babel/preset-env.
Command to install all the required libraries:
npm install -D babel-loader #babel/core #babel/preset-env webpack
package.json devDependencies before the installation:
"devDependencies": {
"chai": "^4.1.2",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"expect": "^22.0.3",
"jest-junit": "^3.3.0",
"jest-junit-reporter": "^1.1.0",
"node-sass": "^4.9.2",
"prop-types": "^15.6.0",
"react-test-renderer": "^16.2.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
After the installation:
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"chai": "^4.1.2",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"expect": "^22.0.3",
"jest-junit": "^3.3.0",
"jest-junit-reporter": "^1.1.0",
"node-sass": "^4.9.2",
"prop-types": "^15.6.0",
"react-test-renderer": "^16.2.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
Hope it helps
Install webpack globally in node environment as well as in development(as dev dependency).
As main function of webpack is to bundle JavaScript files for usage in a browser.As each time you made changes to index.js (entry point of npm) at development time then you have to run webpack to make changes in bundle.js file also, so we need to install in both the environment(ie. node environment and development environment)
Run below command to solve the issue:
npm install -g webpack#3.10.0
npm install --save-dev webpack#3.10.0
Here I am using 3.10.0 for webpack. You can use 4 as well. I think this will help.
I have the following dependencies installed:
"dependencies": {
"express": "^4.13.4",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"redux": "^3.5.2"
},
"devDependencies": {
"babel-core": "^6.9.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"eslint": "^2.11.1",
"eslint-plugin-react": "^5.1.1",
"react-hot-loader": "^1.3.0",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
}
}
The react-hot-loader used to work, where when I make a save to a change, it would reload automatically and update the application. But not it does not work anymore, so I would have to refresh the whole application manually to update it.
What could be causing the issue? How could I go about fixing it? Not sure if this would be source of the problem, but I switch on and off between two different projects, one being React Native and another being ReactJS. But after getting into React Native, the react-hot-loader on ReactJS just stopped working.
Thank you in advance!
react-native shouldn't affect the react-hot-loader in this project.
It's hard to tell without seeing any code as to get rhl to work the js needs to be created and rendered in the right way.
is this a server-side app or a client-side only app? this has some bearing too.
I have an example app, react-lego which shows how to add the latest version of react-hot-loader v3
hope it helps