slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Home Page:https://slinkity.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React: The above dynamic import cannot be analyzed by Vite.

christopherpickering opened this issue · comments

Describe the bug

I have a simple react component page index.tsx (same error if I use `.jsx):

import { useState } from "react";
import type { IslandExport } from "slinkity";

export const island: IslandExport = {
  when: "client:load",
};

export default function About() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You've had {count} glasses of water 💧</p>
      <button onClick={() => setCount(count + 1)}>Add one</button>
    </div>
  );
}

When I access the route and then save the file I get a vite warning:

3:40:26 PM [vite] warning: 
/project/src/index.tsx
50 |    window.$RefreshReg$ = prevRefreshReg;
51 |    window.$RefreshSig$ = prevRefreshSig;
52 |    import(import.meta.url).then((currentExports) => {
   |           ^
53 |      RefreshRuntime.registerExportsForReactRefresh("/project/src/index.tsx", currentExports);
54 |      import.meta.hot.accept((nextExports) => {
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: /project/src/index.tsx

It still builds and shows my changes, but I'm not sure how to get rid of the warning.. Any ideas are appreciated :)

(please complete the following information):

  • OS: [macos]
  • Browser [safari]
  • Version [16.5]
  • "slinkity": "^1.0.0-canary.0",
  • "@11ty/eleventy": "^2.0.0-canary.25",
  • "@slinkity/react": "^1.0.1",
  • "react": "^17.0.2",
  • "react-dom": "^17.0.2",

Additional context

Enabled react:

eleventyConfig.addPlugin(slinkity.plugin, slinkity.defineConfig({
    renderers: [react()],
  }))