添加react-markdown后CRA项目Webpack编译失败，如何解决？

问题描述 #

请求'process/browser'解析失败，仅因为它被解析为完全指定形式（可能源于严格ECMAScript模块，例如带有javascript MIME类型的模块、.mjs文件或package.json中包含"type": "module"的.js文件）。请求中的扩展名是完全指定所必需的，请为请求添加扩展名。

当前config-overrides.js配置：

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);
  return config;
};

解决办法 #

这是ES模块严格解析规则导致的——现在必须给导入路径加上文件扩展名。直接修改config-overrides.js里的配置即可：

基础修改方案 #

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser.js', // 为process路径添加.js扩展名
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);
  // 补充扩展名解析规则，确保模块能被正确识别
  config.resolve.extensions.push('.js', '.jsx', '.json');
  return config;
};

进阶兜底方案（如果基础方案无效） #

给resolve.fallback也指定带扩展名的路径，进一步确保解析正常：

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  // 给fallback中的process指定完整带扩展名的路径
  fallback.process = require.resolve('process/browser.js');
  fallback.buffer = require.resolve('buffer/');
  config.resolve.fallback = fallback;
  
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);
  config.resolve.extensions.push('.js', '.jsx', '.json');
  return config;
};

最后确保已经安装依赖：

npm install process buffer --save-dev

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