Cannot resolve dependency 'snabbdom/init'

[f43310]

import { init } from 'snabbdom/init'
node log file:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'D:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'D:\\Program Files\\nodejs\\node_global\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.5
3 info using node@v12.18.2
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle snabbdom-demo@1.0.0~prebuild: snabbdom-demo@1.0.0
6 info lifecycle snabbdom-demo@1.0.0~build: snabbdom-demo@1.0.0
7 verbose lifecycle snabbdom-demo@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle snabbdom-demo@1.0.0~build: PATH: D:\Program Files\nodejs\node_global\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;I:\temp\code\study\frantEnd\vuecode\snabbdom-demo\node_modules\.bin;D:\Program Files (x86)\NetSarang\Xshell 6\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;E:\adb;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;D:\Program Files\Git\cmd;F:\phpStudy\php72n\php-7.2.25-nts-Win32-VC15-x64\;C:\ProgramData\ComposerSetup\bin;D:\Program Files\MongoDB\Server\4.2\bin;M:\Program Files\OpenSSH\bin;D:\Program Files\nodejs\;C:\Users\linda\AppData\Local\Programs\Python\Python36\Scripts\;C:\Users\linda\AppData\Local\Programs\Python\Python36\;D:\Program Files\nodejs\node_global;J:\Program Files\JetBrains\PhpStorm 2018.3\bin;;J:\Program Files\Microsoft VS Code\bin;D:\Program Files\Fiddler;C:\Users\linda\AppData\Roaming\Composer\vendor\bin;C:\Users\linda\AppData\Roaming\npm
9 verbose lifecycle snabbdom-demo@1.0.0~build: CWD: I:\temp\code\study\frantEnd\vuecode\snabbdom-demo
10 silly lifecycle snabbdom-demo@1.0.0~build: Args: [ '/d /s /c', 'parcel build index.html' ]
11 silly lifecycle snabbdom-demo@1.0.0~build: Returned: code: 1  signal: null
12 info lifecycle snabbdom-demo@1.0.0~build: Failed to exec build script
13 verbose stack Error: snabbdom-demo@1.0.0 build: `parcel build index.html`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter. (D:\Program Files\nodejs\node_global\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess. (D:\Program Files\nodejs\node_global\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid snabbdom-demo@1.0.0
15 verbose cwd I:\temp\code\study\frantEnd\vuecode\snabbdom-demo
16 verbose Windows_NT 6.1.7601
17 verbose argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_global\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.18.2
19 verbose npm  v6.14.5
20 error code ELIFECYCLE
21 error errno 1
22 error snabbdom-demo@1.0.0 build: `parcel build index.html`
22 error Exit status 1
23 error Failed at the snabbdom-demo@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

package.json

{
  "name": "snabbdom-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "parcel-bundler": "^1.12.4",
    "snabbdom": "^1.0.1"
  }
}

js file:
import { init } from 'snabbdom/init'

[mightyiam]

It should be import { init } from 'snabbdom/init'.

[kkxiaoa]

I also encountered the same problem. The version of snabbdom is 1.0.1

[mightyiam]

I don't see anything wrong with the package. Could you provide a reproduction, please? Or, at least the output of the parcel command.

[kkxiaoa]

The version of parcel is 1.12.4

The version of node is 12.10.0

The version of npm is 6.10.3

The version of snabbdom is 1.0.1

this is my package.json:

 {
  "name": "vue-core",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "snabbdom": "^1.0.1"
  }
}

this is my entry file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./src/01-demo.js"></script>
  </head>

  <body>
    <div id="container"></div>
  </body>
</html>

**01-demo.js **

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

var patch = init([]);

var container = document.getElementById("container");

function someFn() { 
  console.log("click me");
}

var vnode = h("div#container.two.classes", { on: { click: someFn } }, [
  h("span", { style: { fontWeight: "bold" } }, "This is bold"),
  " and this is just normal text",
  h("a", { props: { href: "/foo" } }, "I'll take you places!"),
]);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);

parcel build error

F:\workspace\vue-core\src\01-demo.js:1:21: Cannot resolve dependency 'snabbdom/init'
 import { init } from "snabbdom/init"; // helper function for creating vnodes
                           ^

[mightyiam]

Thank you. It may be that that version of parcel does not support the exports field.

[akbr]

Same issue on codesandbox (which also uses parcel): https://codesandbox.io/s/crazy-spence-xq8vm?file=/src/index.js

Was able to use 0.7.4 with no issue.

[YFengFly]

Thank you. It may be that that version of parcel does not support the exports field.

There is also an error in Webpack 4.43.0: code ELIFECYCLE
But if I use Webpack 5.0.0-beta.20,it can be successfully produced.
Maybe it's not just parcel?

---

English is not my native language; please excuse typing errors.

[mightyiam]

Did anyone try using parcel v2?

[YFengFly]

yarn:1.22.4
npm: 6.14.5
node:12.8.2

parcel:2.0.0-beta.1:

Build failed.
@parcel/core: Failed to resolve 'snabbdom/init' from './src/index.js'

[rcklmk]

Hi, I encountered the same problem too. It seems like node is not able to register the module itself.

// server-side
// npm: 6.13.4
// node: 10.19.0

// this works
const init = require('./node_modules/snabbdom/build/package/init');

// this does not work
const init = require('snabbdom/init');
> Error: Cannot find module 'snabbdom/init'

The same problem occurs when I was trying to setup client-side code in webpack v4.43.0:

// client-side
import { init } from 'snabbdom/init';

> $ npx webpack
> Module not found: Error: Can't resolve 'snabbdom/init' ...

[mightyiam]

Until your resolver supports the exports field, a workaround could be to prefix the import path with /build/package/. Please note that these paths are not public API and may change in a future non-MAJOR release.

[haishengXie0712]

@f43310 You can try installing version 0.7.4;

[mightyiam]

@f43310 You can try installing version 0.7.4;

I would not recommend this. v1 has some bug fixes and performance improvements and it is ES modules.

[web-zhangpei]

snabbdom版本导致运行错误问题解决方法

如果遇到下面的错误，检查 Snabbdom 的版本，Snabbdom 在 2020年6月18日更新到 v1.0.1 版本。

Cannot resolve dependency 'snabbdom/init'

案例中用的版本是 v0.7.4 版本，如果你安装的是 Snabbdom@v1.0.1 的版本会出现上面的错误。

解决方法：安装 Snabbdom@v0.7.4版本

原因：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/int，这个路径是作者在 package.json 中的 exports 字段设置的，而我们使用的打包工具不支持 exports 这个字段，webpack 4 也不支持，webpack 5 beta 支持该字段。该字段在导入 snabbdom/init 的时候会补全路径成 snabbdom/build/package/init.js。

"exports": {
    "./init": "./build/package/init.js",
    "./h": "./build/package/h.js",
    "./helpers/attachto": "./build/package/helpers/attachto.js",
    "./hooks": "./build/package/hooks.js",
    "./htmldomapi": "./build/package/htmldomapi.js",
    "./is": "./build/package/is.js",
    "./jsx": "./build/package/jsx.js",
    "./modules/attributes": "./build/package/modules/attributes.js",
    "./modules/class": "./build/package/modules/class.js",
    "./modules/dataset": "./build/package/modules/dataset.js",
    "./modules/eventlisteners": "./build/package/modules/eventlisteners.js",
    "./modules/hero": "./build/package/modules/hero.js",
    "./modules/module": "./build/package/modules/module.js",
    "./modules/props": "./build/package/modules/props.js",
    "./modules/style": "./build/package/modules/style.js",
    "./thunk": "./build/package/thunk.js",
    "./tovnode": "./build/package/tovnode.js",
    "./vnode": "./build/package/vnode.js"
  }

所以如果使用 Snabbdom@v1.0.1 的话，导入 init、h，以及模块只要把把路径补全即可。

import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
import { classModule } from 'snabbdom/build/package/modules/class'

作者关于该问题的回复

#723