SvelteKit / Vite support (works out of the box now, site and examples will be updated soon) #41
Comments
|
I haven't used Svelte Kit or Vite yet – I was waiting for it to stabilize a bit. It's stumbling over the index.js file, though, which makes me think that the library needs to be compiled, similar to how the SSR build process works. The index.js file is just a convenience reference file so maybe what you could do as a workaround is require the files directly like |
|
Thanks @mhkeller. Sadly, I tried the direct import as well but ran into other issues. If I change I would then get the following error: I also tried adding an
If I left Lastly, I decided to pull in LayerCake's source directly into my but after another browser refresh, it works:
my
needless to say I'm still perplexed, and my workaround isn't optimal, but allows me to progress for now. Thanks for getting back to me so quickly. |
|
Coincidently as soon as I submitted the last comment I did another search and came across this Vite issue posted 40 minutes ago that looks related... I'll keep an eye on it :) |
|
I'm glad you found a workaround. Strange that importing it directly doesn't fix it since I would think that is the same thing as copying it into the project. I should maybe add a Troubleshooting section to the site. Since LayerCake is just a collection of Svelte components, I think most build-type issues would be solved by copying it directly into the project. I'll keep this issue open for a little bit in case there are updates. When SvelteKit is stable I was going to redo the layercake.graphics site using it and work out any issues then. |
|
I still have some chart examples and more foundational components to share with you at some point :). I still have more to write/port from React (as well as the overall project which has been my evening project since last summer). I'm hoping to go live with the new Svelte-based project this summer and should have some components to share. Maybe we can hop on a video chat and discuss when I'm closer. I've considered releasing a companion library on top of LayerCake if not done directly in LayerCake. They are not full chart components, more building blocks that you currently have to copy/paste from the examples. Very similar to visx (which I contributed too). |
|
Sounds good! Send me an email when you want to go through it. |
mhkeller
added
the
awaiting-something-else
|
It seems like it needs to be inside the |
|
I ran into this as well trying to integrate LayerCake into a SvelteKit project. Basically tried to integrate the front-page example. Repo here: Wolfr/sveltekit-jui@097aff8 Keeping my eye on the this thread over at the vite repo . |
|
[vite] Error when evaluating SSR module /node_modules/better-sqlite3/lib/index.js: |
|
Being a newbie programmer, I am trying to understand what is going on. Thank you all. |
|
For now changing 'module.exports' to export default in 'svelte.config.cjs' solved the problem for me. Thank you once again. |
|
Sorry, it did not work. My bad. Apologies. |
|
What worked is this: https://github.com/techniq/svelte-kit-layercake/blob/master/vite.config.js That looks a bit hacky but works for now. |
|
Just to be ultra clear on this, what you need to do is update your And then you need to add an additional |
|
Woohoo, a solution! This will help me to integrate Layercake as the default charting package in my project sveltekit-jui. |
|
@seans84 It says Please remove vite.config.js and put Vite config in svelte.config.cjs: https://kit.svelte.dev/docs#configuration-vite |
|
I tested the solution @seans84 but don't really think you are supposed to do that, also based on @quantuminformation 's comment. You are supposed to put Vite specific config in the vite object within the "kit" object of |
|
Solved it temporarly by using |
|
I had an error with d3 when I installed it as a dependency and not as a development dependency. After installing d3 with |
This comment has been minimized.
This comment has been minimized.
|
Continued experimenting, I'm now getting this: I've tried all the solutions recommended in the error (changing index.js to .cjs, changing require to import, removing type: module from the d3-format package.json) ... and the error has persisted throughout. Could this have to do with the fact that I initially configured sveltekit to use TypeScript? If it would help, I'd be glad to switch that initial configuration setting back to just javascript. Anyway, any input or guidance would be greatly appreciated |
|
Since SvelteKit is really unstable at this point, the solutions provided earlier in this thread may no longer be working simply due to changes in the structure/behavior of the Recently (3 days ago as I write this), The
With the latest version ( import preprocess from 'svelte-preprocess';
import node from '@sveltejs/adapter-node';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [
preprocess({
defaults: {
style: 'postcss'
},
postcss: true
})
],
kit: {
adapter: node(),
target: '#svelte',
vite: {
ssr: {
noExternal: []
},
optimizeDeps: {
include: ['layercake']
}
}
}
};
export default config; |
|
@a-luna I've just tried this, and I'm getting the same error that the thread started with. I get the sense from your post that you're using layercake normally (as in imported from node_modules), but maybe I'm missing something? |
I followed the steps in @a-luna post and had the same issue, but was able to resolve it by installing layer cake as a dependency rather than a devDependency. @a-luna do you layercake installed as a devDependency or a dependency? Edit: working with @aslak01 on discord, we were able to get layercake working with the latest version of SvelteKit for them as well; requirements seem to be: ensure layercake is installed as a dependency, any d3 dependencies need to be installed as devDependencies, and in svelte.config.js config.kit.vite.optimizeDeps.include needs to be an array containing 'layercake' |
|
@cryptodeal thanks for that comment. I got the first example in the layercake guide to work with the following in my |
|
Based on the advice in this thread I made a template: Normally if you clone this repo, This is based on the latest version of SvelteKit I believe (not sure, seems they are not versioning SvelteKit for now). It works but the dev experience is terrible. It seems the HMR gets into some kind of infinite loop and you have to restart the compiler to see your changes. |
|
Thanks @Wolfr and for everyone dropping their nuggets of wisdom into this thread. Hopefully it stabilizes soon! I'm keeping my eye on it 👀 |
mhkeller
changed the title
|
I'm also getting this problem and the proposed solution is not working. The following error occurs due to adding in |
I remember seeing this error in a project unrelated to this. I think updating sveltekit and its node-adapter fixed it. Does |
|
I don't remember if node is the default adapter supplied by svelte kit? But I remember having that error after installing an adapter with npm, and the solution being going into package.json and changing whatever version number ended up there to "latest". |
|
This didn't work for me. That didn't work for me. |
|
@davidcallanan Sorry I remembered wrong, it's supposed to be |
|
@aslak01 Oh well that's the way it was initially when it didn't work I think. Anyway I've moved on to some other solution to what I was doing so I don't need to fix this problem anymore. |
|
I put this demo together and it seems to work out of the box now. I have a couple of questions.
After reading the vite docs, it seems like it's a good idea to bundle layercake with
[edit: question answered, it will go in dependencies] |
|
Runs fine here too. |
|
@mhkeller Regarding number 2 ( |
|
@techniq cool. that's the answer i got elsewhere also |
|
I'm going to be rewriting the layercake.graphics website (https://github.com/mhkeller/layercake.graphics) to use svelte kit and then port all the examples over but good to know that this issue is no longer a blocker. I'll keep it up in case people have any questions. |
mhkeller
added
advisory
mhkeller
changed the title
|
I'm having the same issue with revogrid. |
|
@akiarostami what issue are you having? are you using layercake? |
|
I'm sorry @mhkeller, I left this note on a wrong list! I'm having this issue with revogrid, not Layercake. |
|
See #54 if you are experiencing issues with SvelteKit |
|
This is pretty much done. There's a |
|
Mostly waiting to hear some thoughts on this issue before publishing the new version and updating everything: #57 |
|
One thing I looked into was bundling d3-scale into layercake using vite's edit: altho the advantage is that you'll possibly be getting a new version of d3-scale on install... |
|
This is now merged and released as 6.0.0 https://github.com/mhkeller/layercake/releases/tag/v6.0.0 |
I recently moved to the latest SvelteKit based on Vite (
1.0.0-next.50) and Layer Cake throws an error when imported:It looks like it's being detected as commonjs instead of esm. I'm not 100% sure if the issue is with Layer Cake, Vite (as it worked with older SvelteKit based on Snowpack), SvelteKit recently adding type: module to
package.json(I was on an older SvelteKit/Snowpack before this change) or something else.I see Layer Cake has main and module defined in package.json, but not an export map which from my limited understanding is the best tell for ESM for Vite/Snowpack/etc.
I've created a repo to demonstrate the issue.
I just ran
npm init svelte@next, addedlayercakeand a simple chart example. When I initially ran this example last night the issue didn't present itself, but when I tried to identify what else was different between this example and my project just now, it show'd up. I've cleared and re-installednode_modulesas well as the.sveltedirectly (trying to clear any cache) but the issue persists. I'm using nodev14.14.0.The text was updated successfully, but these errors were encountered: