Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Astro JSX Bug - Property body of ArrowFunctionExpression expected node to be of a type ["BlockStatement","Expression"] but instead got "ExpressionStatement" #7499

Closed
1 task
oscartbeaumont opened this issue Apr 16, 2023 · 7 comments · Fixed by #8107
Assignees
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)

Comments

@oscartbeaumont
Copy link

What version of astro are you using?

^2.3.0

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

None

What package manager are you using?

pnpm

What operating system are you using?

Mac (my machine) or Stackblitz

What browser are you using?

Chrome

Describe the Bug

With the following code, you encounter an error from astro:jsx as attached below. I am using SolidJS with Astro.

import { NoHydrate } from "solid-js/web";

// This is a SolidJS component that is `client:load`ed into the `index.astro` file.
export default function App() {
  return (
    <html lang="en">
      {/* Removing the `NoHydrate` wrapper will cause the bug to go away */}
      {/* Putting any custom component here seems to be causing issues */}
      <NoHydration>
        <head>
          <meta charset="UTF-8" />
          <link rel="icon" type="image/x-icon" href="/favicon.ico" />
          <meta name="viewport" content="width=device-width" />
          <title>Astro Bug</title>
        </head>
      </NoHydration>
      <body>
        <h1>Hello World</h1>
      </body>
    </html>
  );
}

Error:

[vite] Internal server error: /home/projects/astro-searrp/src/components/index.tsx: Property body of ArrowFunctionExpression expected node to be of a type ["BlockStatement","Expression"] but instead got "ExpressionStatement"
Reveal full error
10:07:19 [vite] Internal server error: /home/projects/astro-searrp/src/components/index.tsx: Property body of ArrowFunctionExpression expected node to be of a type ["BlockStatement","Expression"] but instead got "ExpressionStatement"
  Plugin: astro:jsx
  File: /home/projects/astro-searrp/src/components/index.tsx
      at Object.validate (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+types@7.21.4/node_modules/@babel/types/lib/definitions/utils.js:112:11)
      at validateField (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+types@7.21.4/node_modules/@babel/types/lib/validators/validate.js:21:9)
      at validate (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+types@7.21.4/node_modules/@babel/types/lib/validators/validate.js:15:3)
      at validateNode (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+types@7.21.4/node_modules/@babel/types/lib/builders/validateNode.js:12:27)
      at Object.arrowFunctionExpression (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+types@7.21.4/node_modules/@babel/types/lib/builders/generated/index.js:638:36)
      at transformComponentChildren (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:3246:26)
      at transformComponent (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:3162:23)
      at transformElement (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:3411:36)
      at transformNode (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:3314:12)
      at eval (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:1420:27)
      at Array.reduce (<anonymous>)
      at transformChildren$2 (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:1414:35)
      at transformElement$3 (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:769:5)
      at transformElement (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:3421:12)
      at transformNode (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:3314:12)
      at PluginPass.transformJSX (file:///home/projects/astro-searrp/node_modules/.pnpm/babel-plugin-jsx-dom-expressions@0.36.10_@babel+core@7.21.4/node_modules/babel-plugin-jsx-dom-expressions/index.js:3274:18)
      at newFn (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/visitors.js:149:21)
      at NodePath._call (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/path/context.js:45:20)
      at NodePath.call (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/path/context.js:35:17)
      at NodePath.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/path/context.js:80:31)
      at TraversalContext.visitQueue (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:86:16)
      at TraversalContext.visitSingle (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:65:19)
      at TraversalContext.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:109:19)
      at traverseNode (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
      at NodePath.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/path/context.js:86:52)
      at TraversalContext.visitQueue (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:86:16)
      at TraversalContext.visitMultiple (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:61:17)
      at TraversalContext.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:107:19)
      at traverseNode (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
      at NodePath.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/path/context.js:86:52)
      at TraversalContext.visitQueue (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:86:16)
      at TraversalContext.visitSingle (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:65:19)
      at TraversalContext.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:109:19)
      at traverseNode (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
      at NodePath.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/path/context.js:86:52)
      at TraversalContext.visitQueue (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:86:16)
      at TraversalContext.visitSingle (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:65:19)
      at TraversalContext.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:109:19)
      at traverseNode (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
      at NodePath.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/path/context.js:86:52)
      at TraversalContext.visitQueue (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:86:16)
      at TraversalContext.visitMultiple (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:61:17)
      at TraversalContext.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:107:19)
      at traverseNode (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
      at NodePath.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/path/context.js:86:52)
      at TraversalContext.visitQueue (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:86:16)
      at TraversalContext.visitSingle (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:65:19)
      at TraversalContext.visit (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/context.js:109:19)
      at traverseNode (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
      at traverse (file:///home/projects/astro-searrp/node_modules/.pnpm/@babel+traverse@7.21.4/node_modules/@babel/traverse/lib/index.js:49:34)

I traced the error back to the existence of the NoHydrate component in index.ts. The error says it was sourced from astro:jsx so I am reporting it here.

I also noticed that the error only happens when client:load'ing the file, the file seems to be fine for SSR'ing.

It looks like it's nothing special with the NoHydrate component from SolidJS and replacing it with any custom JSX component will reproduce the same bug.

I would love to help with a PR but this might be a bit out of my depth.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro-searrp?file=src/components/index.tsx

Participation

  • I am willing to submit a pull request for this issue.
@oscartbeaumont
Copy link
Author

From a bit of messing around the issue seems to consistently happen when you have a head element in a custom component.

For example, the following is working:

function Demo() {
     return <head></head>;
}

function DemoWrapper() {
     return <NoHydration><Demo /></NoHydration>
}

But this causes the bug to come back:

function DemoWrapper() {
     return <NoHydration><head></head></NoHydration>
}

@matthewp
Copy link
Contributor

@ematipico could be a good one for you to grab if you have the time.

@matthewp matthewp added the - P3: minor bug An edge case that only affects very specific usage (priority) label Apr 28, 2023
@ematipico ematipico self-assigned this May 1, 2023
@ematipico
Copy link
Member

This seems to be an issue in our compiler. I am going to move the issue there

@ematipico ematipico transferred this issue from withastro/astro May 1, 2023
@ematipico
Copy link
Member

ematipico commented May 4, 2023

Here's what the compiler emits:

return $$render`function DemoWrapper() ${
     return "something"}`;
}, '<stdin>');
export default $$stdin;

Which is not valid code

You can view the playground

@bluwy
Copy link
Member

bluwy commented May 8, 2023

IIUC .astro files are HTML-first so it makes sense that writing direct JSX in .astro would fail, but it seems like the error comes from the components/index.tsx specifically. Is it that Astro's JSX is wrongly used to handle components/index.tsx? (Should be Solid's instead)

@natemoo-re
Copy link
Member

Yeah, it looks like this is a problem with astro:jsx being used to handle a Solid component. Maybe our framework detection is getting tripped up somehow?

Either way, this is a JSX bug so I'm moving this issue back from the compiler repo.

@natemoo-re natemoo-re transferred this issue from withastro/compiler Jun 27, 2023
@natemoo-re
Copy link
Member

I looked into this again and the stacktrace seems to be coming from babel-plugin-jsx-dom-expressions which is used internally by Solid. My guess is that our Solid integration is outdated.

Good news though, it looks like simply updating to babel-preset-solid@1.7.7 fixes the issue and the next branch is also working already.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)
Projects
None yet
5 participants