Can't deploy to Vercel and Netlify

[RickRyan26]

Hello Michael,

I absolutely love Svelte-Motion but can't get it to run on Vercel nor Netlify. Should I try LiteSpeed? I really would like to stick with Vercel though.

I think we need to update style-value-types, popmotion, framesync with the below but have no idea how to that.

 "exports": {
    ...
    "./package.json": "./package.json"
  },

Ref: https://github.com/niieani/hashids.js/commit/425877d842b18918121788b3810dbec15241c8ac

Thank you so much! RR

---

VERCEL

18:50:34.979 | vite v2.6.3 building SSR bundle for production... 18:50:35.311 | transforming... 18:50:36.817 | 1:50:36 AM [vite-plugin-svelte] The following packages did not export their package.json file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file. 18:50:36.817 | - style-value-types 18:50:36.818 | - popmotion 18:50:36.818 | - framesync 18:50:36.818 | ✓ 171 modules transformed. 18:50:36.936 | rendering chunks... 18:50:36.937 | .svelte-kit/output/server/app.js 221.74 KiB 18:50:36.940 | vite v2.6.3 building for production... 18:50:36.949 | transforming... 18:50:36.954 | ✓ 2 modules transformed. 18:50:36.958 | rendering chunks... 18:50:36.960 | .svelte-kit/output/client/service-worker.js 2.17 KiB / gzip: 0.90 KiB 18:50:36.962 | Run npm run preview to preview your production build locally. 18:50:36.969 | > Using @sveltejs/adapter-vercel 18:50:36.969 | Generating serverless function... 18:50:37.253 | Prerendering static pages... 18:50:37.291 | > Named export 'px' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports. 18:50:37.291 | CommonJS modules can always be imported via the default export, for example using: 18:50:37.292 | import pkg from 'style-value-types'; 18:50:37.292 | const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg; 18:50:37.292 | file:///vercel/path0/.svelte-kit/output/server/app.js:25 18:50:37.292 | import { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } from "style-value-types"; 18:50:37.293 | ^^ 18:50:37.293 | SyntaxError: Named export 'px' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports. 18:50:37.293 | CommonJS modules can always be imported via the default export, for example using: 18:50:37.293 | import pkg from 'style-value-types'; 18:50:37.293 | const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg; 18:50:37.293 | at ModuleJob._instantiate (internal/modules/esm/module_job.js:124:21) 18:50:37.293 | at async ModuleJob.run (internal/modules/esm/module_job.js:179:5) 18:50:37.293 | at async Loader.import (internal/modules/esm/loader.js:178:24) 18:50:37.294 | at async prerender (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index5.js:120:14) 18:50:37.294 | at async Object.prerender (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index5.js:351:4) 18:50:37.294 | at async adapt (file:///vercel/path0/node_modules/@sveltejs/adapter-vercel/index.js:51:4) 18:50:37.294 | at async adapt (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index5.js:376:2) 18:50:37.294 | at async file:///vercel/path0/node_modules/@sveltejs/kit/dist/cli.js:1012:5 18:50:37.322 | error Command failed with exit code 1. 18:50:37.322 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 18:50:37.343 | Error: Command "yarn run build" exited with 1

---

NETLIFY

11:39:05 PM: 6:39:05 AM [vite-plugin-svelte] The following packages did not export their package.json file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file. 11:39:05 PM: - framesync 11:39:05 PM: - popmotion 11:39:05 PM: - style-value-types 11:39:05 PM: ✓ 179 modules transformed. 11:39:05 PM: rendering chunks... 11:39:05 PM: .svelte-kit/output/server/app.js 247.52 KiB 11:39:05 PM: vite v2.6.3 building for production... 11:39:05 PM: transforming... 11:39:05 PM: ✓ 2 modules transformed. 11:39:05 PM: rendering chunks... 11:39:05 PM: .svelte-kit/output/client/service-worker.js 2.17 KiB / gzip: 0.89 KiB 11:39:05 PM: Run npm run preview to preview your production build locally. 11:39:05 PM: 11:39:05 PM: > Using @sveltejs/adapter-netlify 11:39:05 PM: No netlify.toml found. Using default publish directory. Consult https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify#configuration for more details 11:39:05 PM: Publishing to "build" 11:39:05 PM: Generating serverless function... 11:39:06 PM: Prerendering static pages... 11:39:06 PM: > Named export 'alpha' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports. 11:39:06 PM: CommonJS modules can always be imported via the default export, for example using: 11:39:06 PM: import pkg from 'style-value-types'; 11:39:06 PM: const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg; 11:39:06 PM: 11:39:06 PM: file:///opt/build/repo/.svelte-kit/output/server/app.js:25 11:39:06 PM: import { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } from "style-value-types"; 11:39:06 PM: ^^^^^ 11:39:06 PM: SyntaxError: Named export 'alpha' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports. 11:39:06 PM: CommonJS modules can always be imported via the default export, for example using: 11:39:06 PM: import pkg from 'style-value-types'; 11:39:06 PM: const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg; 11:39:06 PM: at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21) 11:39:06 PM: at async ModuleJob.run (node:internal/modules/esm/module_job:179:5) 11:39:06 PM: at async Loader.import (node:internal/modules/esm/loader:178:24) 11:39:06 PM: at async prerender (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index5.js:120:14) 11:39:06 PM: at async Object.prerender (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index5.js:351:4) 11:39:06 PM: at async adapt (file:///opt/build/repo/node_modules/@sveltejs/adapter-netlify/index.js:48:4) 11:39:06 PM: at async adapt (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index5.js:376:2) 11:39:06 PM: at async file:///opt/build/repo/node_modules/@sveltejs/kit/dist/cli.js:1012:5

[Marcosaurios]

Hey Rick! I have the same issue you have here, but I think the stopper here is the 'style-value-types' dependency, which fails being loaded by Vite I guess...

11:39:06 PM: > Named export 'alpha' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports.
11:39:06 PM: CommonJS modules can always be imported via the default export, for example using:
11:39:06 PM: import pkg from 'style-value-types';
11:39:06 PM: const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg;
11:39:06 PM:
11:39:06 PM: file:///opt/build/repo/.svelte-kit/output/server/app.js:25
11:39:06 PM: import { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } from "style-value-types";

As the error states, the problem is in the style-value-typesmodule, which should be ESM and not CommonJS module... but in their repo I don't see any intention to switch it to ESM...

[Marcosaurios]

Okey, after a few weeks with this headache seems I have found a workaround to fix this temporarily... Adding the CommonJS dependencies to the vite config avoids being bundled by vite:

In the svelte.config.js:

const config = {
 kit: {
  vite: {
   ssr: {
    noExternal: ['style-value-types', 'popmotion', 'framesync']
   }
  }
 }
}

See https://github.com/sveltejs/kit/issues/928#issuecomment-908610606

[RickRyan26]

Just saw all this. This work around looks great to me! Thank you

[JustMrMendez]

Okey, after a few weeks with this headache seems I have found a workaround to fix this temporarily... Adding the CommonJS dependencies to the vite config avoids being bundled by vite:

In the svelte.config.js:

const config = {
 kit: {
  vite: {
   ssr: {
    noExternal: ['style-value-types', 'popmotion', 'framesync']
   }
  }
 }
}

See sveltejs/kit#928 (comment)

Thanks for that, it worked 👍🏻