Error when deploying to vercel using preact | Astro Lounge | Page 1

calm glade Jan 21, 2023, 12:04 PM

#

Everything works when developing local but when I deploy to vercel I get a preact error. It looks like the the bundling of preact components is failing. Heres whats the browser returns:

import{s as d}from"./chunks/index.e3b0c442.3e2196e7.js";import{l as u,p as c}from"./chunks/preact.module.dfa46238.js";import{p as f,h as m}from"./chunks/hooks.module.91ff0612.js";var p=0;function l(r,e,s,a,t){var o,n,i={};for(n in e)n=="ref"?o=e[n]:i[n]=e[n];var _={type:r,props:i,key:s,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:--p,__source:t,__self:a};if(typeof r=="function"&&(o=r.defaultProps))for(n in o)i[n]===void 0&&(i[n]=o[n]);return u.vnode&&u.vnode(_),_}function v({isLoading:r,children:e}){return l(c,{children:r?l("div",{className:d.skeleton,children:l("span",{className:"invisible",children:e})}):e})}function k({classes:r,src:e,alt:s}){const[a,t]=f(!0),o=new Image;return o.alt=s,o.src=e,m(()=>{const n=new Image;n.src=e,n.onload=()=>{t(!1)}}),l(c,{children:l(v,{isLoading:a,children:l("img",{class:r,src:e,alt:s,loading:"lazy"})})})}export{k as default};

Where am using the component am setting the hydration to : client:load

Am importing styles module based like so: import styles from "./index.module.scss";

Heres my astro config:

  site: SITE,
  integrations: [
    tailwind(),
    preact(),
  ],
  output: "server",
  adapter: vercel(),
});```

Has anyone experience the same issue?

north tiger Jan 21, 2023, 12:08 PM

#

Hi. What is your actual error?

#

Interesting. Have you tried running Astro build and then Astro preview?

calm glade Jan 21, 2023, 12:16 PM

#

The build command works fine but am unable to preview due to this error:

The @astrojs/vercel/serverless adapter does not support the preview command.

calm glade Jan 21, 2023, 12:48 PM

#

Ok so I swapped out preact to react just to test and now getting a similar behaviour (see output below) this makes me think its a vercel deployment issue not packing the scripts correctly. Any thoughts @north tiger ?

 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var x=l.exports,c=Symbol.for("react.element"),u=Symbol.for("react.fragment"),d=Object.prototype.hasOwnProperty,_=x.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,y={key:!0,ref:!0,__self:!0,__source:!0};function f(t,e,a){var r,s={},n=null,i=null;a!==void 0&&(n=""+a),e.key!==void 0&&(n=""+e.key),e.ref!==void 0&&(i=e.ref);for(r in e)d.call(e,r)&&!y.hasOwnProperty(r)&&(s[r]=e[r]);if(t&&t.defaultProps)for(r in e=t.defaultProps,e)s[r]===void 0&&(s[r]=e[r]);return{$$typeof:c,type:t,key:n,ref:i,props:s,_owner:_.current}}p.Fragment=u;p.jsx=f;p.jsxs=f;(function(t){t.exports=p})(o);function g({isLoading:t,children:e}){return o.exports.jsx(o.exports.Fragment,{children:t?o.exports.jsx("div",{className:m.skeleton,children:o.exports.jsx("span",{className:"invisible",children:e})}):e})}function O({classes:t,src:e,alt:a}){const[r,s]=l.exports.useState(!0),n=new Image;return n.alt=a,n.src=e,l.exports.useEffect(()=>{const i=new Image;i.src=e,i.onload=()=>{s(!1)}}),o.exports.jsx(o.exports.Fragment,{children:o.exports.jsx(g,{isLoading:r,children:o.exports.jsx("img",{className:t,src:e,alt:a,loading:"lazy"})})})}export{O as default};

#Error when deploying to vercel using preact