Cannot resolve dependency ‘snabbdom‘ or ‘snabbdom/init‘

出错现象

这个报错是我在安装snabbdom并导入的时候报的错误。我用了两种引用方式：

• CommonJS

const snabbdom = require('snabbdom')

• ESModules

import { h, chunk, init } from 'snabbdom'

出错原因

这个也是关于Snabbdom的版本问题，我现在使用的版本是v2.1.0

snabbdom v0.7.4

如果是这个版本，上述的两种写法都是可以使用的

snabbdom v1.0.1+

Snabbdom 在 2020年6月18日更新到 v1.0.1 版本，如果是这个版本以后的都会出现这个问题。原因是因为v1.0.1 版本相对于 v0.7.4 版本的变化，去除了 snabbdom.ts 模块，新增了 init.ts 模块 ，如果使用 v1.0.1 版本的话导入 h、init 函数，文档中写的是如下的方式：

import { init } from 'snabbdom/init'
import { h } from 'snabbdom/h' // helper function for creating vnodes

但是这种方式仍然没有办法解决的话，是因为这个snabbdom/h并不是模块路径，这个路径是作者在 package.json 中的 exports 字段设置的，而 parcel 打包工具不支持 exports 这个字段，webpack 4 也不支持，webpack 5 beta 支持该字段。该字段在导入 snabbdom/init 的时候会补全路径成 snabbdom/build/package/init.js。

// package.json
"exports": {
    "./init": "./build/package/init.js",
    "./h": "./build/package/h.js",
   ...
}

如果不能设置exports字段，就直接用模块的全路径也可以解决

import { h } from 'snabbdom/build/package/h'
// or
const { h } = require('snabbdom/build/package/h')

解决方案总结

M1：将Snabbdom的版本降级成v0.7.4即可

M2：使用package.json的exports

1. 引用方式

import { init } from 'snabbdom/init'
import { h } from 'snabbdom/h'

2. 在 package.json 中设置 exports 字段

// package.json
"exports": {
    "./init": "./build/package/init.js",
    "./h": "./build/package/h.js",
   ...
  }

M3：将引用路径直接改为完整路径

import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
import { classModule } from 'snabbdom/build/package/modules/class'
// or
const { h } = require('snabbdom/build/package/h')
const { init } = require('snabbdom/build/package/init')
const { classModule } = require('snabbdom/build/package/modules/class')

it works~