-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
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.
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
Not working in IE11 for new create-react-app project #12179
Comments
|
Hi @shilman I had a go at that package, wasn't able to get it to work. That being said, the issue is to to with transplantation which I wouldnt imagine would be effected by the http server. Could you follow my steps above and try your server OR see if it works on your system? Potentially this could be an environment issue caused by macos vs windows |
A class is causing issues
It's working on https://next--storybookjs.netlify.app/official-storybook/ |
Hi all! Have same issue with CRA project on differents PC with Windows 10 system. |
I'm too confirm the presence of a bug. CRA project with default settings and Storybook 6 doesn't work in IE11 (( |
I've just tested CRA with @homenkovit workaround and I can confirm it worked. Unfortunately the closed source project I am working on which was a while ago based on CRA (then was ejected) is still having issues. What was the mentality behind your changes @homenkovit ? perhapse I can re-work those thoughts into my fix? Also the issue I am getting is still transpilation, arrow function in this case |
@fgfmichael Just tested different project configurations... Don't know the reason why preset-create-react-app crushed IE unfortunately. |
cc @mrmckeb. I'll investigate a bit |
Given our application isnt doing anything all that complicated I might see if I can get a drop in replacement for latest webpack up and running, would be good to remove complexity from our project + might fix this |
It's not working for me either. Seems to me that there something wrong with the babel configuration, due to errors in both IE11 and in edge (version 42). |
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
@TerrySlack What happens if you upgrade to 6.1?
|
@shilman Actually, I managed to track down the issue earlier today. The acorn-jsx module used by one of the storybook addons is not transpiled to ES5. Specifically acorn-jsx. I found this in one of the people who responded in another thread. Adding it to the custom config we have for storybook solved the problem.
|
Here's a proposal: storybookjs/presets#176 The original issue is due to preset-create-react-app that removes defaults es6 transpilers to transpile again such dependencies. |
@TerrySlack Are you using custom webpack / babel ? The point of this preset is to enable that kind of feature for users that completely opt out webpack / babel defaults but want to keep IE 11 working |
The issue - as I understand it - is that Storybook doesn't work in IE11 with the CRA preset, and this would allow users to force that to work. I think extracting the IE11 support out of Storybook's core makes sense - and gives us a way to soft-deprecate IE11. As we move into 2021, supporting IE11 seems like something we shouldn't be investing time into. Microsoft will stop supporting IE11 for Teams this month, and many other enterprise products dropped support some time ago. I understand this will impact people that use Storybook for testing, which is why we can't drop it completely today. |
@tooppaaa yes, we are using custom webpack/babel. Out of the box, Storybook did not work in IE 11. With the rule in my comment above, it now works. |
It make sense then because with the default webpack config from storybook, we transpile these dependencies again. The preset should solve such use case |
@tooppaaa For sure, for cra applications. But why not just bake it into storybook, something like your preset or the one I use above? Wouldn't that solve the issue with using either custom webpack/babel build or an app created with the cra cli? |
We already have such mechanisms in storybook. The preset objectives are very well described by @mrmckeb, it's not only to fix this issue but also to prepare storybook to drop IE 11. |
Interesting. I thought the custom webpack config was merged with Storybooks wepback. I say this in seeing all of the IE 11 stuff added when doing a build. Before I put in the tweak mentioned above. |
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
@fgfmichael, https://www.npmjs.com/package/@storybook/preset-ie11 has been released a few days ago and should resolve the IE 11 compat of storybook + CRA. |
@tooppaaa I will need to make time to go back over my repo steps to test if it now works in a blank CRA app, however when I added the preset on my primary application I work on I am now getting the following build error during the WebPack phase (also note this is an ejected app)
My guess would be that the detected webpack file is including babel presets and given I made this ticket about CRA maybe this wasn't considered? Here are the start-storybook output for more info on how it bootstraps:
Cheers! |
@tooppaaa Got the same error using the I've created an issue in the storybookjs/presets respository: |
I am having exact same issue. I did try npmjs.com/package/@storybook/preset-ie11 and have the polyfill but still. Did anyone find the solution? |
In the recently released versions I tried |
@tooppaaa Can you add this to the list? Maybe the new color controls did it |
Please note that you need to disable fastRefresh. A IE 11 fix will be released as part of version 0.5.0 I guess pmmmwh/react-refresh-webpack-plugin#298 |
This seems to have popped up again. As with the original issue, if you create a CRA Storybook with the official guide https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/ And install @storybook/addon-ie11 and @storybook/preset-ie11 In IE11 I see a white screen with an error in the console: Error comes back to this reactrouter method: Specifically this line:
I see the same error regardless of whether or not I use the IE11 addon and preset |
We're no longer supporting IE11 in storybook 7.0 beta |
Describe the bug
Cannot run StoryBook for a create-react-app project in Storybook on IE11
To Reproduce
npx create-react-app storybook-ie-issue
cd storybook-ie-issue
npx sb init
yarn build
yarn build-storybook
npx serve -s build -p 4443
http://localhost:4443
on IE11, functional web app (no errors in console) logo doesnt spin but still it has mounted which indicates successful transpilationserve ./storybook-static -p 3322
http://localhost:3322
on chrome: Fully functionalhttp://localhost:3322
on IE11: error in console loghttp://localhost:3322/vendors~main.81b7bcd9b5e616814051.bundle.js has an error because it contains un-transpiled ES6 code (class)
http://localhost:3322/main.81b7bcd9b5e616814051.bundle.js has an error because it contaqins un-transpiled ES6 code (spread)
Expected behavior
I expect that a CRA based project should just work on IE11. I have ran the build instead of the HMR based dev version of storybook as I understand that allot of dev tools just dont work nice on IE11, the build option SHOULD however work.
I've ran
--debug-webpack
on this build step and looked over the webpack config file, it appears that it IS running in production mode and not development (which it runs on when we are using the dev storybook)Screenshots
![image](https://user-images.githubusercontent.com/51187666/90857597-0e7fd380-e3b7-11ea-8197-a29e9674bdee.png)
Code snippets
If applicable, add code samples to help explain your problem.
System:
Additional context
Ran into the issue originally on a closed source project I am working on, I've spent a fair amount of time attempting to get babelrc setup to transpile and I've been unable to convince it, however that is where I believe the issue will be, perhaps the babelrc config file isn't getting the news that we are doing a prod build and to support IE11?
The text was updated successfully, but these errors were encountered: