打字稿运行时错误：无法读取未定义的属性“长度”

Question

我有一个带有 Typescript 的 React 项目 (v.3.6.3)，

当我构建时-npm run build 我收到一个打字稿运行时错误：

[内部] 内部错误中的错误：无法读取属性“长度”的 未定义的堆栈跟踪：TypeError：无法读取属性“长度” 不明确的 在 unescapeLeadingUnderscores

我发现导致问题的原因与LogRocket 记者有关，这是由console.log 在typescrit.js 上触发错误的typecipt 对象：

{
  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]
    }
  }
}

任何帮助将不胜感激。

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"]
}

堆栈跟踪：

TypeError：无法读取未定义的属性“长度” 在 unescapeLeadingUnderscores (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:13569:19) 在 Object.idText (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:13573:16) 在 typeToTypeNodeHelper (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35286:57) 在 addPropertyToElementList (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35680:59) 在 createTypeNodesFromResolvedType (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35630:25) 在 createTypeNodeFromObjectType (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35460:35) 在 createAnonymousTypeNode (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35412:42) 在 typeToTypeNodeHelper (C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35320:28) 在 C:\Users\user1\Development\Proj\node_modules\typescript\lib\typescript.js:35114:106 在 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

经过一些研究，您似乎遇到了 Typescript GitHub 上的问题部分中列出的错误。

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

查看此内容后，我的建议是在整个应用程序中进行一些空值检查。我最好的猜测是您在应用程序/或组件的初始化时遇到了一些竞争条件。希望这会有所帮助，祝你好运！