目录
出错现象
这个报错是我在安装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
- 引用方式
import { init } from 'snabbdom/init'
import { h } from 'snabbdom/h'
- 在 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~