[bug] Warning about svelte field in package.json (sveltekit v2, vite v5)

[0gust1]

Describe the bug

First, thanks for the work!

With the upgrade of our project to sveltekit v2, we now have a warning about this package.

[vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.
...
svelte-range-slider-pips@2.2.3
...

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

The link https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition hints toward the solution.

It seems pretty straightforward (and also backward compatible), nevertheless, feel free to tell if further info and/or a PR could help !

To Reproduce

Create a fresh svelte + vite v5 project or a fresh sveltekit v2 project, and import svelte-range-slider-pips. npm run dev or npm run build will show the warning.

[simeydotme]

thanks!

hmm, I have another open issue regarding warnings, too. But the same issue exists; I have to research how to build a svelte component into a JS standalone component in the newer versions of svelte. It looks like the svelte-component template hasn't updated for many years and since the move to Vite I have no idea how to configure the outputs. This was built in the Rollup era.

I'll try to spend some time learning how to use Vite like a bundler. As I really absolutely need to maintain the ability to export as a .js file which works with vanilla, vue & react.

[serferdinand2]

Hi, I believe we found the solution for the warning and an error. Just try putting this in the package.json:

  "exports": {
    ".": {
      "svelte": "./dist/svelte-range-slider-pips.mjs"
    }
  },

We also had this error:

  [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

svelte-range-slider-pips@2.2.3

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.
[...]

Error when evaluating SSR module /node_modules/svelte-range-slider-pips/src/index.js: failed to import "/node_modules/svelte-range-slider-pips/src/RangeSlider.svelte"
|- TypeError: Cannot read properties of undefined (reading 'value')
    at TemplateLiteral (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:1154:26)
    at handle (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:57:2)
    at CallExpression|NewExpression (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:516:4)
    at handle (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:57:2)
    at TemplateLiteral (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:1157:4)
    at handle (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:57:2)
    at AssignmentExpression (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:632:3)
    at handle (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:57:2)
    at ExpressionStatement (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:796:3)
    at handle (file:///Users/jw/Work/surveyplanet/app_v2/node_modules/esrap/src/handlers.js:57:2)

Let me know if that works. It worked for us when we edited the nodemodule.

[simeydotme]

hey @serferdinand2 / @0gust1 do you mind to try with the beta version I just published? https://www.npmjs.com/package/svelte-range-slider-pips/v/3.0.0-beta.3 see if that is working?

I updated to svelte4 and added types and other small improvements. Haven't updated readme yet

[himynameisdave]

@simeydotme Tried the beta version and can confirm that the errors are gone!

[0gust1]

@simeydotme

I just tried 3.0.0-beta.5 and 3.0.0-beta.3.

I can confirm that in both cases the warning mentionned above is gone.

But, we have a build error in our project (sorry):

error during build:
RollupError: src/lib/components/XXX/XXX/XXX.svelte (2:8): "default" is not exported by "node_modules/svelte-range-slider-pips/dist/svelte/index.js", imported by "src/lib/components/XXX/XXX/XXX.svelte".
file: /Absolute/path/to/workspace/file/src/lib/components/XXX/XXX/XXX.svelte:2:8
1: <script lang="ts">
2:   import RangeSlider from 'svelte-range-slider-pips';
            ^
3:   import PlotTrendGraph from './PlotTrendGraph.svelte';

Detailed versions used:

• @sveltejs/kit@2.5.4
• @sveltejs/vite-plugin-svelte@3.0.2
• svelte@4.2.12
• vite@5.1.6
• svelte-range-slider-pips@3.0.0-beta.5 (problem also present with 3.0.0-beta.3)

[0gust1]

@simeydotme

FYI, our build error goes away if we change the import to import { RangeSlider } from 'svelte-range-slider-pips';

IDK if it's normal or intended.

[simeydotme]

@simeydotme

FYI, our build error goes away if we change the import to import { RangeSlider } from 'svelte-range-slider-pips';

IDK if it's normal or intended.

Yes, I expect this to be the new way to import, will have to update documentation. Because I moved it over to a SvelteKit lib, and separated all the logic and functions, should help with tree-shaking and optimising code. Also it was necessary to allow usage with the new package exports and jQuery/Vanilla

https://github.com/simeydotme/svelte-range-slider-pips/blob/v3.0.0-beta.3/src/lib/index.ts

I'll see if I can get it out this weekend :)

[simeydotme]

thanks for your effort to help!

[thibistaken]

Hi! I face the same issue. Would you have any update on the 3.0 rollout? Thanks for your work on this.