valtio 1.5.0 in Next.js

[oleksyoleksy]

After yarn create next-app . && yarn add valtio,

when valtio is imported to ~/pages/index.js with import { proxy, useSnapshot } from 'valtio',

there is an error:
error - Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '~/node_modules/use-sync-external-store/shim' is not supported resolving ES modules imported from ~/node_modules/valtio/esm/index.mjs Did you mean to import ~/node_modules/use-sync-external-store/shim/index.js?

Any idea how to fix it?

[dai-shi]

Thanks for reporting!
Ah, I forgot about it. It's reported in pmndrs/zustand#829 and I made a fix there.
Let's do the same here.

[dai-shi]

Can you try #411?
https://ci.codesandbox.io/status/pmndrs/valtio/pr/411
Please find "Local Install Instructions" in ☝️ .

[LefanTan]

unfortunately, another error persist whenever I tried to create a proxy state:

error - Error: ENOTDIR: not a directory, stat '/Users/lefantan/Documents/CS/popin/node_modules/use-sync-external-store/shim/index.js/index.js'

Another behavior I noticed is, this error only appears whenever I directly load the page that creates the proxy. If I enter the page that creates the proxy from another page (that doesn't create any proxy), it works fine, that is until I refresh.

I was able to fix this by writing import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js instead of import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js/index.js in dist/esm/index.js and dist/esm/index.mjs

[deadcoder0904]

i have the same error & npm i pmndrs/valtio#fix/build/path-for-cjs isn't working even tho i do it every time as i have this answer bookmarked.

also, tried setting it in package.json like:

"valtio": "github:pmndrs/valtio#fix/build/path-for-cjs"

& then npm i but still ain't working. i get an error:

npm ERR! The git reference could not be found
npm ERR! command git --no-replace-objects checkout fix/build/path-for-cjs
npm ERR! error: pathspec 'fix/build/path-for-cjs' did not match any file(s) known to git

never had / in branch name but is there any other way to install it?

[dai-shi]

Thanks, guys. That was a silly mistake.
#411 is updated. Please try the new commit.

[sivadinesh1]

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '.../node_modules/use-sync-external-store/shim' is not supported resolving ES modules imported from /Users/sivadinesh/Documents/products/2022/greenpot/node_modules/valtio/esm/index.mjs
Did you mean to import use-sync-external-store/shim/index.js?
at new NodeError (node:internal/errors:371:5)
at finalizeResolution (node:internal/modules/esm/resolve:414:17)
at moduleResolve (node:internal/modules/esm/resolve:983:10)
at defaultResolve (node:internal/modules/esm/resolve:1080:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
at ModuleWrap. (node:internal/modules/esm/module_job:79:40)
at link (node:internal/modules/esm/module_job:78:36) {
code: 'ERR_UNSUPPORTED_DIR_IMPORT',
url: 'file:///Users/sivadinesh/Documents/products/2022/greenpot/node_modules/use-sync-external-store/shim'
}
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/sivadinesh/Documents/products/2022/greenpot/node_modules/use-sync-external-store/shim' is not supported resolving ES modules imported from /Users/sivadinesh/Documents/products/2022/greenpot/node_modules/valtio/esm/index.mjs
Did you mean to import use-sync-external-store/shim/index.js

[LefanTan]

Thanks, guys. That was a silly mistake. #411 is updated. Please try the new commit.

This works, thanks for the quick fix.