TypeError: react_router_es_Router__WEBPACK_IMPORTED_MODULE_1__.default.computeRootMatch is not a function

Question

Upgraded to Babel 8 and it broke my SSR React app. It is failing when react-router-config imports react-router. Tried changing .babelrc and webpack configs to no avail. Webpack builds the client and server but it does not run.

TypeError: react_router_es_Router__WEBPACK_IMPORTED_MODULE_1__.default.computeRootMatch is not a function at eval (webpack:///./node_modules/react-router-config/es/matchRoutes.js?:13:70) at Array.some () at matchRoutes (webpack:///./node_modules/react-router-config/es/matchRoutes.js?:11:10) at eval (webpack:///./src/server.js?:39:89) at Layer.handle [as handle_request] (webpack:///./node_modules/express/lib/router/layer.js?:95:5) at next (webpack:///./node_modules/express/lib/router/route.js?:137:13) at Route.dispatch (webpack:///./node_modules/express/lib/router/route.js?:112:3) at Layer.handle [as handle_request] (webpack:///./node_modules/express/lib/router/layer.js?:95:5) at eval (webpack:///./node_modules/express/lib/router/index.js?:281:22) at param (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",
  ]
}

webpack

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;

You need to show us the original code that imports computeRootMatch and show how you're calling it. — loganfsmyth

Ryan Kane Ryan Kane · Accepted Answer · 2018-10-11T23:34:46

Everything is fine when i switched back to react-router-config to 1.0. Inside the renderRoutes function, computeRootMatch was being imported from "/es/computeRootMatch" route using an import statement. Webpack flipped out about the "es" module. I probably wasn't supporting it in my .babelrc plugins.

TypeError: react_router_es_Router__WEBPACK_IMPORTED_MODULE_1__.default.computeRootMatch is not a function

1 Answers