Error when using solid.js packages: web.template is not a function

[amirhhashemi]

What version of astro are you using?

1.2.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn classic

What operating system are you using?

Linux

Describe the Bug

When I want to use Solid.js packages that are using @solid-primitives/props package internally, like @solid-aira/focus and @motionone/solid, I get this error:

 error   web.template is not a function
  Code:
    > 46 | const _tmpl$ = /*#__PURE__*/web.template(`<label><input type="checkbox"> <span></span> </label>`, 5),
         |                                 ^
      47 |       _tmpl$2 = /*#__PURE__*/web.template(`<label><span></span> <input type="number"> </label>`, 5),
      48 |       _tmpl$3 = /*#__PURE__*/web.template(`<label><span></span> <input type="text"> </label>`, 5),
      49 |       _tmpl$4 = /*#__PURE__*/web.template(`<label><span></span> <select></select> </label>`, 6),

It works fine when I use @solid-primitives/props directly. The error only happens when it's a transitive dependency. Also adding the package to vite.ssr.noExternal doesn't help.

Link to Minimal Reproducible Example

Here is an example with @motionone/solid

https://stackblitz.com/edit/github-lepeza

Participation

• [ ] I am willing to submit a pull request for this issue.