Storybook: ie11 error in 6.0.0-beta.3

[laranhee]

Describe the bug
In 6.0.0-beta.3, ie11 error of manager's bundle code(vendors~main..js) is occuring.

To Reproduce

1. Create project. npx -p @storybook/cli@next sb init --type react
2. Build static app. npx build-storybook
3. Serving app. npx http-server ./storybook-static
4. Go to app in ie11
5. See error

Expected behavior
No error

Screenshots

Code snippets

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 81.0.4044.129
    Firefox: 70.0
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-actions: ^6.0.0-beta.3 => 6.0.0-beta.3
    @storybook/addon-links: ^6.0.0-beta.3 => 6.0.0-beta.3
    @storybook/addons: ^6.0.0-beta.3 => 6.0.0-beta.3
    @storybook/react: ^6.0.0-beta.3 => 6.0.0-beta.3

Additional context

Because I have ie issue that storybook is not working recently, test 6.0.0-beta.3 version which #10644 is included. and see error in ie11.

But, another test that using storybook local package has no error in ie 11.

The test step is

1. Clone storybook. git clone {storybook repo}
2. Checkout tag v6.0.0-beta.3
3. Run yarn and yarn bootstrap.
4. Create new project. node {local storybook repo}/node_modules/.bin/sb init --type react
5. Remove new project's node_modules/@storybook
6. Create symlink. ln -s {local storybook repo}/node_modules/@storybook {new project}/node_modules/@storybook
7. Build static app. npx build-storybook
8. Serving app. npx http-server ./storybook-static
9. Go to app in ie11
10. See no error

[shilman]

Are you saying that the Storybook repo is working in IE11 but the 6.0.0-beta.3 released version is not?

@tooppaaa @ndelangen this looks really strange to me.. can you verify?

[laranhee]

@shilman
Yes, Storybook repo's v6.0.0-beta.3 tagged commit is working in IE11
but npm's 6.0.0-beta.3 released version is not working.

I hope check if the step I tried is correct.

[shilman]

Thanks for confirming. @laranhee

@tooppaaa @ndelangen Maybe the project builds differently on my machine (MacOS) vs. @laranhee 's (Windows)? If that's the problem it would be really, really, really annoying!

[laranhee]

@shilman
My environment is MacOS(include building static app and serving through web server) except for checking IE11 (in vm Windows)

[tooppaaa]

It does make sense actually. If you use the linked storybook repo bootstraped, the dll is working as expected as the path and everything matches.
In our real life, when unfortunately everyone doesn't have the repo on their machines, it has differences that confuses webpack and the dll.

It's still unclear in my head, hope this makes sense?
I'll look at it !

[tooppaaa]

@laranhee could you try to add the following resolution as a workaround
"resolutions": { "semver": "^7.3.2" } ?

[laranhee]

@tooppaaa
Which package.json should I add? I will try.

[fo-fo]

@tooppaaa That change fixed the main issue for me on IE11, now the UI is loading with 6.0.0-beta.3 if I don't have any stories. However, the stories (I'm using TypeScript) are not getting transpiled properly, there are arrow functions left in the transpiled code, such as this:

const Text = () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_storybook_react_demo__WEBPACK_IMPORTED_MODULE_2__["Button"], {
  onClick: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])('clicked'),
  __self: undefined,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 10,
    columnNumber: 27
  }
}, "Hello Button");
Text.displayName = "Text";

I initialized the project with:

yarn create react-app storybook-cra-ie11-test-sb6 --template typescript
cd storybook-cra-ie11-test-sb6
npx -p @storybook/cli@next sb init

Any ideas?

[tooppaaa]

You have to enable ie 11 in the development browserlist
"browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version", "ie 11" ] },

Please note you have to remove node_modules after adding it in the list (that last piece took me a while to find out...) and install them again.

[fo-fo]

@tooppaaa Thanks, that did the trick! (I actually did try to modify browserslist before commenting, but didn't think that reinstalling node_modules from scratch could make a difference...)

[shilman]

@tooppaaa do we need to document "resolutions": { "semver": "^7.3.2" } somewhere? like an IE11 FAQ in the storybook documentation? or is that a temporary workaround?

[tooppaaa]

Yes I think we can but that is a moving fix I guess, any differences between storybook dependencies and user dependencies might require more resolutions to match our versions.
This might be the "effortless but might break" IE 11 solution, on the other hand I'm looking at a --legacy flag to transpile node_modules 🚧
That will be sloooooooow but 100% sure it work.

I can get that documented for you, just let me know where

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.9 containing PR #10725 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.