Interpolation syntax error causes unhelpful "Invalid raw" error

[joliss]

Say you have the following bad syntax in your JSX:

<div class="${styles.App}">

This is of course not correct interpolation syntax. I would expect it to be passed through verbatim into the DOM, as class="${styles.App}", or for Solid to throw an error.

However, instead I'm getting an unhelpful "Invalid raw" error message that doesn't point me to the source of the problem:

$ pnpm run dev

> [email protected] dev /home/ubuntu/src/solid-invalid-raw
> vite


  VITE v4.3.9  ready in 211 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help
/home/ubuntu/src/solid-invalid-raw/src/App.jsx: Invalid raw
5:38:34 PM [vite] Internal server error: /home/ubuntu/src/solid-invalid-raw/src/App.jsx: Invalid raw
  Plugin: solid
  File: /home/ubuntu/src/solid-invalid-raw/src/App.jsx
      at templateElementCookedValidator (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/definitions/core.js:1378:40)
      at Object.validate (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/definitions/utils.js:188:7)
      at validateField (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/validators/validate.js:21:9)
      at validate (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/validators/validate.js:15:3)
      at validateNode (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/builders/validateNode.js:12:27)
      at Object.templateElement (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/builders/generated/index.js:777:36)
      at /home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/babel-plugin-jsx-dom-expressions/index.js:1761:55
      at Array.map (<anonymous>)
      at appendTemplates$1 (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/babel-plugin-jsx-dom-expressions/index.js:1751:33)
      at PluginPass.postprocess (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/babel-plugin-jsx-dom-expressions/index.js:3446:32)
      at newFn (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/visitors.js:153:14)
      at NodePath._call (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:46:20)
      at NodePath.call (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:36:17)
      at NodePath.visit (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:90:8)
      at TraversalContext.visitQueue (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:86:16)
      at TraversalContext.visitSingle (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:65:19)
      at TraversalContext.visit (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:109:19)
      at traverseNode (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
      at traverse (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/index.js:49:34)
      at transformFile (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/transformation/index.js:81:29)
      at transformFile.next (<anonymous>)
      at run (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/transformation/index.js:24:12)
      at run.next (<anonymous>)
      at transform (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/transform.js:22:41)
      at transform.next (<anonymous>)
      at step (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:261:32)
      at /home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:273:13
      at async.call.result.err.err (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:223:11)
      at /home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:189:28
      at /home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/gensync-utils/async.js:68:7
      at /home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:113:33
      at step (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:287:14)
      at /home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:273:13
      at async.call.result.err.err (/home/ubuntu/src/solid-invalid-raw/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:223:11)

Here's a repo to reproduce the problem: http://localhost:3000/

I don't know if this is a bug in Solid.js or the Vite plugin specifically. If it should be reported on the Solid.js repo, let me know and I'll re-open it there.