I have some trouble with IE11 and a static javascript class I wrote.
The error I get is:
SCRIPT1002: Syntax error
rgmui.box.js (6,1)
Which points to:
// ===========================================
// RGMUI BOX
// Static class
class RgMuiBox {
^
So I’m guessing I’m defining this class in the wrong way? What’s the correct way of doing this?
I found a post on SO that seems to point out that the issue is ES5 vs ES6 — and I figure IE11 doesn’t support ES6?
Just to be complete, this is what I have (simplified):
class RgMuiBox {
static method1() {
// .. code ..
}
}
Thanks!
asked May 12, 2016 at 17:54
1
Hate to reopen such an old issue, but it still shows up high in the results, so I’ll add what I found out:
To reiterate what @Mikey and @REJH said, classes are not recognized by IE11.
That said, tools like Babel will allow you to translate classes into something that will run on IE11.
answered Sep 18, 2017 at 16:17
user8576017user8576017
4765 silver badges4 bronze badges
2
@Mikey is right. IE11 does not recognize this syntax for classes because ES6 spec:
https://kangax.github.io/compat-table/es6/
class RgMuiBox {
static method1() {
// .. code ..
}
}
I’m still not sure if the following is the correct way to define a static class but it works:
var RgMuiBox = {};
RgMuiBox.method = function() {
// ....
}
Just putting it out here so this question has some sort of an answer that might help people get going. If there are alternatives to the above I like to hear about those!
answered Aug 16, 2016 at 14:03
REJHREJH
3,2434 gold badges31 silver badges55 bronze badges
Static class Example
var _createClass = (function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var StaticClass = (function () {
function StaticClass() {
_classCallCheck(this, StaticClass);
}
_createClass(StaticClass, null, [{
key: "method1",
value: function method1() {
// .. code ..
}
}]);
return StaticClass;
})();
Ed Randall
6,8571 gold badge50 silver badges45 bronze badges
answered Mar 8, 2018 at 4:59
Negi RoxNegi Rox
3,8281 gold badge11 silver badges18 bronze badges
0
Is this a bug report?
Yes
Did you try recovering your dependencies?
Yes. I am using docker and have re-built my container multiple times.
I have also tried using a previous version of react-scripts / create-react-app
npm —version
output: 6.9.0
Which terms did you search for in User Guide?
Searched For: IE11, Syntax Error, Script1002, Polyfill.
I followed the guide for adding polyfills using react-app-polyfill.
The first two lines in my index.js file are
import ‘react-app-polyfill/ie11’;
import ‘react-app-polyfill/stable’;
I have tried with & without stable.
I have tried with ie11 & ie9 polyfills.
Environment
System:
OS: Linux 3.10 Debian GNU/Linux 9 (stretch) 9 (stretch)
CPU: (4) x64 Intel(R) Xeon(R) CPU E5-2650 v3 @ 2.30GHz
Binaries:
Node: 12.0.0 — /usr/local/bin/node
Yarn: 1.15.2 — /usr/local/bin/yarn
npm: 6.9.0 — /usr/local/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
react: ^16.8.6 => 16.8.6
react-dom: ^16.8.6 => 16.8.6
react-scripts: 3.0.0 => 3.0.0
npmGlobalPackages:
create-react-app: Not Found
Steps to Reproduce
(Write your steps here:)
- Create a new create-react-app project following the steps provided by the user guides
- browse to website on chrome and see it working perfectly.
- browse to website on Internet explorer 11 and it just displays a white screen and an error in the console.
Expected Behavior
My app should work on internet explorer 11 in the same manner it works in chrome
Actual Behavior
I’ll put the specific details here.
The app i’ve been working on for a year or so with create-react-app stopped working in IE11 when I updated it yesterday.
To ensure that it was not my own code that broke IE11 support, I spun up a brand-new copy of create-react-app to test and it still did not work on IE11.
I followed the steps for react-app-polyfill and that still did not work on IE11.
I have tried to force NPM to install a previous version of react-scripts/create-react app using
npm i react-scripts@2.0.5 but that doesn’t work.
(Note: 2.0.5 is the last version i was on when I had a container working perfectly on IE11 5 months ago.)
{Edit} when i try installing this past version, I check the package.json and it says react-scripts is at version 3.0.0 despite specifying 2.0.5
Index.js
Website On Chrome:
Website on IE11:
Reproducible Demo
Here is the dockerfile I use to boot up this container:
FROM node:12.0
RUN apt-get update -y &&
apt-get install -y vim
WORKDIR /var/www/html
RUN npm i create-react-app@3.0.0
RUN npx create-react-app welcome
RUN npm i react-app-polyfill
WORKDIR /var/www/html/welcome
CMD ["npm","start"]
Here is the docker-compose file I’m using:
version: '3'
services:
react-testing:
container_name: practice
image: practice-react
build:
context: ./
dockerfile: dockerfile
ports:
- "5900:3000"
networks:
default:
external:
name: practice.react
To build your own demo environment to test this for yourself, the steps are as follows:
(this is going to assume you know some docker basics. Otherwise you can install create-react-app normally and test it that way)
- docker-compose build
- docker-compose up -d
- docker exec -it practice bash
- cd src
- vi index.js
- add the two polyfill lines to the top of index.js
- save and quit vi
- go to the webpage on IE11.
I have a web app that crashes in IE11 with an uninformative “SCRIPT1002”. It’s not a Javascript runtime error; so the F12 dev tools are no help: I cannot break on the error (since it’s not a Javascript exception), and the only information about the error location points to a blob: URL, not a .js file.
SCRIPT1002: Syntax error
blob:60AFFCE5-6A4E-418D-B628-9DFA4578396A
Needless to say, the blob: URL does not actually open to any code.
Trying to attach Visual Studio to IE, I still can’t seem to find out what the actual error is. Visual Studio pops up an error dialogue with:
JavaScript critical error at line 1, column 663 in blob:60AFFCE5-6A4E-418D-B628-9DFA4578396AnnSCRIPT1002: Syntax error
With a blob: URL, I don’t see how I can look up the error location; with no details beyond Syntax error, I cannot infer it.
Is there any way using IE11 and/or Visual Studio (Community) to find out what the problematic code is, and/or the details of the syntax error?
Answer by Legacy Hardy
I tried using babel-polyfill and babel-es6-polyfill, but that didn’t help.,This is the error I’m getting:,Install babel-preset-env with npm install babel-preset-env —save-dev and use the following config in your .babelrc:
I know it’s over a year later, but I believe the issue was your devtool configuration:
webpackConfig.devtool = 'eval-source-map';
Answer by Lucy Hayden
View Unanswered Questions,What is ‘CodeProject’?,Collaboration / Beta Testing
module.exports = {
NODE_ENV: process.env.NODE_ENV || 'development',
HOST: process.env.HOST || 'localhost',
PORT: process.env.PORT || 3000,
CONNECTION_TYPE: process.env.CONNECTION_TYPE || 'http',
APP_NAME: process.env.APP_NAME || 'Application',
VERSION: process.env.VERSION || '0.1',
THEME_COLOR: process.env.THEME_COLOR || '#000000',
PROXY_URL: process.env.PROXY_URL || false,
};When i do
npm start
every things works perfectly, But when i tries to run the project on IE11, It gives me below error under bundle.js at this specified line: function encoderForArrayFormat(options) {
switch (options.arrayFormat) {
case 'index':
return key => (result, value) => {
const index = result.length;
if (value === undefined || (options.skipNull && value === null)) {
return result;
}
if (value === null) {Answer by Declan McLaughlin
I followed the steps for react-app-polyfill and that still did not work on IE11.,I followed the guide for adding polyfills using react-app-polyfill.
The first two lines in my index.js file are
import ‘react-app-polyfill/ie11’;
import ‘react-app-polyfill/stable’;,add the two polyfill lines to the top of index.js
FROM node:12.0
RUN apt-get update -y &&
apt-get install -y vim
WORKDIR /var/www/html
RUN npm i [email protected]
RUN npx create-react-app welcome
RUN npm i react-app-polyfill
WORKDIR /var/www/html/welcome
CMD ["npm","start"]
Answer by Scarlet Chen
I’m trying to get my React App with ES2015 functionalities running in IE >= 11 using Webpack + Babel. The setup is custom, using the inferno-compat layer, so no create-react-app used here. ,Any ideas what’s missing to get it running in IE11?,However — despite applying the latest babel-polyfill and babel-preset-env practices to my .babelrc and webpack config, I still get a SCRIPT1002: Syntax error within my bundle.js when trying to access the app with IE11.
When I follow the syntax error reference in IEs console, this is the part within the generated bundle.js that’s conflicting (the arrow-function in particular):
function add(x, y) {
if (y === undefined) {
return yHolder => add(x, yHolder);
}
return x + y;
}
These are the relevant dependencies within my package.json:
"dependencies": {
"inferno-redux": "^3.10.1",
"react": "^15.6.0",
"react-dom": "^15.6.0",
"react-ga": "^2.2.0",
"react-swipeable": "^4.1.0",
"redux": "^3.7.2",
"redux-saga": "^0.16.0",
"regenerator-runtime": "^0.11.0"
},
"devDependencies": {
//... stuff
"babel-cli": "^6.26.0",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-inferno": "^3.2.0",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"babel-plugin-transform-es2015-spread": "^6.22.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
//... some more stuff
"webpack": "^3.8.1",
"webpack-bundle-analyzer": "^2.9.1",
"webpack-dev-middleware": "^1.12.2",
"webpack-dev-server": "^2.9.5",
"webpack-manifest-plugin": "^1.3.2",
"webpack-merge": "^4.1.1",
}
This is my .babelrc:
{
"presets":
[
"react",
"flow",
"es2015",
[
"env", {
"modules": "commonjs",
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
}
}
]
]
}
I include the babel-polyfill within my webpack.base.config.js here:
// ... stuff
entry: {
index: ['babel-polyfill', './index.js'],
},
// ... more stuff
Answer by Noor Durham
Create a new create-react-app project following the steps provided by the user guides,https://facebook.github.io/create-react-app/docs/troubleshooting,I followed the steps for react-app-polyfill and that still did not work on IE11.
<!—
If you answered «Yes»:
Please note that your issue will be fixed much faster if you spend about
half an hour preparing it, including the exact reproduction steps and a demo.
If you're in a hurry or don't feel confident, it's fine to report bugs with
less details, but this makes it less likely they'll get fixed soon.
In either case, please fill as many fields below as you can.
If you answered «No»:
If this is a question or a discussion, you may delete this template and write in a free form.
Note that we don't provide help for webpack questions after ejecting.
You can find webpack docs at https://webpack.js.org/.
<!—
Your module tree might be corrupted, and that might be causing the issues.
Let’s try to recover it. First, delete these files and folders in your project:
* node_modules
* package-lock.json
* yarn.lock
If you decided to use npm, run this in your project directory:
npm install -g [email protected]
npm install
If you decided to use yarn, update it first (https://yarnpkg.com/en/docs/install).
Then run in your project directory:
yarn
There are two ways to do it:
* Create a new app and try to reproduce the issue in it.
This is useful if you roughly know where the problem is, or can’t share the real code.
* Or, copy your app and remove things until you’re left with the minimal reproducible demo.
This is useful for finding the root cause. You may then optionally create a new project.
Here is the dockerfile I use to boot up this container:
FROM node:12.0
RUN apt-get update -y &&
apt-get install -y vim
WORKDIR /var/www/html
RUN npm i [email protected]
RUN npx create-react-app welcome
RUN npm i react-app-polyfill
WORKDIR /var/www/html/welcome
CMD ["npm","start"]
Here is the docker-compose file I’m using:
version: '3'
services:
react-testing:
container_name: practice
image: practice-react
build:
context: ./
dockerfile: dockerfile
ports:
- "5900:3000"
networks:
default:
external:
name: practice.react
Answer by Kaden Copeland
We’re almost done with all the code changes part now you need to delete .cache folder from your node_modules folder due to some issue in babel-loader as mentioned in create-react-app’s docs.,These are the exact steps I followed to get my app running in development mode on my local machine.,With much efforts you finally are able to open the browser console on IE11 and see this
Install react-app-polyfill using simple npm install
npm i --save react-app-polyfillImport react-app-polyfill/ie11 and react-app-polyfill/stable at top of your index.js. Your index.js might look something like this.
import "react-app-polyfill/ie11";import "react-app-polyfill/stable";import React from "react";import ReactDOM from "react-dom";import "./index.css";import App from "./App";import * as serviceWorker from "./serviceWorker";ReactDOM.render(<App />, document.getElementById("root"));// If you want your app to work offline and load faster, you can change unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();Add “ie 11” to development in your browserlist section of package.json
"browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version", "ie 11" ] }After the changes your package.json would look something like this
{ "name": "sample-react-app", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.9.0", "react-app-polyfill": "^1.0.2", "react-dom": "^16.9.0", "react-scripts": "3.1.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version", "ie 11" ] }}Answer by Royal Rivers
You need to configure the webpack. config. js file in vue. Maybe you need to use the npm run eject command to expose the configuration file. These are just some of my suggestions.,I ran — npm run build, and then served built aplication using Express locally — it works perfectly on IE11 :),To those who end up here, I found success using babel-engine-plugin to transpile the necessary node_modules for ie11.
Answer by Royalty Holloway
Answer by Virginia Calderon
SCRIPT 1002 : syntax error ,This is issue mostly occur in Ie11, there are fellow steps to resolve the issue,Here is the list of things that need polyfill support when used in older browsers
HI,
I am facing an issue with the browser support in IE 11 of my reactjs project.
Here is my code sample.
package.json
{
"name": "my-project",
"version": "0.1.0",
"description": "",
"scripts": {
"start": "npm run dev",
"dev": "node_modules/.bin/webpack-dev-server",
"build": "node_modules/.bin/webpack --config webpack.config.prod.js"
},
"dependencies": {
"antd": "^3.26.7",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-import": "^1.11.0",
"classnames": "^2.2.6",
"connected-react-router": "^6.6.1",
"dotenv-webpack": "^1.7.0",
"es6-promise": "^4.2.8",
"formik": "^2.1.2",
"history": "^4.9.0",
"lodash": "^4.17.11",
"office-ui-fabric-react": "^7.83.2",
"prop-types": "^15.7.2",
"q": "^1.5.1",
"react": "^16.8.6",
"react-csv": "^1.1.2",
"react-dom": "^16.8.6",
"react-drag-listview": "^0.1.6",
"react-redux": "^7.1.3",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-select": "^3.0.8",
"react-table": "^6.9.0",
"reactjs-popup": "^1.5.0",
"redux": "^4.0.5",
"redux-auth-wrapper": "^3.0.0",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"xlsx": "^0.15.4",
"yup": "^0.28.0"
},
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/polyfill": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"@types/history": "^4.7.2",
"@types/react": "^16.8.13",
"autoprefixer": "^9.5.1",
"autoprefixer-loader": "^3.2.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"clean-webpack-plugin": "^2.0.1",
"copy-webpack-plugin": "^5.0.2",
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"dotenv": "^7.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"loader-utils": "^1.2.3",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"stylelint": "^10.0.1",
"stylelint-config-standard": "^18.3.0",
"svg-sprite-loader": "4.1.3",
"uglifyjs-webpack-plugin": "^2.1.2",
"url-loader": "^1.1.2",
"webpack": "^4.30.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
}
}
webpack.config.js
const path = require('path'); const webpack = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const Dotenv = require('dotenv-webpack'); require('dotenv').config(); const { NODE_ENV, HOST, PORT, CONNECTION_TYPE, APP_NAME, VERSION, THEME_COLOR, PROXY_URL, } = require('./webpack.constants'); const pathSource = path.resolve(__dirname, 'src'); const proxyConfig = PROXY_URL ? { proxy: { '/api/*': { target: PROXY_URL, pathRewrite: {'^/api/': ''}, changeOrigin: true, secure: false, logLevel: 'debug', proxyTimeout: 1e3 * 60 * 5, }, }, } : {}; module.exports = { context: pathSource, entry: ['@babel/polyfill', './App.js'], mode: NODE_ENV, output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js', chunkFilename: '[name].bundle.js', publicPath: '/', }, resolve: { modules: [path.resolve(__dirname, 'src'), 'node_modules'], }, module: { rules: [ { test: /.jsx?$/, exclude: path.resolve(__dirname, 'node_modules'), use: { loader: 'babel-loader', }, }, { test: /.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', ], }, { test: /.less$/, exclude: /.module.less$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'less-loader', ], }, { test: /.module.less$/, use: [ 'style-loader', { loader: 'css-loader', options: { sourceMap: true, modules: true, localIdentName: '[local]___[hash:base64:5]', }, }, 'postcss-loader', 'less-loader', ], }, { test: /.(ico)$/i, loader: 'file-loader', options: { name: '[name].[ext]', }, }, { test: /.pdf$/i, loader: 'file?name=[path][name].[ext]', }, { test: /.(jpe?g|png|gif|mp4)$/i, loader: 'url-loader', options: { name: '[path][name]-[sha512:hash:base64:4].[ext]', limit: 16384, }, }, { test: /.(woff|woff2|eot|ttf|svg)(?.*$|$)/, loader: 'file-loader', options: { name: '[path][name].[ext]', }, }, ], }, optimization: { minimize: false, nodeEnv: NODE_ENV, }, plugins: [ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.ProvidePlugin({}), new HtmlWebpackPlugin({ template: './index.html', filename: 'index.html', themeColor: THEME_COLOR, version: VERSION, projectName: APP_NAME, }), new MiniCssExtractPlugin({ filename: 'bundle.css', }), new CopyWebpackPlugin([{ from: 'assets/images', to: 'images', }]), new Dotenv(), new CleanWebpackPlugin(), new webpack.IgnorePlugin(/^./locale$/, /moment$/), ], devtool: 'source-map', devServer: { port: PORT, host: HOST, disableHostCheck: true, historyApiFallback: true, hot: true, overlay: true, https: CONNECTION_TYPE === 'https', stats: { assets: false, children: false, colors: true, entrypoints: false, env: true, modules: false, moduleTrace: false, }, ...proxyConfig, }, };
webpack.constant.js
module.exports = {
NODE_ENV: process.env.NODE_ENV || 'development',
HOST: process.env.HOST || 'localhost',
PORT: process.env.PORT || 3000,
CONNECTION_TYPE: process.env.CONNECTION_TYPE || 'http',
APP_NAME: process.env.APP_NAME || 'Application',
VERSION: process.env.VERSION || '0.1',
THEME_COLOR: process.env.THEME_COLOR || '#000000',
PROXY_URL: process.env.PROXY_URL || false,
};
When i do npm start every things works perfectly, But when i tries to run the project on IE11, It gives me below error under bundle.js at this specified line:
function encoderForArrayFormat(options) { switch (options.arrayFormat) { case 'index': return key => (result, value) => { const index = result.length; if (value === undefined || (options.skipNull && value === null)) { return result; } if (value === null) {
What I have tried:
i have tried changing versions of webpack , @wabpack/polyfill and babel-loader. but its not working. Same error i am facing in IE 11.
Is there i am missing something? Please give some suggestion i can try.