SolidJS•5d ago

vite-plugin-solid errors when doing `prop:x` instead of `prop:x={bool}`

Hello! I am attempting to use @material/web with SolidJS. Everything works pretty good so far but there's one issue that bugs me.

// Doing this works
<md-filled-text-field prop:required={true} />
// But this results in an error!
<md-filled-text-field prop:required />

// Doing this works
<md-filled-text-field prop:required={true} />
// But this results in an error!
<md-filled-text-field prop:required />

Editor/IDE doesn't complain, but the vite-plugin-solid does:

[vite] Internal server error: src\routes\login.tsx: Property arguments[2] of CallExpression expected node to be of a type ["Expression","SpreadElement","ArgumentPlaceholder"] but instead got "JSXEmptyExpression"
  Plugin: solid
  File: src/routes/login.tsx?pick=default&pick=$css
      at validate (node_modules\@babel\types\lib\definitions\utils.js:102:11)
      at validator (node_modules\@babel\types\lib\definitions\utils.js:78:7)
      at Object.validate (node_modules\@babel\types\lib\definitions\utils.js:178:7)
      at validateInternal (node_modules\@babel\types\lib\validators\validate.js:22:9)
      at Object.callExpression (node_modules\@babel\types\lib\builders\generated\index.js:359:3)
      ...

[vite] Internal server error: src\routes\login.tsx: Property arguments[2] of CallExpression expected node to be of a type ["Expression","SpreadElement","ArgumentPlaceholder"] but instead got "JSXEmptyExpression"
  Plugin: solid
  File: src/routes/login.tsx?pick=default&pick=$css
      at validate (node_modules\@babel\types\lib\definitions\utils.js:102:11)
      at validator (node_modules\@babel\types\lib\definitions\utils.js:78:7)
      at Object.validate (node_modules\@babel\types\lib\definitions\utils.js:178:7)
      at validateInternal (node_modules\@babel\types\lib\validators\validate.js:22:9)
      at Object.callExpression (node_modules\@babel\types\lib\builders\generated\index.js:359:3)
      ...

Having this issue in a SolidStart project, here are the dependencies:

├── @material/[email protected]
├── @solidjs/[email protected]
├── @solidjs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

├── @material/[email protected]
├── @solidjs/[email protected]
├── @solidjs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Is this intended? Doesn't look like intended to me.

8 Replies

peerreynders•5d ago

The documentation for prop:* states: “Forces the prop to be treated as a property instead of an attribute.” From what I can see you are using attribute semantics on a JavaScript property; that's not going to work.

peerreynders•5d ago

Perhaps this is relevant.

GitHub

Web-component properties casing are treated like ordinary element a...

Describe the bug I'm not sure if this is expected behavior... I have a web-component that accepts a camelCase property. When consuming the web-component and setting its prop, the generated code...

PalmOP•5d ago

Text fields in @material/web have both an attribute and a property, and doing an attribute does not work either resulting in the same error. However, that's not what the post is about. When doing <some-component prop:required />, I expect the JS property required of the component to be set to true. That is not what happened, instead I got a Vite error (posted above). Even my editor suggests the same behavior, like so:

PalmOP•5d ago

Yep, same issue here. I couldn't find this documented anywhere, that's why I thought it wasn't intended.

peerreynders•5d ago

“I expect the JS property required of the component to be set to true.” You are expecting attribute syntax to work where JS syntax is expected. Editors are often only helpful but not necessarily correct. What I would try is <some-component attr:required />. I'm not saying that it will work—that's just the next thing I would try. JSX to WC interaction seems to hit a lot of weird edge cases.

PalmOP•5d ago

already did, same error. If this is intended, then I'll close the post. But ideally someone would want to document this somewhere because searching the error gives me no results related to the issue. Should I open an issue about this, or?

peerreynders•5d ago

I suspect that while there is an awareness of the issue, it would take somebody deeply steeped in the WC space who also uses Solid extensively to author competent and comprehensive documentation on the matter — individuals with that overlap are rare. In the short term I'd stick to any info left behind by Joe Pea in connection with his work with lume. But yeah, figuring out the JSX <-> WC dance can be annoying; I suspect that JSX being a to-JS DSL rather than actual HTML markup has a large part to do with it.

peerreynders•5d ago

Off topic/FYI: This made me curious how the Porsche Design System deals with the JSX/WC mismatch for their React integration. Answer: It doesn't. It relies on Stencil to generate React components to wrap the reusable WCs. Ouch.

Porsche Design System

Find all the fundamental UXI guidelines and pattern-based web components to build brand driven, consistent and intuitive designs for digital Porsche products.

React Integration with Stencil | Stencil

Learn how to wrap your components so that people can use them natively in React

Gaming

Programming

vite-plugin-solid errors when doing `prop:x` instead of `prop:x={bool}`