snowpack: Migration from CRA to Snowpack 2.0, library compatibility problem

Hi,

I was trying to migrate a project to Snowpack 2.0 from CRA and I got this, is there anything that can be done on my end to make it work?

⠙ snowpack installing...
...packages
✘ /own_projects/new-dir/node_modules/dayjs/dayjs.min.js?commonjs-proxy
👉 https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

Error: '__moduleExports' is not exported by node_modules/react-dom/index.js, imported by /home/zephyrus/projects/own_projects/new-dir/node_modules/react-dom/index.js?commonjs-proxy
    at error (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:217:30)
    at Module.error (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:15145:16)
    at handleMissingExport (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:15042:28)
    at Module.traceVariable (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:15519:24)
    at ModuleScope.findVariable (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:14199:39)
    at Identifier$1.bind (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:10080:40)
    at ExportDefaultDeclaration.bind (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:9707:23)
    at Program$1.bind (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:9703:31)
    at Module.bindReferences (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:15117:18)
    at Graph.linkAndOrderModules (/home/zephyrus/projects/own_projects/new-dir/node_modules/rollup/dist/shared/rollup.js:18252:20)

Thanks!

Edit: I’ve just tried importing dayjs/esm and it worked, but now I get the same issue with react-dom, all libraries are in the latest version.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 2
  • Comments: 19 (7 by maintainers)

Most upvoted comments

Ah, I see the problem. This should have been:

import logo from '../img/logo.png'; 

Since your import is run in the browser, and the public directory has been mounted to /, the image file actually lives at /img/logo.png and not /public/img/logo.png.

We should still have a better error message for you though, besides just “bad MIME type”

I don’t face this issue when installing dependencies using yarn npm version: 6.14.4 node version: v12.18.0 yarn version: 1.22.0

Update:

I ran npm cache clean --force and it worked fine.

Thank you

I’m having a similar issue:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    resolveDispatcher http://localhost:8080/web_modules/common/index-d708596e.js:1651
    useMemo http://localhost:8080/web_modules/common/index-d708596e.js:1706
    Provider Redux
    React 16
    <anonymous> http://localhost:8080/_dist_/index.js:32
index-d708596e.js:1651:13
    resolveDispatcher http://localhost:8080/web_modules/common/index-d708596e.js:1651
    useMemo http://localhost:8080/web_modules/common/index-d708596e.js:1706
    Provider Redux
    React 16
    <anonymous> http://localhost:8080/_dist_/index.js:32
    InnerModuleEvaluation self-hosted:1572
    evaluation self-hosted:1543

Note that

  1. i’m migrating from cra and things were working just fine. So i’m not breaking the rules of hooks
  2. I’m using the same version of React and ReactDOM. Here is the result of npm ls image
  3. I don’t have more than one copy (not possible since npm ls outputs one)

Would love to see the console logs / errors, if you don’t mind sharing!