Compiling typescript into a browser-friendly format results in `Uncaught TypeError: (void 0) is not a function`

Question

I'm running into the below error (in browser):

index.ts:1 Uncaught TypeError: (void 0) is not a function
    at eval (index.ts:1)
    at Object../src/index.ts (main.js:96)
    at __webpack_require__ (main.js:20)
    at main.js:84
    at main.js:87

I'm having difficulty knowing how to investigate this error. It seems to be the same issue here: Getting error "Void 0 is not function" on browser when using webpack to bundle typescript file

What is this eval("(void 0)(... in the compiled output?

I'm trying to compile a 'simple' typescript script into a form that can be run by the browser.

The entire MCVE is at this repo: https://github.com/chrissound/newCha

I have the following webpack and typescript config:

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "outFile": "compiled.js",
        "declaration": true,
        "removeComments": true,
        "module": "system"
    },
    "include": [
        "src/*"
    ],

    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

score 1 · Accepted Answer · answered Mar 26 '19 at 08:53

There was a warning in the build step:

npm run-script build

> react-ts-hmzrag@0.0.0 build /home/chris/fromLaptopt/usbflash/christransferNixos/Xanadata/newCha
> webpack --config webpack.config.js

Hash: eb81bd5a31b10119a931
Version: webpack 4.29.6
Time: 1071ms
Built at: 2019-03-26 08:50:29
           Asset      Size  Chunks             Chunk Names
../compiled.d.ts  27 bytes          [emitted]  
         main.js   5.1 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.ts] 1.29 KiB {main} [built] [1 warning]

WARNING in ./src/index.ts 1:0-15
System.register is not supported by webpack.

I resolved it with:

diff --git a/tsconfig.json b/tsconfig.json
index f2ef245..5617776 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,10 +2,9 @@
     "compilerOptions": {
         "sourceMap": true,
         "target": "es5",
-        "outFile": "compiled.js",
         "declaration": true,
         "removeComments": true,
-        "module": "system"
+        "module" : "commonjs"
     },
     "include": [
         "src/*"

Compiling typescript into a browser-friendly format results in `Uncaught TypeError: (void 0) is not a function`

1 Answers1