`TypeError: done is not a function` when using `unstable_island`

[thetarnav]

Trying islands on the new version. But as soon as I try to call unstable_island with a component,

const Counter = unstable_island(() => import('~/components/Counter'));

there is a log in the vite console:

GET http://127.0.0.1:3000/
An unhandler error occured: TypeError: done is not a function

And the server doesn't serve a page in dev.

In build, it gets me with this error:

TypeError: Cannot read properties of undefined (reading 'script')

When I change the code to wrap the component declaration function instead:

const Counter = unstable_island((props) => {
   ...
   return <></>
});

It serves the page in dev, but there is a non-existing asset being requested:

GET http://127.0.0.1:3000/
GET http://127.0.0.1:3000/undefined?import

And on the page the island is not getting hydrated.

Here is a simple repro: https://stackblitz.com/edit/github-l6bqcx?file=src/routes/index.tsx

Latest versions are used:

  "devDependencies": {
    "solid-start-node": "^0.2.5",
    "typescript": "^4.8.4",
    "vite": "^3.2.3"
  },
  "dependencies": {
    "@solidjs/meta": "^0.28.2",
    "@solidjs/router": "^0.5.0",
    "solid-js": "^1.6.1",
    "solid-start": "^0.2.5",
    "undici": "^5.12.0"
  },

[thetarnav]

The transformation looking for the unstable_island keyword didn't account for using ts paths ~ nad single quotes ' in the import. I've changed its code to this and the transform was picking them up, but the TypeError: done is not a function error still occurs...

let replaced = code.replaceAll(
  /(?:const|let|var) ([0-9a-zA-Z_$]+) = unstable_island\(\(\) => import\(["']([^"']+)["']\)\)/g,
  (a, compName, userImport) =>{
    let importPath = userImport[0] === '~'
      ? join(process.cwd(), 'src', userImport.slice(1))
      : join(dirname(id), userImport)
    importPath += ".tsx?island"
    const relativeImportPath = path.relative(process.cwd(), importPath)
    return ssr
      ? `import ${compName}_island from "${userImport}";
          const ${compName} = unstable_island(${compName}_island, "${relativeImportPath}");`
      : `const ${compName} = unstable_island(() => import("${userImport}?island"), "${importPath}")`}
);

[JLarky]

interesting, I'm not using ~ and get the same error. Here's my minimal reproduction https://github.com/JLarky/imverified/commit/50b61bf19d7c1b7c88c1b16a7454f3b3b8586bb1

I have other pages that use islands, but for some reason, this issue only happens for this particular one :)

[KjellConnelly]

Anyone come across a fix for this? I am getting the done is not a function error as well, but only for one component, while 3 others on the same page are working fine.

[ryansolid]

We removed unstable_island for use client for now at least. So I'm closing.. but if you try the latest and hit similar issue please report.