6

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
15
  • 1
    Please post your code where you init unescapeLeadingUnderscores or use unescapeLeadingUnderscores.length Commented Sep 24, 2019 at 18:53
  • @zerocewl That's not my code, this is typescript's code... Commented Sep 24, 2019 at 18:58
  • 1
    @AluanHaddad Please see edited question. Commented Oct 5, 2019 at 18:45
  • 1
    @AluanHaddad no, I didn't use create-react-app, I added package.json to the question. Commented Oct 5, 2019 at 19:58
  • 1
    Would it possible that you create a minimal Github/GitLab/Bitbucket Repository so we can reproduce the issue? Only the minimal configuration that triggers this error. From the files alone it is nearly impossible to help you. Thanks :) Commented Oct 7, 2019 at 7:36

1 Answer 1

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!

Sign up to request clarification or add additional context in comments.

1 Comment

@user3378165 do you have maybe some dynamic function names in your application? That can cause this type of error. See: github.com/microsoft/TypeScript/issues/33604 and github.com/microsoft/vscode/issues/78658

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.