Module Resolution issues when building with Astro
JumboLove opened this issue · 11 comments
I have an issue with using this package to build a static site with Astro.
I've created a Codesandbox that renders Portable text.
The command npm run dev sets up a development server and everything resolves and renders fine.
npm run build throws an error when trying to import the module.
generating static routes
error Named export 'PortableText' not found. The requested module '@portabletext/react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@portabletext/react';
const { PortableText } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
at async generatePages (file:///project/home/jumbolove/workspace/node_modules/astro/dist/core/build/generate.js:70:20)
at async staticBuild (file:///project/home/jumbolove/workspace/node_modules/astro/dist/core/build/static-build.js:68:7)
at async AstroBuilder.build (file:///project/home/jumbolove/workspace/node_modules/astro/dist/core/build/index.js:83:5)
at async AstroBuilder.run (file:///project/home/jumbolove/workspace/node_modules/astro/dist/core/build/index.js:123:7)
at async build (file:///project/home/jumbolove/workspace/node_modules/astro/dist/core/build/index.js:22:3)
at async runCommand (file:///project/home/jumbolove/workspace/node_modules/astro/dist/cli/index.js:138:14)
I tried the suggestion of importing the whole package, then destructuring the Portable text function, and that also failed to resolve with a different error.
Since the dev server works fine, I'm wondering if there is a config setup missing that treats modules differently on dev vs. build.
Let me know if this is a bug in the way the module is bundled or if the Astro build config should resolve the module with different configs.
I took a look at publint and there might be something in the package build step that is incorrectly publishing files:
Hey @rexxars,
I can confirm the issue and added a PR for @portabletext/react and @portabletext/toolkit.
@JumboLove In the meantime you can fix the issue by adding this to your package.json. The original packages will be overridden by the ones from my GitHub.
"overrides": {
"@portabletext/react": "tillschweneker/react-portabletext",
"@portabletext/toolkit": "tillschweneker/toolkit"
}
Thank you @tillschweneker for the quick fix!
The overrides option isn't working for me, the @portabletext/toolkit package still throws the same resolution error.
Any change those PRs can be merged so the issue is fixed? The packages are completely unusable to an entire ecosystem currently.
@rshackleton Did you try to delete your node_modules folder and package-lock.json and run npm i again?
@tillschweneker Surprisingly the build worked on Vercel when I pushed up a branch with these changes.
Nuking the node_modules and lock files and reinstalling worked. I think I'd done everything but delete the lock file previously. Thanks for the assist.
This should be fixed as of v2.0.1 - please give it a try!
I've nuked my node_modules and yarn.lock and updated to v2.0.1 of @portabletext/toolkit and the package.json is still missing the "type": "module" property which causes the issue.
Looks like the PR wasn't merged: portabletext/toolkit#6
Ah I was trying to get this working in a demo site but a dependency was forcing a lower version, ensuring all versions are on 2.0.1 has actually resolved the issue. Thanks!
Works great now! Thanks!