type="module" removed from <script> tag

[ManuelFeller]

Describe the bug
After upgrading from Storybook 5.2.6 to 5.3.13 I have recognized something that looks like an "over-optimization" when you run the storybook-build (compared to just running it locally).
In case you have a preview-head.html with custom script tags containing a module to load (<script type="module" src="...">) it is not touched when you just run it locally, but the type="module" is removed when you build your storybook.

To Reproduce
Steps to reproduce the behavior:

1. Add a preview-head.html to your .storybook directory and add a script reference to a es-module there (<script type="module" src="/path/to/module.esm.js"></script><script nomodule src="/path/to/plain.js"></script>)
2. Execute npm run build-storybook
3. Open the iframe.html in the output directory in a text editor
4. See that the type="module" was removed from the script tag

Expected behavior
The type="module" inside a script tag should not be removed when you run the storybook-build, the behaviour should be same as when you just run it (not touching the content of <script> tags in the preview-head.html)

Screenshots
Left side shows the compiled result after building, right side shows what is served when you just run storybook

Code snippets
The only customization in the webpack config is using the copy plugin:

.storybook/webpack.config.js:
const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = async ({ config, mode }) => { config.plugins.push( new CopyWebpackPlugin([ { from: components, to: 'components' } ]) ); return config; };

.storybook/config.js:
import { addDecorator, addParameters, configure } from '@storybook/html'; import bixTheme from './bixTheme'; import centered from '@storybook/addon-centered/html'; addParameters({ options: { theme: bixTheme, storySort: (a, b) => a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }), }, backgrounds: [ { name: 'Light', value: '#ddd', default: true }, { name: 'Dark', value: '#333' }, ], }); addDecorator(centered); configure(require.context('../src', true, /\.stories\.js$/), module);

System:
Environment Info:

System:
OS: macOS 10.15.3
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Binaries:
Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.6 - ~/.nvm/versions/node/v10.15.1/bin/npm
Browsers:
Chrome: 79.0.3945.130
Firefox: 72.0.1
Safari: 13.0.5
npmPackages:
@storybook/addon-actions: ^5.3.13 => 5.3.13
@storybook/addon-backgrounds: ^5.3.13 => 5.3.13
@storybook/addon-centered: ^5.3.13 => 5.3.13
@storybook/addon-knobs: ^5.3.13 => 5.3.13
@storybook/addon-links: ^5.3.13 => 5.3.13
@storybook/addon-notes: ^5.3.13 => 5.3.13
@storybook/html: ^5.3.13 => 5.3.13
@storybook/theming: ^5.3.13 => 5.3.13

(Edit note: found the affected file directly, removed not required steps to reproduce)

[dgonzalezr]

I'm facing exactly the same issue, after upgrading from v5.3.3 to v5.3.13 🤔

[shilman]

@dgonzalezr any chance you can do a bisection to narrow down which version introduced the problem?

[dgonzalezr]

It is what I'm doing right now @shilman 😉

[dgonzalezr]

@shilman actually last version working for me is v.5.3.3 🤔

[diondree]

I'm also facing the same issue as well using the same version.

[shilman]

@dgonzalezr @diondree Can double check the version where it broke? AFAICT there's nothing in 5.3.4 that could have caused this:

v5.3.3...v5.3.4

[diondree]

@shilman from what I'm seeing it appeared to have happened somewhere between v5.3.7 and v5.3.13.

[diondree]

Actually from further investigation its possible it may have been between 5.3.12 and 5.3.13

[shilman]

If it's due to a change in 5.3.13, then it's from this PR: https://github.com/storybookjs/storybook/pull/9759/files

@ndelangen can you investigate?

[ndelangen]

I'm not confident at all that that PR caused this, I'd love to know exactly which released caused this so I can dive in with certainty.

[splitinfinities]

Edit: added the temp fix from Esri/calcite-app-components#835 (thank you!!) so I updated the deployment url

I'm getting the same issue when building this repo: https://github.com/splitinfinities/Stellar/tree/beta.

View the source here, but this is the result of the build. https://midwest-mt8lcxpj5.now.sh/iframe.html?id=ui-accordion--default

The type attribute is totally removed... I want to help find out where this is, I think it's in some HTML minimizing package that must be happening in webpack. I downgraded storybook to 5.3.3 like what everyone mentions above, and it still compiles storybook-static/iframe.html to remove the type="module" attribute, so I don't think it's something in the versioning.

[darondel-yoobic]

We have the same issue in our project:

• Using the 5.3.12 version or below worked fine for us.
• Upgrading to 5.3.13 failed at first. We used to update Storybook dependencies all at once (npm i -D @storybook/html@latest @storybook/addons@latest ...). Then we figured out that updating them one by one made the build work. Very weird, I guess there is something wrong with one of your own dependencies.
• Upgrading to 5.3.14 just failed, whatever the update process (all at once or one by one).

[ndelangen]

on which script tag would you expect a module type? on the bundles generated by webpack?

on https://midwest-mt8lcxpj5.now.sh/iframe.html?id=ui-accordion--default I'm only seeing 3 script tags, all 3 are the files generated by webpack.

First issue seemed to suggest it was additional script tags?

[darondel-yoobic]

Yes, the issue concerns additional scripts set in preview-head.html. We have the same thing.

[ndelangen]

Ok, I'll investigate

[diondree]

I've also been trying to go back to a previous version to see if one worked but no such luck which does lead me to also believe the issue is from one of your dependencies.

[mbulfair]

My guess would be https://github.com/jantimon/html-webpack-plugin#minification the minify is being set to true if the mode is production which defaults to:

{
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true
}

removeScriptTypeAttributes: true, is probably it.

Can we change this value through custom webpack config in anyway?

[darondel-yoobic]

Nice catch!

Using html-minifier-terser 5.0.2, type="module" is still there.
Using the 5.0.3+ version, type="module" is removed though minification.

I bet this PR causes the issue. module type is now part of the removeScriptTypeAttributes option, don't know if it's intended though.

[darondel-yoobic]

Looking at this issue, it seems intended.

[diondree]

Nice catch!

Using html-minifier-terser 5.0.2, type="module" is still there.
Using the 5.0.3+ version, type="module" is removed though minification.

I bet this PR causes the issue. module type is now part of the removeScriptTypeAttributes option, don't know if it's intended though.

I can also confirm that it works on that version.

Not exactly what the real workaround should be but a temp fix would be to install html-minifier-terser as a dev dependency and lock it to version 5.0.2.

[ndelangen]

If this is something that can be configured on the plugin, I'd be very grateful if someone would open a PR changing this option off.

[diondree]

I'd be willing to do that.

I'm guessing this would be the configuration to look at for the issue in question?
https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/preview/iframe-webpack.config.js#L89

[ndelangen]

Yes, indeed.

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.21 containing PR #10042 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.15 containing PR #10042 that references this issue. Upgrade today to try it out!