Fix: refusing to accept isSelfAccepting for JSX

[bholmesdev]

Changes

• Resolves 🐛 BUG: React integration results in "[vite] Internal server error: Cannot set properties of undefined (setting 'isSelfAccepting')" #3465
• Add all client runtime scripts to Vite's optimizedDeps.include. We exclude hmr.js from this list due to dependency issues in the monorepo when using workspace:*. I'm unable to find exactly what's causing this, but the issue seems urgent enough to roll with this temporary solution.

Testing

N/A

Docs

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: ffde61a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
astro	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[tony-sull]

This fix looks good to me, just had a question about the hmr.js case would work outside our monorepo

[tony-sull]

Would this be a problem for astro files not in our monorepo, or is hmr.js always ready before the client needs it?

[bholmesdev]

Yep, it's always ready since we inject hmr.js as a hoisted script!

[okikio]

I'm still seeing this bug after updating to v1.0.0-beta.41

@bholmesdev What do you think?

[chrisblossom]

This is still happening for me as of v1.0.0-beta.42 if the integration turbolinks() is enabled in astro.config.mjs. @okikio is your issue as well?

[okikio]

@chrisblossom No, my astro.config.mjs looks like this,

https://github.com/okikio/bundlejs/blob/f7392c07b621023f218319056e5c7e56fa89a91c/astro.config.mjs#L30

import { defineConfig } from "astro/config";

import * as path from "node:path";
import { lookupCollection } from '@iconify/json';

import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import AutoImport from 'unplugin-auto-import/vite';

import PluginMonacoEditor from "vite-plugin-monaco-editor";
const MonacoEditorPlugin = PluginMonacoEditor.default;

import solid from "@astrojs/solid-js";
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";

import { h, s } from "hastscript";

const { icons: fluentIcons } = await lookupCollection("fluent");
const IconLink = fluentIcons["link-24-regular"];
const IconArrow = fluentIcons["arrow-up-right-24-regular"];

const __dirname = path.resolve(path.dirname(""));

// https://astro.build/config
export default defineConfig({
  build: {
    format: "file"
  },
  site: "https://bundlejs.com",
  markdown: {
    rehypePlugins: [
      "rehype-slug",
      [
        "rehype-autolink-headings",
        {
          behavior: "append",
          content: [
            s("svg", {
              xmlns: "http://www.w3.org/2000/svg",
              width: IconLink.width,
              height: IconLink.height,
              viewBox: `0 0 ${IconLink.width} ${IconLink.height}`,
              class: "icon"
            }, [IconLink.body])
          ],
          test: ['h2', 'h3', 'h4', 'h5', 'h6', 'details', 'summary', 'astro-root']
        },
      ],
      ["rehype-external-links", {
        target: "_blank",
        rel: ["noopener"],
        content: [
          s("svg", {
            xmlns: "http://www.w3.org/2000/svg",
            width: IconArrow.width,
            height: IconArrow.height,
            viewBox: `0 0 ${IconArrow.width} ${IconArrow.height}`,
            class: "icon",
            "rehype-icon": "arrow-up-right-24-regular",
          }, [IconArrow.body])
        ]
      }]
    ],
    shikiConfig: {
      theme: "github-dark",
      langs: [],
      wrap: false
    }
  },
  integrations: [
    solid(),
    tailwind({
      config: {
        applyBaseStyles: false
      }
    }),
    sitemap(),
  ],
  vite: {
    build: {
      assetsInlineLimit: 0,
    },
    worker: {
      format: "iife"
    },
    ssr: {
      external: ["svgo"]
    },
    plugins: [
      AutoImport({
        resolvers: [
          IconsResolver({
            prefix: 'Icon',
            extension: 'tsx'
          })
        ]
      }),
      Icons({
        autoInstall: true,
        compiler: 'solid',
        defaultClass: "icon"
      }),
      MonacoEditorPlugin({
        languageWorkers: [],
        customWorkers: [
          { label: "typescript", entry: path.join(__dirname, "./src/scripts/workers/typescript") },
          { label: "json", entry: path.join(__dirname, "./src/scripts/workers/json") },
          { label: "editor", entry: path.join(__dirname, "./src/scripts/workers/editor") },
        ]
      })
    ]
  }
});