Search posts, tags, users, and pages
Whats the error message in the console? What tools you use to build the app?
My last rumble with IE was that react is using the Symbol datatype and therefor the babel polyfill had to load at first on order to work in IE. But it was React 16 in my case.
There is no error message, which is making things very complex. I get this
<div id="root"></div>(which is the root of my react application as empty in IE 11 and 10, but it works fine in chrome and firefox.
Loaded Babel polyfill also added raf/polyfill package. But nothiing seems to work for react 15.5.4.
I have just imported the raf/polyfill package in my index.js and I dont really know how to shim it in my polyfills.js file. Is this necessary?
how to handel this?
no message is strange indeed. Are the polyfills loaded/included before any other lib incl. react?
Can you push a sample app with your toolchain to github?
Yes, I dont knw what you mean by loading polyfills? I have imported the package on to my mian file. Can you please describe me by what you mean loading polyfills? I will create a sample app with my package.json file and upload in github in the mean time.
But this is my package.json file I am using.
Package.json
{ "name": "Nikhil",
"version": "0.1.0",
"private": true,
"devDependencies": {
"add-asset-html-webpack-plugin": "^2.0.1",
"amdefine": "^1.0.1",
"autoprefixer": "6.7.",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-webpack": "^1.0.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "2.2.",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-runtime": "^6.23.0",
"case-sensitive-paths-webpack-plugin": "^2.1.1",
"chalk": "1.1.",
"connect-history-api-fallback": "1.3.",
"cpr": "^2.2.0",
"cross-spawn": "4.0.",
"css-loader": "0.26.",
"detect-port": "1.1.",
"dotenv": "^4.0.0",
"eslint": "3.19.",
"eslint-config-airbnb": "14.1.",
"eslint-config-react-app": "0.6.",
"eslint-loader": "1.6.",
"eslint-plugin-flowtype": "2.21.",
"eslint-plugin-import": "2.2.",
"eslint-plugin-jsx-a11y": "4.0.",
"eslint-plugin-react": "6.10.",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "0.10.",
"fs-extra": "0.30.",
"happypack": "^4.0.0-beta.1",
"has-flag": "^2.0.0",
"html-webpack-plugin": "^2.29.0",
"http-proxy-middleware": "0.17.",
"jest": "^20.0.4",
"json-loader": "0.5._", _
"locate-path": "^2.0.0",
"object-assign": "4.1.",
"postcss-loader": "1.2.",
"preload-webpack-plugin": "^1.2.2",
"promise": "7.1.",
"react-dev-utils": "^3.0.2",
"react-error-overlay": "^1.0.9",
"rimraf": "^2.6.1",
"style-loader": "0.13.",
"url-loader": "0.5.",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.1",
"whatwg-fetch": "2.0.2"
},
The idea with the polyfills is just based on one of my issues I had with IE where basically the loading order of JavaScript mattered. I think in your case it's best to look into a working example to see what's going on there.
hey, i digged a little deeper into the code, the error now it displays is in the node moudles folder. It says Syntax Error in line "const colorConvert",This makes no sense, could you please check? Oh and one more thing I am using webpack 2 and from the configuration files require.resolve was not getting executed. Do you know anything about the same?
"use strict";
/* WEBPACK VAR INJECTION */(function(module) {
const colorConvert = __webpack_require__(/*! color-convert */ "./node_modules/color-convert/index.js");
const wrapAnsi16 = (fn, offset) => function () {
const code = fn.apply(colorConvert, arguments);
return `\u001B[${code + offset}m`;
};
const wrapAnsi256 = (fn, offset) => function () {
const code = fn.apply(colorConvert, arguments);
return `\u001B[${38 + offset};5;${code}m`;
};
Again, without a sample project it’s hard to tell for sure. One thing that come to mind is the functions are declared as arrow functions, at least from the code you‘re posting. IE 10 and 11 are not supporting arrow functions. Sadly the color-convert GitHub Page says nothing on supported browsers. And at least from the webpack configs I’ve seen, node_modules dependencies are usually excluded from Babel to transpile it to ES5.
Regarding webpack 2 and resolve I’m not sure what you mean. Do you speak of the resolve part in the webpack config? Also here would a full webpack config, you’re using, helpful.
Edit: I looked into the color-convert code (from my cell) and there are no arrow functions in the code, so no idea how they are ending up in your bundle.
Nikhil Raikar
React Developer