I have a React application written in Typescript with Babel and Webpack. It loads fine in Firefox and Chrome, but loads a blank page in Internet Explorer 11. I am new to this project with relatively low experience with React/Babel/WebPack/Typescript. I need to make the app work with IE11. I’ve spent a couple days learning […]
- Tags . . "@types/node": "^11.9.6", . . "devDependencies": { "@babel/cli": "^7.2.3", . . ], . . }; Dev specific Webpack config: const merge = require('webpack-merge'); const webpack = require('webpack'); const commonConfig = re, './index.tsx' // the entry point of our app ], 'awesome-typescript-loader'], 'ES2019', 'source-map-loader'], 'src'), "!**/dist/**", "@babel/core": "^7.3.4", "@babel/preset-env": "^7.3.4", "@babel/preset-react", "@babel/preset-react": "7.0.0", "@babel/preset-react"] } } } tsconfig.json { "compilerOptions": { "experimentalDecorators": true, "@types/react-dom": "^16.9.8", "@types/react-intl": "^2.3.17", "@types/react-redux": "^7.1.9", "@types/react-router-dom": "^5.1.5", "@types/react-router": "^5.1.7", "@types/react-test-renderer": "16.9.1", "@types/react": "^16.9.35", "/js/**", "alwaysStrict": true, "awesomeTypescriptLoaderOptions": { "reportFiles": [ "./src/**/*" ] }, "babel-jest": "24.1.0", "babel-loader": "^8.0.5", "babel-plugin-react-intl": "^3.0.1", "babel-polyfill": "^6.26.0", "clean-dist": "rm -f -r -d dist", "copy-webpack-plugin": "^5.1.1", "createVersionFile": "node ./bin/createVersionFile.js" }, "devtool": "source-map", "Dom", "env": { "production": { "presets": ["minify"] }, "es6", "esModuleInterop": true, "exclude": [ "node_modules" ] } We have separate Webpack configs for prod and dev. They both import some common configurations. This i, "include": [ "src" ], "jsx": "react" }, "lib": ["es5", "lint": "eslint ." }, "module": "commonjs", "modules": false } ] ], "noImplicitAny": true, "noImplicitThis": true, "outDir": "dist", "paths": { "*": [ "src/@types/*" ] } }, "plugins": [ "react-hot-loader/babel", "prettier:fix": "prettier 'src/**/*.{ts, "prettier": "prettier 'src/**/*.{ts, "react-dom": "^16.12.0", "react-dropzone": "^11.0.3", "react-intl": "^2.8.0", "react-redux": "^7.2.0", "react-router-dom": "^5.2.0", "react": "^16.12.0", "resolveJsonModule": true, "sourceMap": true, "start-dev": "webpack-dev-server --config=configs/webpack/dev.js", "start": "npm run start-dev", "strict": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "target": "es6", "test": "jest --watch --coverage --config=configs/jest.json", "test": { "presets": ["@babel/preset-env", "transform-regenerator"], "webpack-cli": "^3.2.3" }, "webpack-dev-middleware": "^3.6.0", "webpack-dev-server": "^3.2.1" }, "webpack-merge": "4.2.1" }, ], ]), { test: /\.ts(x)?$/, }, } .bablerc { "presets": [ ["@babel/preset-env", }); index.tsx import "babel-polyfill"; import * as React from "react"; import * as ReactDOM from "react-dom"; import { BrowserRouter } from, }); Prod specific Webpack config: const merge = require('webpack-merge'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const {, // activate HMR for React 'webpack-dev-server/client?http://localhost:8081', // bundle the client for hot reloading, // bundle the client for webpack-dev-server and connect to the provided endpoint 'webpack/hot/only-dev-server', // enable HMR globally new webpack.NamedModulesPlugin(), // enable HMR on the server port: 8081 }, // prints more readable module names in the browser console on HMR updates new CopyWebpackPlugin([ { from: '../public', baseUrl, but development is less of a concern. Relevant stuff from package.json . . "scripts": { "build": "eslint './**' && npm run clean-dist, but have not found a solution yet. Based on what I am working with that I have posted below, but loads a blank page in Internet Explorer 11. I am new to this project with relatively low experience with React/Babel/WebPack/Typescript., contentBase: './', context: resolve(__dirname, dependencies": { "babel-plugin-transform-regenerator": "^6.26.0", devServer: { historyApiFallback: true, devtool: 'cheap-module-eval-source-map', document.getElementById("root") || document.createElement("div")); registerServiceWorker();, entry: './index.tsx', entry: [ 'react-hot-loader/patch', exclude: /node_modules/, hot: true }, I have a React application written in Typescript with Babel and Webpack. It loads fine in Firefox and Chrome, I'm hoping this fine community can help me find a solution to get this loading in IE11. I need to get this working in prod, jsx, mode: 'development', mode: 'production', module: { rules: [ { test: /\.(js)$/, only- means to only hot reload for successful updates 'babel-polyfill', output: { filename: 'js/bundle.[hash].min.js', output: { publicPath: '/iq-customize' }, path.resolve(__dirname, plugins: [ new CopyWebpackPlugin([ { from: '../public', plugins: [ new webpack.HotModuleReplacementPlugin(), publicPath: '/iq-customize/', tests, to: 'public' }, ts=x, tsx}' --check", tsx}' --write", use: 'babel-loader' }