Storybook: Build Storybook iframe.html Failed to load resource

[s-ong-c]

Hi,

When build storybook is executed, output is executed or distributed.
However, it failed to load resoure despite the bundle file in iframe.html.
Of course, you can change the path to absolute path directly in iframe.html, but do you have to do this every time?

Version
"@storybook/addon-docs": "^5.3.19",
"@storybook/cli": "^5.3.19",

To Reproduce
Steps to reproduce the behavior:

1. build storybook
2. output storybook-static
3. load to index.html
4. See error

Screenshots
If applicable, add screenshots to help explain your problem.

The path is wrong, as in the code below.

[hyochan]

We had this issue so I've managed to fix this by running shell script in postbuild step in PR.

[ndelangen]

Do you have an example?

When I build storybook, and host it: npx http-server ./static-storybook it works!

We can't hard-code an absolute url, because some people host static-storybook in a sub-directory.

[s-ong-c]

@ndelangen Thanks for the response,
code is in the repository below.
https://github.com/dooboolab/dooboo-ui/tree/master/doc
We deploy gh-page branch after build.

[ndelangen]

So you change:

<script src="runtime~app.1491145c4d6866f9125d.bundle.js"></script>

into:

<script src="/runtime~app.1491145c4d6866f9125d.bundle.js"></script>

Why are your assets and html pages not in the same directory when deploying?

Why would this 'hack' not be needed for index.html, but it is for iframe.html?

[s-ong-c]

package.json script

yarn build

build result

incorrect

<script src="/runtime~app.1491145c4d6866f9125d.bundle.js"></script>

When I create a build storybook

Deploy the files in the storybook-static folder to git-pages.

The build result index.html, iframe.html and iframe.html are created. When I open the iframe.html file, the output of the bundle.js file is incorrect and it outputs

[ndelangen]

@s-ong-c I'm having difficulty understanding what you mean.

Can you tell me if this statement is correct?
https://github.com/storybookjs/storybook/issues/11694#issuecomment-664975697

When I look at https://dooboolab.github.io/dooboo-ui/iframe.html

I observe:

So are you removing the / slashes rather then adding them?

[s-ong-c]

@ndelangen
Sorry for not giving a good explanation

first
in the doc directory

build

build result static-storybook directory

The src path in Iframe.html is wrong as below.

but The src path in index.html is correct as below.

So are you removing the / slashes rather then adding them? YES

But should I do this every time??

[ndelangen]

That does sound like a bug..

Would you be open to trying the 6.0.0 RC? I think it's fixed in that. If you really need a patch on 5.x, could you assist?
We could schedule a meeting so I could help you get setup:
https://calendly.com/ndelangen/storybook

[shilman]

Try upgrading to 6.0 RC?

npx sb@next upgrade --prerelease

[s-ong-c]

Try upgrading to 6.0 RC?

npx sb@next upgrade --prerelease

I tried to upgrade, but the same error
so https://calendly.com/ndelangen/storybook schedule a meeting was booked.

[Marklb]

Not sure what the fix would be, since I don't know anything about Expo, but I took a look and see what is happening, if that hadn't been found. Not sure if the problem was just about a fix or why it is happening, because the cause seems intentional, for some reason that may make sense if you know about expo.

The withUnimodules function that is wrapping the config in .storybook/webpack.config.js makes sure webpackConfig.output.publicPath resolves from the root. Seems like a strict assumption, but since I don't know anything about Expo, maybe it makes sense for those projects.

Only affects iframe.html, because index.html is built from Storybook's manager webpack-config, but Storybook's preview webpack-config scripts use .storybook/webpack.config.js, not manager.

Instead of a postbuild shell script, I did the following, to reset output.publicPath back to '':

// .storybook/webpack.config.js
...

module.exports = ({ config, mode }) => {
  ...

  const wUni = withUnimodules(config, {
    projectRoot: resolve(__dirname, '../'),
    // babel: {
    //   dangerouslyAddModulePathsToTranspile: [
    //     // Ensure that all packages starting with @evanbacon are transpiled.
    //     'dooboo-ui',
    //   ],
    // },
  });
  wUni.output.publicPath = ''
  return wUni
};

Following withUnimodules source for anything that would affect output.publicPath lead to https://github.com/expo/expo-cli/blob/ca0c33e353887da7593a8ce4fa7ad5ef654845b6/packages/webpack-config/src/env/paths.ts#L156, which describes what its doing.

[s-ong-c]

Not sure what the fix would be, since I don't know anything about Expo, but I took a look and see what is happening, if that hadn't been found. Not sure if the problem was just about a fix or why it is happening, because the cause seems intentional, for some reason that may make sense if you know about expo.

The withUnimodules function that is wrapping the config in .storybook/webpack.config.js makes sure webpackConfig.output.publicPath resolves from the root. Seems like a strict assumption, but since I don't know anything about Expo, maybe it makes sense for those projects.

Only affects iframe.html, because index.html is built from Storybook's manager webpack-config, but Storybook's preview webpack-config scripts use .storybook/webpack.config.js, not manager.

Instead of a postbuild shell script, I did the following, to reset output.publicPath back to '':

// .storybook/webpack.config.js
...

module.exports = ({ config, mode }) => {
  ...

  const wUni = withUnimodules(config, {
    projectRoot: resolve(__dirname, '../'),
    // babel: {
    //   dangerouslyAddModulePathsToTranspile: [
    //     // Ensure that all packages starting with @evanbacon are transpiled.
    //     'dooboo-ui',
    //   ],
    // },
  });
  wUni.output.publicPath = ''
  return wUni
};

Following withUnimodules source for anything that would affect output.publicPath lead to https://github.com/expo/expo-cli/blob/ca0c33e353887da7593a8ce4fa7ad5ef654845b6/packages/webpack-config/src/env/paths.ts#L156, which describes what its doing.

I saw you late. You're right. Thank you very much.