类型错误：react_router_es_Router__WEBPACK_IMPORTED_MODULE_1__.default.computeRootMatch 不是函数

Posted 2023-03-23

【中文标题】类型错误：react_router_es_Router__WEBPACK_IMPORTED_MODULE_1__.default.computeRootMatch 不是函数

【英文标题】：TypeError: react_router_es_Router__WEBPACK_IMPORTED_MODULE_1__.default.computeRootMatch is not a function

【发布时间】：2019-03-14 14:21:21

【问题描述】：

升级到 Babel 8，它破坏了我的 s-s-r React 应用程序。 react-router-config 导入 react-router 时失败。尝试更改 .babelrc 和 webpack 配置无济于事。 Webpack 构建客户端和服务器，但它没有运行。

TypeError: react_router_es_Router__WEBPACK_IMPORTED_MODULE_1__.default.computeRootMatch 不是函数 在 eval (webpack:///./node_modules/react-router-config/es/matchRoutes.js?:13:70) 在 Array.some () 在 matchRoutes (webpack:///./node_modules/react-router-config/es/matchRoutes.js?:11:10) 在 eval (webpack:///./src/server.js?:39:89) 在 Layer.handle [as handle_request] (webpack:///./node_modules/express/lib/router/layer.js?:95:5) 接下来（webpack:///./node_modules/express/lib/router/route.js?:137:13） 在 Route.dispatch (webpack:///./node_modules/express/lib/router/route.js?:112:3) 在 Layer.handle [as handle_request] (webpack:///./node_modules/express/lib/router/layer.js?:95:5) 在 eval (webpack:///./node_modules/express/lib/router/index.js?:281:22) 在参数 (webpack:///./node_modules/express/lib/router/index.js?:354:14)

.babelrc

  "presets": [
    [
      "@babel/preset-env",
      
        "targets": 
          "browsers": [
            "last 10 versions"
          ],
          "node": "current",
          "uglify": true
        
      
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
  ]

网络包

const path = require('path');

const config = 
  entry: ['@babel/polyfill', './src/client/index.js'],

  output: 
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
  ,

  module: 
    rules: [
      
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      ,
      
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      ,
      
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      
    ],
  ,
  resolve: 
    extensions: ['.js', '.jsx'],
  ,
;

module.exports = config;

【问题讨论】：

您需要向我们展示导入computeRootMatch 的原始代码，并说明您是如何调用它的。

【参考方案1】：

当我切换回 react-router-config 到 1.0 时，一切都很好。在 renderRoutes 函数中，computeRootMatch 是使用 import 语句从“/es/computeRootMatch”路由中导入的。 Webpack 对“es”模块大发雷霆。我的 .babelrc 插件中可能不支持它。