使用css-blocks与webpack时出现Cannot read property 'context' of undefined错误

我之前也踩过类似的坑，eject后的create-react-app配置本身就比较繁琐，第三方工具很容易因为上下文适配问题搞出这类报错。结合你描述的情况来看，问题大概率出在css-blocks的loader配置没有正确关联webpack的上下文环境，或者参数传递有遗漏，给你几个具体的排查和解决步骤：

排查步骤与解决方案 #

1. 调整css-blocks loader的执行顺序 #

webpack的loader是从后往前执行的，css-blocks的loader必须放在普通css处理loader（比如css-loader、style-loader）之前，确保它先处理block文件，再把结果交给后续的css loader。你可以检查下webpack配置里module.rules中相关loader的顺序，把@css-blocks/webpack的规则放在最前面的css相关规则里。

2. 显式传入webpack上下文参数 #

很多时候这类"context undefined"的错误，是因为css-blocks loader没有拿到webpack的上下文信息。你可以在css-blocks的loader配置里手动指定context参数，比如：

{
  test: /\.block\.css$/,
  use: [
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    {
      loader: require.resolve('@css-blocks/webpack'),
      options: {
        context: __dirname, // 显式传入当前配置文件的上下文路径
        blockDefinitions: path.resolve(__dirname, './src/blocks'), // 确保这个路径是正确的
        // 其他css-blocks配置项...
      }
    }
  ]
}

3. 验证依赖版本兼容性 #

eject后的create-react-app会锁定特定版本的webpack，而css-blocks的webpack loader对webpack版本有要求。你可以在项目根目录执行npm ls webpack查看当前webpack版本，然后对照css-blocks的版本要求，确认两者是否兼容。如果版本不匹配，要么升级/降级webpack，要么更换对应的css-blocks版本。

4. 简化配置逐步定位问题 #

如果上面的步骤都没解决问题，建议先把css-blocks的配置简化到最基础的状态，只保留核心的loader和必要参数，启动开发服务器看是否还报错。如果正常了，再逐步添加其他配置项（比如自定义的block定义、优化参数等），这样就能快速定位到是哪个配置项导致的上下文问题。

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