ES6模块引入d3-graphviz时graphvizlib.wasm 404报错如何解决

报错核心是d3-graphviz依赖的graphvizlib.wasm文件未被打包工具输出到部署目录，或默认资源路径匹配错误，导致发起wasm请求时返回404，最终触发wasm拉取失败的中止错误。

对应yarn安装依赖、import引入的使用场景，分两步处理：

• 处理wasm资源
  • 手动复制方式：找到node_modules/@hpcc-js/wasm/dist/graphvizlib.wasm文件，复制到项目静态资源根目录（Webpack/Vite对应public目录），确保打包后该文件可通过/graphvizlib.wasm路径直接访问。
  • 打包自动处理方式（Webpack5/Vite适用）：在打包配置中添加wasm资源处理规则，Webpack配置示例：

    // webpack.config.js
    module.exports = {
      module: {
        rules: [
          {
            test: /\.wasm$/,
            type: 'asset/resource'
          }
        ]
      }
    }
    

• 显式指定wasm路径，避免库默认路径匹配错误
  调整业务代码，在调用渲染方法前指定wasm地址：

  import { graphviz }  from 'd3-graphviz';
  // 手动复制文件的写法
  graphviz.wasmURL = '/graphvizlib.wasm';
  
  // 打包自动处理的写法，直接引入wasm文件拿到打包后的输出路径
  // import wasmPath from '@hpcc-js/wasm/dist/graphvizlib.wasm';
  // graphviz.wasmURL = wasmPath;
  
  graphviz('#test')
      .fade(false)
      .renderDot('digraph {a -> b}');
  

之前的CDN引入存在脚本顺序错误、多余依赖引入的问题，按如下写法调整即可：

<!-- 注意引入顺序：d3必须在d3-graphviz之前加载 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@4.1.1/build/d3-graphviz.min.js"></script>
<script>
  // 如果CDN场景仍报wasm 404，添加下行指定wasm的CDN地址
  // d3.graphviz.wasmURL = 'https://unpkg.com/@hpcc-js/wasm@1.16.0/dist/graphvizlib.wasm';

  d3.graphviz('#test')
    .fade(false)
    .renderDot('digraph {a -> b}');
</script>

不需要额外引入viz.js、@hpcc-js/wasm的单独脚本，d3-graphviz的UMD包会自动处理依赖挂载。

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