Question

我有一个带有Typescript（v。3.6.3）的React项目，

构建-npm run build时出现打字稿运行时错误：

内部错误：内部错误：无法读取属性“ length”的未定义的堆栈跟踪：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：无法读取未定义的属性“ length” 在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

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

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

1 个答案: