Skip to content
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

create-react-app not working with IE11 in development mode #3034

Closed
dcp12345678 opened this issue Aug 30, 2017 · 14 comments
Closed

create-react-app not working with IE11 in development mode #3034

dcp12345678 opened this issue Aug 30, 2017 · 14 comments

Comments

@dcp12345678
Copy link

Is this a bug report?

yes

Can you also reproduce the problem with npm 4.x?

Unknown

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

  1. node -v:
    v6.11.2

  2. npm -v:
    3.10.10

  3. yarn --version (if you use Yarn):
    N/A

  4. npm ls react-scripts (if you haven’t ejected):
    react-scripts@1.0.12

Then, specify:

  1. Operating system:
    Windows 7
  2. Browser and version (if relevant):
    IE 11

Steps to Reproduce

(Write your steps here:)
I am on Windows 7, so these instructions reflect that environment.

  1. create-react-app my-app
  2. cd my-app
  3. npm start
  4. In IE11, navigate to http://localhost:3000
  5. Press F12
  6. Press F5
  7. You will see an error about Object.assign not being defined.

Expected Behavior

(Write what you thought would happen.)

I expect not to get an error.

Actual Behavior

Got the error about Object.assign

(Write what happened. Please add screenshots!)
image

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

@gaearon
Copy link
Contributor

gaearon commented Aug 31, 2017

Hmm. Would it make sense if we ran the polyfills first? I guess there's some minor chance they could throw, but not sure if that's a good tradeoff.

@dcp12345678
Copy link
Author

One can manually add <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script> to the index.html and that seems to fix the issue, but lit seems like this step shouldn't be necessary.

@Timer
Copy link
Contributor

Timer commented Aug 31, 2017

@dcp12345678 it's only necessary for development; the application should work fine when built for production.

I believe the polyfills should be first in our entry point (or at least before the overlay), what edge cases are you talking about, @gaearon?

@gaearon
Copy link
Contributor

gaearon commented Aug 31, 2017

I guess let's just fix the code to use object spread? Babel will use its own helper for this.
Happy to take a PR fixing it.

@gaearon gaearon changed the title create-react-app not working with IE11 create-react-app not working with IE11 in development mode Aug 31, 2017
@tharakawj
Copy link
Contributor

I'll send a PR.

@tharakawj
Copy link
Contributor

Apparently, we are already using object spread and Babel transform it to Object.assign.
https://github.com/facebookincubator/create-react-app/blob/v1.0.12/packages/react-error-overlay/src/components/CodeBlock.js#L24-L27

Can you think of any other workaround without changing execution order?

@tharakawj
Copy link
Contributor

It seems we need to disable useBuiltIns option to use Babel’s extends. https://github.com/facebookincubator/create-react-app/blob/master/packages/babel-preset-react-app/index.js#L20

will it be a good workaround?

@gaearon
Copy link
Contributor

gaearon commented Sep 1, 2017

Oh I see. Well, let's just depend on object-assign in that module and import it explicitly with import assign from 'object-assign'.

@gaearon
Copy link
Contributor

gaearon commented Sep 2, 2017

This should be fixed in 1.0.13. Please verify.

https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.13

@dcp12345678
Copy link
Author

I just verified it and the fix works great. Thanks so much @tharakawj and @Gearon!

@taviroquai
Copy link

Hi, I'm facing this issue and I'm not sure If my version includes this fix.

I saw pointing out to v1.0.13 but when I do npm list -g, I get:

create-react-app@1.4.1

The only way I can overcome this, is by adding the script tag in the index.html pointing to the cdn service - which I really don't like this solution.

I tried importing 'core-js/es6' in the top of my index.js but when running, it stills complains about Object.assign() in the react-error-overlay/CodeBlock.js

Any hints are helpfull. Thanks.

@gaearon
Copy link
Contributor

gaearon commented Oct 31, 2017

As explained in the beginning of the user guide (which you should also see as README in the generated project), the version of create-react-app itself almost never matters.

The version that matters is the react-scripts version in your package.json. When we fix something, we release a react-scripts update, and you can use it by following the instructions I linked above.

I hope this helps!

@taviroquai
Copy link

@gaearon thank you I was using 1.0.12. I just updated my package.json and installed 1.0.13, so part of my problem is solved, still can't render in IE11.

@gaearon
Copy link
Contributor

gaearon commented Nov 1, 2017

Can you please update to the latest version (1.0.16)?
If you still have problems please file a new issue with a description, screenshot, etc.

Thanks!

@facebook facebook locked and limited conversation to collaborators Nov 1, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants