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.

[matthewp]

You likely need to use noExternal config because the package is not ESM.

[amirhhashemi]

@matthewp When I use @solid-primitives/props package directly, it works fine. But when another package (like @solid-aria) uses that internally, I get that error. I still can't tell the cause of the error as I know nothing about this stuff but it should be investigated.

[thetarnav]

Another example with @motionone/solid that also ships preserved jsx, and has a dependency to @solid-primitives/props
https://stackblitz.com/edit/github-7cxbsf-py2rr6

[bluwy]

Looks like #5059 didn't fully fix that, we may need to recursively noExternal solidjs deps to fix this. A workaround is to add ['@motionone/solid', '@solid-primitives/props'] to vite.ssr.noExternal.

But even with that configuration, I'm getting:

Error: Unable to render Motion because it is undefined!
Did you forget to import the component or is it possible there is a typo?
    at Module.renderComponent (/node_modules/astro/dist/runtime/server/render/component.js:76:11)

which may be another issue.

[bluwy]

Actually it seems like that error doesn't happen anymore, might be a fluke. I'll be automating the workaround for this PR by updating vite-plugin-solid to do that, and have @astrojs/solid-js to use vite-plugin-solid.

[amirhhashemi]

Actually it seems like that error doesn't happen anymore, might be a fluke. I'll be automating the workaround for this PR by updating vite-plugin-solid to do that, and have @astrojs/solid-js to use vite-plugin-solid.

That's awesome. Thank you for taking the time to fix this. I'm gonna close this issue. Feel free to re-open it if you think it's not fully fixed. Unfortunately, I'm super busy and can't test it out. Maybe @thetarnav can test it. Thank you again.

[thetarnav]

The solid-primitives/props has been changed in the last version to not ship JSX.
motionone/solid still is though
Not sure if that's correlated, but it might be

[bluwy]

Yeah I'll still need to automate the noExternal part. Re-opening for now.

[bluwy]

I was able to replicate the Unable to render Motion because it is undefined! error again and it seems to be because Motion.* is a proxy component that's interfering with Astro's component rendering process. This one might be tricky to untangle.

[adharshmk96]

I have the same issue when testing a function for solid.

  ● Test suite failed to run

    TypeError: (0 , _web.template) is not a function

      1 | import { render, screen } from '@solidjs/testing-library';
      2 | import userEvent from '@testing-library/user-event';
    > 3 | import createForm from '../index';
        |                                   ^
      4 |
      5 | function DummyComponent(register, onSubmit) {
      6 |   return function component() {

here's the repo https://github.com/adharshmk96/solid-hook-form

[wakaztahir]

This error occurs, Please re open this issue, as I am getting this error with a package I published on github which contains solid jsx

[wakaztahir]

@matthewp Here's a reproducer

https://github.com/Qinetik/anique-template/tree/fe21a721411a78a36244d6293cf04bd9e4b4f490

This also happens with solid-start when ssr : true since My library uses template function which is present inside SolidJS web client package rather than the server package, since there's no template function in server package, It produces an error

UPDATE

has been fixed, It was an issue with the library, I am using tsup now which fixes this issue ! tsup packages the library real nice.