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.

Sign up for GitHub

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

Jump to bottom

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

Closed
2 tasks done
IgorSzymanski opened this issue Jun 16, 2024 · 1 comment
Closed
2 tasks done

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

IgorSzymanski opened this issue Jun 16, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@IgorSzymanski
Copy link

IgorSzymanski commented Jun 16, 2024 •
edited
Loading

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the 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.
// 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',
        },
      ],
    }),
    ]
  }
});
  1. Start the application.
  2. 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/@[email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/dist/server/renderAsset.jsx:34:23)
    at eval (/project/solid-start-plugin-issue/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/dist/server/StartServer.jsx:67:153)
    at Array.map (<anonymous>)
    at get assets [as assets] (/project/solid-start-plugin-issue/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/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/[email protected]/node_modules/solid-js/web/dist/server.js:569:16)
    at Module.createComponent (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/solid-js/dist/server.js:357:10)
    at get children [as children] (/project/solid-start-plugin-issue/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/dist/server/StartServer.jsx:65:40)
    at eval (/project/solid-start-plugin-issue/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/dist/shared/ErrorBoundary.jsx:41:60)
    at Module.catchError (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:152:12)
    at TopErrorBoundary (/project/solid-start-plugin-issue/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/dist/shared/ErrorBoundary.jsx:41:37)
    at Module.createComponent (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:357:10)
    at get children [as children] (/project/solid-start-plugin-issue/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/dist/server/StartServer.jsx:63:46)
    at NoHydration (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:569:16)
    at Module.createComponent (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:353:15)
    at StartServer (/project/solid-start-plugin-issue/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/dist/server/StartServer.jsx:61:32)
    at Module.createComponent (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/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/@[email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/dist/server/handler.js:78:18)
    at file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:289:34
    at createRoot (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:58:14)
    at Module.renderToStream (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:287:14)
    at eval (/project/solid-start-plugin-issue/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/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/[email protected]/node_modules/h3/dist/index.mjs:1821:16)
    at async _callHandler (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:1821:16)
    at async file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:1962:19
    at async Object.callAsync (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:72:16)
    at async Server.toNodeHandle (file:///project/solid-start-plugin-issue/node_modules/.pnpm/[email protected]/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.

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
@IgorSzymanski IgorSzymanski added the bug Something isn't working label Jun 16, 2024
@IgorSzymanski IgorSzymanski changed the title [Bug?]: Solid Start breaks compatibility with some Vite plugins [Bug?]: Solid Start breaks compatibility with some Vite plugins (appending noscript to body) Jun 16, 2024
@ryansolid
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ryansolid @IgorSzymanski