search

movingbrands / svelte-portable-text

Svelte component for rendering block content
MIT License
30 stars 6 forks source link

Error importing block-content-to-hyperscript/internals with SvelteKit #4

Open james-camilleri opened 3 years ago

james-camilleri commented 3 years ago

This may be related to #3 .

Essentially, svelte-portable-text\src\blockContentToNodes.js is importing '@sanity/block-content-to-hyperscript/internals' (using EMM syntax). This causes issues when being run with Node.js (as in the case of a SvelteKit build process), since the Node.js resolution algorithm does not auto-resolve file extensions for ESM. This is easily corrected by changing the import statement from import internals from '@sanity/block-content-to-hyperscript/internals' to import internals from '@sanity/block-content-to-hyperscript/internals.js'

If anyone else is having trouble with this and needs a workaround, you can set the Node.js options to guess the file extensions with the following node options: NODE_OPTIONS = "--experimental-modules --experimental-specifier-resolution=node". (These can be set as command line flags when running the node executable or by settig the NODE_OPTIONS environment variable.)

james-camilleri commented 3 years ago

I've opened a pull request for the change, just in case it makes your life easier. #5

maximum-pixels commented 3 years ago

@jcamilleri13 I downloaded your repo via github packages and the moment I import your component in a file via import BlockContent from "@jcamilleri13/svelte-portable-text"; I get some odd behaviour between vite and the build process:

While running npm run dev the source code renders the blockContent just fine, however then vite kicks in swaps the blockContent with 500 import not found: default.

When I run npm run build it builds just fine and then running npm run preview lets me see the page correctly (with rendered blockContent).

Any idea how to fix this?

james-camilleri commented 3 years ago

The whole import system with non-ESM packages and Vite is a bit shaky right now, I currently have some weird setup where I need a flag to get it to compile on Netlify but it works fine locally. Can you open an issue under my branch (so we don't spam this thread) and let me know what version of NodeJs you're using? And if you're using SvelteKit or plain Svelte?

maximum-pixels commented 3 years ago

Alas there is no issues tab visible for me @jcamilleri13. I did resolve this issue (was including the vite optimizeDeps part in the wrong place (i.e. not a key under kit). Can you give some advice on writing custom serializers? The hyperscript tutorials for portable text give some insight but I'm unsure how to make it work for svelte.

james-camilleri commented 3 years ago

I've enabled the issues, my bad. I'm afraid I haven't really written any serializers from scratch though, just sifted through what was already here, so I don't have much advice to offer 😕