The Problem
I've been working on a live chat client built in react/typescript for a month or two, it's working great, but we need to add support for Internet explorer 11.
Initially during development I was using Webpack as my build system and as I was using Typescript, I was passing everything through ts-loader.
With the need to support Internet Explorer 11 I decided to change to babel 7 as there is now good typescript support. I hoped to use babel to polyfill IE11.
I believe I've followed the project setup guide via babel docs. Yet when testing the project inside IE11 in a virtual machine, I still receive the following error:
Unabled to get property 'bind' of undefined or null reference.
If I expand the error it seems to be tripping up inside a file for a dependency called load-script.
It still works perfectly in all other modern browsers, including Edge, it just seems to be having issues with IE11.
I can't be sure but it seems like it isn't doing anything to the node_modules.
Information About Setup (I'll include file snippets below):
- Because I'm using
babel 7I don't need to use@babel/polyfill, instead I'm using[email protected] - I'm importing
core-jsandregenerator-runtime/runtimeinto the route file.(Although when runningdebug: truein my babel env config. It tells me to remove these imports due to the use ofuseBuiltIns: usage.)
What I've tried to do
When inspected the errors inside the developer tools, I've traced back the issues to the different dependencies it's complaining about, commented out the imports and temporarily uninstalled. It then complains about another module.
This gives me the impression it isn't working over the imported dependencies. As such I tried removing the exclude: /node_modules/ from the webpack.config.js.
Code Examples
package.json
{
"name": "@rradar/chat-client",
"version": "2.2.9",
"description": "",
"main": "dist/main.js",
"scripts": {
"test": "jest --no-cache || true",
"watch": "webpack --watch --mode development",
"build": "webpack --mode production",
"prettier:base": "prettier --parser typescript --single-quote",
"prettier:check": "npm run prettier:base -- --list-different \"src/**/*.{ts,tsx}\"",
"prettier:write": "npm run prettier:base -- --write \"src/**/*.{ts,tsx}\""
},
"bugs": {
"url": "https://git.rradar.com/npm-packages/chat-client/issues",
"email": "[email protected]"
},
"repository": {
"type": "git",
"url": "https://git.rradar.com/npm-packages/chat-client"
},
"author": "rradar Limited",
"license": "ISC",
"contributors": [
{
"name": "Adam Bowers",
"email": "[email protected]"
},
{
"name": "Tom Hughes",
"email": "[email protected]"
}
],
"jest": {
"setupFiles": [
"<rootDir>/config/test.setup.js"
],
"moduleNameMapper": {
".scss$": "<rootDir>/config/SCSSStub.js"
},
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(ts|tsx)$": "<rootDir>/config/test.preprocess.js"
},
"testMatch": [
"**/__tests__/*.(ts|tsx|js)"
]
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.2",
"@fortawesome/react-fontawesome": "^0.1.0",
"@rradar/grace-api": "^2.2.3",
"classnames": "^2.2.6",
"core-js": "^3.6.5",
"css-loader": "^1.0.0",
"date-fns": "^1.29.0",
"es6-promise": "^4.2.4",
"file-loader": "^1.1.11",
"howler": "^2.0.14",
"js-cookie": "^2.2.0",
"lodash.clonedeep": "^4.5.0",
"mo-js": "^0.288.2",
"node-sass": "^4.14.1",
"pulltorefreshjs": "^0.1.14",
"pusher-js": "^4.2.2",
"react-html-parser": "^2.0.2",
"react-player": "^2.6.2",
"react-redux": "^6.0.0",
"redux": "^4.0.0",
"resolve-url-loader": "^2.3.0",
"uuid": "^8.2.0"
},
"peerDependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"lodash.clonedeep": "^4.5.0"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"@babel/preset-typescript": "^7.12.1",
"@types/classnames": "^2.2.7",
"@types/cordova": "0.0.34",
"@types/enzyme-adapter-react-16": "^1.0.2",
"@types/howler": "^2.0.5",
"@types/jest": "^23.3.0",
"@types/js-cookie": "^2.1.0",
"@types/lodash.clonedeep": "^4.5.3",
"@types/node": "^10.5.2",
"@types/pulltorefreshjs": "^0.1.2",
"@types/pusher-js": "^4.2.0",
"@types/react": "^16.9.36",
"@types/react-dom": "^16.0.6",
"@types/react-fontawesome": "^1.6.3",
"@types/react-html-parser": "^2.0.1",
"@types/react-redux": "^7.1.9",
"@types/react-test-renderer": "^16.0.1",
"@types/uuid": "^8.0.0",
"@types/window-or-global": "^1.0.0",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"jest": "^23.4.1",
"jsdoc": "^3.5.5",
"lodash.clonedeep": "^4.5.0",
"minami": "^1.2.3",
"prettier": "^1.13.7",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-test-renderer": "^16.4.1",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"stylelint": "^9.3.0",
"stylelint-order": "^0.8.1",
"ts-jest": "^23.0.1",
"ts-loader": "^4.5.0",
"tslint": "^5.11.0",
"tslint-react": "^3.6.0",
"typescript": "^3.2.2",
"url-loader": "^1.0.1",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-strip-block": "^0.2.0"
}
}
babel.config.json
{
"presets": [
[
"@babel/env",
{
"targets": {
"chrome": "58",
"ie": "11"
},
"useBuiltIns": "usage",
"corejs": {"version": "3.6.5", "proposals": true},
"debug": true
}
],
"@babel/preset-react",
[
"@babel/preset-typescript",
{
"isTSX": true,
"allExtensions": true
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
Webpack Config
const path = require('path');
module.exports = (env, { mode }) => {
const useBundleAnalyzerPlugin = mode !== 'production' || (env && env.local);
if (useBundleAnalyzerPlugin) {
BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
}
return {
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
library: 'ChatClient',
libraryTarget: 'amd',
},
optimization: {
usedExports: true,
},
devtool: 'source-map',
externals: {
lodash: 'lodash',
react: 'react',
reactDOM: 'react-dom',
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'babel-loader'
},
{
test: /\.(png|svg|jpg)$/,
use: [
{
loader: 'file-loader',
options: {
emitFile: true,
name: 'images/[name].[ext]',
},
},
],
},
{
test: /\.(mp3)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 20000,
fallback: 'file-loader',
},
},
],
exclude: /node_modules/,
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'resolve-url-loader' },
{ loader: 'sass-loader?sourceMap' },
],
},
{
test: /\.tsx|.ts$/,
enforce: 'pre',
exclude: /(node_modules|bower_components|\.spec\.js)/,
use: [{ loader: 'webpack-strip-block' }],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
'chat-client': path.resolve(__dirname, '../module/dist/main.js'),
assets: path.resolve(__dirname, 'src/assets'),
},
symlinks: true,
},
plugins: [
...(useBundleAnalyzerPlugin
? [
new BundleAnalyzerPlugin({
openAnalyzer: true,
}),
]
: []),
],
};
};
