Reactstrap配合Razzle服务端渲染无法正常运行该如何解决？

解决方案 #

该报错的根因为Razzle服务端构建默认不会转译node_modules下的ES模块，reactstrap采用ES模块规范做命名导出，Node.js环境下无法直接识别，所以读取Button组件为undefined，客户端构建因为适配浏览器规则可以正常识别所以运行正常。

你可以按照以下步骤解决：

• 先补全reactstrap必须的依赖，执行安装命令：
  npm install bootstrap
• 修改项目根目录下的razzle.config.js配置，将reactstrap及其依赖加入服务端转译范围，配置示例如下：

  module.exports = {
    modifyWebpackConfig: ({ webpackConfig, target }) => {
      if (target === 'node') {
        // 调整babel转译规则，覆盖默认的node_modules全排除规则
        webpackConfig.module.rules.forEach(rule => {
          if (rule.test?.toString().match(/js|jsx/)) {
            rule.exclude = /node_modules\/(?!(reactstrap|@popperjs\/core)\/).*/
          }
        })
      }
      return webpackConfig
    }
  }
  

• 修改服务端入口文件（默认路径为src/server.js），在顶部引入bootstrap样式，避免SSR渲染时样式丢失：

  import 'bootstrap/dist/css/bootstrap.min.css'
  

• 若调整后仍存在报错，可以临时改用单组件导入的写法验证：

  // 替换原有的 import { Button } from 'reactstrap'
  import Button from 'reactstrap/Button'
  

内容的提问来源于stack exchange，提问作者Wijitha