Typescript runtime error: Cannot read property 'length' of undefined

Question

I have a React project with Typescript (v. 3.6.3),

When I build- npm run build I'm getting a typescript runtime error:

ERROR in [internal] INTERNAL ERROR: Cannot read property 'length' of undefined stack trace: TypeError: Cannot read property 'length' of undefined at unescapeLeadingUnderscores

I found out that what's causing the issue is something with LogRocket reporter, this is the typescipt object that triggers the error by console.log on typescrit.js:

{
  identifier: NodeObject {
    pos: -1,
    end: -1,
    flags: 8,
    modifierFlagsCache: 0,
    transformFlags: 0,
    parent: undefined,
    kind: 149,
    left: IdentifierObject {
      pos: -1,
      end: -1,
      flags: 8,
      modifierFlagsCache: 0,
      transformFlags: 0,
      parent: undefined,
      escapedText: 'LR',
      originalKeywordKind: undefined,
      autoGenerateFlags: 0,
      autoGenerateId: 0,
      emitNode: [Object],
      symbol: [SymbolObject]
    },
    right: IdentifierObject {
      pos: -1,
      end: -1,
      flags: 8,
      modifierFlagsCache: 0,
      transformFlags: 0,
      parent: undefined,
      escapedText: 'LogRocket',
      originalKeywordKind: undefined,
      autoGenerateFlags: 0,
      autoGenerateId: 0,
      emitNode: [Object],
      symbol: [SymbolObject]
    }
  }
}

Any help would be much appreciated.

tsconfig:

{
  "compilerOptions": {
    // Allow importing like `import React from 'react'`
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "esNext",

    // Resolve modules using Node-resolution algorithm
    "moduleResolution": "node",

    // Set React as the JSX factory
    "jsx": "react",

    // Include typings from built-in lib declarations
    "lib": ["es2019", "dom", "dom.iterable", "webworker"],

    // Include module source maps for debugging
    "sourceMap": true,
    "baseUrl": ".",
    "skipLibCheck": true,
    "target": "ES2020"
  },
  "exclude": ["node_modules"]
}

stack trace:

TypeError: Cannot read property 'length' of undefined at unescapeLeadingUnderscores (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:13569:19) at Object.idText (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:13573:16) at typeToTypeNodeHelper (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35286:57) at addPropertyToElementList (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35680:59) at createTypeNodesFromResolvedType (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35630:25) at createTypeNodeFromObjectType (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35460:35) at createAnonymousTypeNode (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35412:42) at typeToTypeNodeHelper (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35320:28) at C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35114:106 at withContext (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35155:37)

webpack.config.js:

const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')
const cmd = require('commander')
const outputdir = path.resolve(__dirname, 'dist')
const flat = require('flat')
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ssr = require('./websrc/ssrRegistered.js')
const CopyPlugin = require('copy-webpack-plugin')
const WorkerPlugin = require('worker-plugin')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

const getEnvVars = () => {
  const vars = flat({process: {env: process.env}})
  Object.keys(vars).forEach(key => (vars[key] = JSON.stringify(vars[key])))

  return vars
}

const htmlMinifyOpts = {
  collapseWhitespace: true,
  collapseBooleanAttributes: true,
  minifyCSS: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true
}
cmd
  .option('--mode [mode]', '', process.env.NODE_ENV || 'development')
  .option('--report')
  .option('--debug')
  .option('--page [page]', '', '') // page for dev server to open
  .parse(process.argv)
const mode = cmd.mode

const opts = {
  entry: {app: './websrc/app.tsx'},
  output: {
    filename: '[name]-[chunkhash].js',
    path: outputdir,
    publicPath: '/',
    // show relative paths in sourcemaps
    devtoolModuleFilenameTemplate: '[resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[resource-path]',
    pathinfo: false
  },
  mode,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          cacheCompression: false
        }
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          experimentalWatchApi: true
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: {
          loader: 'file-loader'
        }
      }
    ]
  },
  devServer: {
    contentBase: outputdir,
    open: true,
    openPage: path.normalize(cmd.page),
    overlay: {
      errors: true
    },
    historyApiFallback: true
    // host: '0.0.0.0'
  },
  devtool: mode === 'production' ? 'source-map' : 'source-map',
  optimization: {
    runtimeChunk: 'single'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'proj1',
      filename: 'index.html',
      template: 'websrc/index.tsx',
      inject: false,
      ssr: ssr({outputdir})(),
      mode,
      minify: mode === 'production' ? htmlMinifyOpts : {}
    }),
    new webpack.DefinePlugin(getEnvVars()),
    new CopyPlugin(['websrc/static']),
    new WorkerPlugin({globalObject: 'self'}),
    new ForkTsCheckerWebpackPlugin(),
    new HardSourceWebpackPlugin()
  ],
  resolve: {
    modules: [__dirname, 'node_modules'],
    extensions: ['.ts', '.tsx', '.js']
  },
  resolveLoader: {
    modules: ['node_modules']
  }
}

if (cmd.report) {
  opts.plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'}))
}

if (cmd.debug) console.log(opts) // eslint-disable-line no-console

module.exports = opts

Answer 1

After some research, it appears that you may have ran into a bug that is listed in the issues section on the Typescript GitHub.

https://github.com/microsoft/TypeScript/issues/21801

After reviewing this, my suggestion would be to do some null checking throughout your application. My best guess would be you are running into some race conditions on the initialization of the application/or component. Hope this helps and good luck!