Styleguidist模块未找到错误：组件导入解析与node_modules排除问题

咱们直接拆解你的问题：你配置的exclude: /node_modules/没生效，大概率是因为Styleguidist的webpack配置是和默认配置合并而非完全替换；模块未找到的问题则可能和路径错误、配置合并冲突都有关系。下面是具体的解决步骤：

1. 用webpack-merge正确合并webpack配置 #

Styleguidist自带一套默认的webpack配置，如果你直接在webpackConfig里写module.rules，会和默认规则产生冲突（比如默认的babel-loader规则可能覆盖了你的exclude设置）。解决办法是用webpack-merge来合并你的自定义规则和默认规则：

首先安装依赖：

yarn add webpack-merge --dev

然后修改你的styleguide.config.js：

const merge = require('webpack-merge');
// 如果项目已有自己的webpack配置文件，直接引入合并
const projectWebpackConfig = require('./webpack.config');

module.exports = {
  components: 'src/components/**/[A-Z]*.js',
  webpackConfig: merge(projectWebpackConfig, {
    module: {
      rules: [
        // 你的babel-loader规则，会正确合并到现有规则中
        { 
          test: /\.jsx?$/, 
          exclude: /node_modules/, 
          loader: 'babel-loader', 
          query: { 
            presets: ['@babel/preset-env', '@babel/preset-react'], 
          }, 
        },
        // 调整css-loader规则，只处理项目内的css文件，避免解析node_modules
        { 
          test: /\.css$/, 
          include: /src/, // 仅匹配src目录下的css
          use: ['style-loader', 'css-loader'] 
        }
      ]
    }
  })
};

如果项目没有单独的webpack配置文件，可以用Styleguidist提供的getDefaultWebpackConfig方法合并默认配置：

const { getDefaultWebpackConfig } = require('react-styleguidist');
const merge = require('webpack-merge');

module.exports = {
  components: 'src/components/**/[A-Z]*.js',
  webpackConfig: merge(getDefaultWebpackConfig(), {
    module: {
      rules: [
        { 
          test: /\.jsx?$/, 
          exclude: /node_modules/, 
          loader: 'babel-loader', 
          query: { 
            presets: ['@babel/preset-env', '@babel/preset-react'], 
          }, 
        },
        { 
          test: /\.css$/, 
          include: /src/, 
          use: ['style-loader', 'css-loader'] 
        }
      ]
    }
  })
};

2. 检查组件内的导入路径是否正确 #

很多时候模块未找到的问题和配置无关，就是路径写错了：

• 注意相对路径的层级（比如../和./的区别）
• 注意文件名大小写（Linux/macOS系统区分大小写，Windows不区分，跨环境开发容易踩坑）
• 如果组件放在单独文件夹（比如src/components/Button/Button.js），确保导入时写import Button from './Button'而非import Button from './'（除非你在文件夹里加了index.js导出）

3. 清理缓存后重新构建 #

缓存可能导致残留的异常问题，执行以下命令清理后再构建：

yarn styleguidist clean
yarn styleguidist build

为什么你的exclude规则没生效？ #

Styleguidist默认的webpack配置中已经包含了处理js/jsx的规则，如果你直接覆盖module.rules，你的规则可能被默认规则覆盖，或者执行顺序不对导致exclude逻辑未生效。用webpack-merge可以确保你的规则被正确合并，优先执行你的排除逻辑。

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