search

solidjs / solid-start

SolidStart, the Solid app framework
https://start.solidjs.com
MIT License
4.93k stars 371 forks source link

[Bug?]: Solid Start breaks compatibility with some Vite plugins (appending `noscript` to `body`) #1547

Closed IgorSzymanski closed 1 week ago

IgorSzymanski commented 1 week ago

Duplicates

Latest version

Current behavior 😯

Vite plugins that append <noscript> tag to body prevent Solid Start applications from ever starting.

Expected behavior 🤔

Vite plugins that append <script> and <noscript> tags to <body> should work.

Steps to reproduce 🕹

Steps:

  1. Start a Solid Start project.
  2. Add vite-plugin-radar library to the project.
  3. 
// app.config.ts

import { defineConfig } from '@solidjs/start/config' import { VitePluginRadar } from 'vite-plugin-radar'

export default defineConfig({ vite: { plugins: [ VitePluginRadar({ enableDev: true, gtm: [ { id: 'GTM-AAAAAA', }, ], }), ] } });


4. Start the application.
5. Minimal reproduction repo: https://codesandbox.io/p/github/IgorSzymanski/solid-start-plugin-issue/main?import=true

### Context 🔦

Trying to add Vite plugins that append `noscript` tags to `body` fails with error:

TypeError: assetMap[tag] is not a function at Module.renderAsset (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/server/renderAsset.jsx:34:23) at eval (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/server/StartServer.jsx:67:153) at Array.map () at get assets [as assets] (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/server/StartServer.jsx:67:120) at get children [as children] (/project/solid-start-plugin-issue/src/entry-server.tsx:19:88) at NoHydration (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:569:16) at Module.createComponent (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/dist/server.js:357:10) at document (/project/solid-start-plugin-issue/src/entry-server.tsx:17:127) at Module.createComponent (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/dist/server.js:357:10) at get children [as children] (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/server/StartServer.jsx:65:40) at eval (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/shared/ErrorBoundary.jsx:41:60) at Module.catchError (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/dist/server.js:152:12) at TopErrorBoundary (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/shared/ErrorBoundary.jsx:41:37) at Module.createComponent (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/dist/server.js:357:10) at get children [as children] (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/server/StartServer.jsx:63:46) at NoHydration (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:569:16) at Module.createComponent (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/dist/server.js:353:15) at StartServer (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/server/StartServer.jsx:61:32) at Module.createComponent (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/dist/server.js:353:15) at eval (/project/solid-start-plugin-issue/src/entry-server.tsx:16:96) at eval (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/server/handler.js:78:18) at file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:289:34 at createRoot (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/dist/server.js:58:14) at Module.renderToStream (file:///project/solid-start-plugin-issue/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:287:14) at eval (/project/solid-start-plugin-issue/node_modules/.pnpm/@solidjs+start@1.0.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.3.1/node_modules/@solidjs/start/dist/server/handler.js:76:46) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async _callHandler (file:///project/solid-start-plugin-issue/node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:1821:16) at async _callHandler (file:///project/solid-start-plugin-issue/node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:1821:16) at async file:///project/solid-start-plugin-issue/node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:1962:19 at async Object.callAsync (file:///project/solid-start-plugin-issue/node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:72:16) at async Server.toNodeHandle (file:///project/solid-start-plugin-issue/node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:2249:7)


The error is caused when a plugin returns a `<noscript>` tag in the `transformIndexHtml()` function, because the `assetMap` object does not have the `noscript` key defined.
```ts
interface HtmlTagDescriptor {
    tag: string;
    attrs?: Record<string, string | boolean | undefined>;
    children?: string | HtmlTagDescriptor[];
    /**
     * default: 'head-prepend'
     */
    injectTo?: 'head' | 'body' | 'head-prepend' | 'body-prepend';
}

Example:

{
      tag: "noscript",
      injectTo: "body-prepend",
      children: `<iframe src="${property.nsBase}?id=${property.id}${environmentAttachment}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`
    }

On top of that, Solid Start doesn't respect the injectTo parameter and injects every tag into the header tag.

Your environment 🌎

No response

ryansolid commented 1 week ago

Yeah.. I can add noscript to the asset list but I admit I don't know what downstream consequences that might have. Mostly that depending where it ends up it might try to client render it. Honestly I didn't know these were being fed through Solid's rendering and not just applied to the output HTML. But I guess it makes sense given that we generate this template each run at runtime. Which maybe explains why injectTo doesn't work, because if we just end up with a list of assets we gave the developer the ability to place them in the JSX and use that placement to insert them. It is interesting choice, maybe @nksaraf knows more about that.