Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't deploy to Vercel and Netlify #8

Open
RickRyan26 opened this issue Oct 7, 2021 · 4 comments
Open

Can't deploy to Vercel and Netlify #8

RickRyan26 opened this issue Oct 7, 2021 · 4 comments

Comments

@RickRyan26
Copy link

RickRyan26 commented Oct 7, 2021 •
edited

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: niieani/hashids.js@425877d

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
@RickRyan26 RickRyan26 reopened this Oct 7, 2021
@RickRyan26 RickRyan26 changed the title SyntaxError: Named export 'px' not found. The following packages did not export their package.json Oct 7, 2021
@RickRyan26 RickRyan26 changed the title The following packages did not export their package.json Can't deploy to Vercel and Netlify Oct 7, 2021
@Marcosaurios
Copy link

Marcosaurios commented Oct 12, 2021 •
edited

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
Copy link

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)

@RickRyan26
Copy link
Author

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

@JustMrMendez
Copy link

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 👍🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Marcosaurios @JustMrMendez @RickRyan26