从零搭建React项目导入axios后webpack无报错仅返回空白页如何解决

修复方案 #

这个问题是webpack5不再默认提供Node.js核心模块的浏览器polyfill导致的，axios运行时依赖这些模块，你当前配置里直接将这些模块的fallback设为false，会导致axios运行时直接抛出未捕获错误，触发页面白屏，webpack编译阶段不会检测这类运行时依赖问题，因此会提示编译成功。

操作步骤 #

• 方案1（适配当前axios版本）：

  1. 安装对应的polyfill依赖：

  npm install stream-browserify util assert https-browserify http-browserify browserify-zlib tty-browserify net-browserify --save-dev
  

  2. 修改webpack.config.js中resolve.fallback的配置：

  fallback: {
    assert: require.resolve('assert/'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    zlib: require.resolve('browserify-zlib'),
    tty: require.resolve('tty-browserify'),
    util: require.resolve('util/'),
    fs: false,
    net: require.resolve('net-browserify'),
    stream: require.resolve('stream-browserify')
  }
  

  3. 重启webpack服务即可正常运行。

• 方案2（快速降级规避）：
  直接将axios降级到不需要额外polyfill适配的v0.21.4版本：

  npm uninstall axios
  npm install axios@0.21.4
  

如果以上操作后仍有问题，打开浏览器开发者工具的Console面板查看具体运行时报错，根据报错信息进一步定位即可。

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