[🐞] Failed to integrate Qwik + Builder.io with Storybook

[hitmain13]

I'm having trouble integrating Storybook into a project with Qwik + Builder.io. Below I leave the step-by-step for reproducing the Bug.

Issue 1 (storybook dev):

I get the following error when running SB in Dev mode: "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec."

One point I noticed is that the error is due to the initial page to integrate the project into Space in Builder.io. Isolating the .storybook in a separate folder solves the problem.

How to reproduce the error with issue 1

• Create a new Qwik project with Builder integration:

  • npm create qwik@latest
  • In the options, select Qwik with Builder.io integration.
  • Install dependencies by running yarn or npm i
• Install the Storybook:
  • npx storybook@next init
  • After finishing, yarn storybook will run automatically and the error will occur.

Note: The error only happens when Qwik is integrated with Builder. If Storybook is installed without Builder.io, no error occurs and it's possible to run SB normally.

Repositories Qwik repository without Builder.io (Storybook working): https://github.com/hitmain13/qwik-storybook Qwik repository with Builder.io (Storybook not working): https://github.com/hitmain13/builder.io-qwik

Problem 2 (storybook build):

In a scenario different from issue 1, an error occurs in the Preview only after Storybook Build, when running storybook dev it's ok. The following error occurs: GET http://127.0.0.1:8080/modules/sb-preview/runtime.js net::ERR_ABORTED 404 (Not Found) and remains on infinite Preview loading. The curious fact is that ./modules/ does not exist inside the dist folder after the app is built.

How to reproduce the error with issue 2

• git clone https://github.com/hitmain13/builderio-qwik-sb-building-error.git
• Install dependencies by running 'yarn'
• Build the application by running 'yarn build.storybook'
• Start the http-server by running 'yarn serve.storybook'
• Access one of the links, for example: http://127.0.0.1:8080
• The infinite loading error will occur and in the logs will appear the runtime.js error 404.

Repository: https://github.com/hitmain13/builderio-qwik-sb-building-error

Obs.: A workaround that seems like to solve the problem was creating a sh script with cp command to copy all static files from /storybook-static/ to new folder storybook-static/modules/

Both problems I'm reproducing on the same day, using @latest versions that so far are the following versions: "@builder.io/qwik": "^1.2.10", "@builder.io/qwik-city": "^1.2.10", "@builder.io/sdk-qwik": "^0.4.1", "@storybook/addon-essentials": "^7.5.0-alpha.1", "@storybook/addon-interactions": "^7.5.0-alpha.1", "@storybook/addon-links": "^7.5.0-alpha.1", "@storybook/blocks": "^7.5.0-alpha.1", "@storybook/testing-library": "^0.2.0", "eslint-plugin-qwik": "^1.2.10", "eslint-plugin-storybook": "^0.6.13", "react": "^18.2.0", "react-dom": "^18.2.0", "storybook": "^7.5.0-alpha.1", "storybook-framework-qwik": "^0.2.4", "vite": "4.4.7",

[literalpie]

Thank you for the thorough reports! I'll try to take a look at this sometime soon.

[literalpie]

Removing the builderDevTools plugin fixes the issue. It seems like this is likely to be an issue with the builder.io code?

Sorry, I wish I could help more than pointing the blame somewhere else!

Maybe you could make a Vite plugin that checks if both the storybook plugin and the Builder plugin exist, and if it does, delete the builder plugin.

[literalpie]

Maybe this'll help. I think the cause of the problem is that this line is getting added to the iframe in storybook:

'client' is HTML content, but it's trying to get loaded through a module script tag, and causing the error. Somehow, in a normal app ('ppm run dev'), they get it to return the 'client' html instead of the real HTML for your app, but for some reason the storybook iframe is causing it to act differently.

[literalpie]

Is it okay if I close this issue? I don't think it's an issue with my package.