Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Merge requests
  • !5005

Prioritize ES5 (main) over ES6 (module) in webpack resolve.mainFields config [build failures are irrelevant]

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/jedwards1211/webpack-mainFields-order into next Sep 13, 2018
  • Overview 6
  • Commits 1
  • Pipelines 0
  • Changes 2

Created by: jedwards1211

Since Webpack by default loads from module instead of main in package.json, any library that publishes both ES5 and ES6 this way will trigger minification errors with create-react-app. But if we change the Webpack config to try main first, libraries that publish both ES5 and ES6 won't have this problem, and create-react-app will still do its best on libraries that only have ES6.

I'm really surprised no one has made this change already. Others have suggested this change yet I thought of it independently, so I would think it's obvious.

Here's how I came upon this, devised my fix and verified that it works:

  1. A user of my material-ui-render-props-styles package, which publishes both ES5 and ES6, reported problems with create-react-app and gave me an example repo: https://github.com/solayao/dizzy_comic_fe
  2. I cloned that repo and installed deps in it, confirmed yarn build has the minification error
  3. Then I ran npm edit react-scripts (I tried linking in my fork, but a few too many things had changed from the version the project was using)
  4. I added mainFields: ['browser', 'main', 'module'] to its webpack.config.prod.js resolve configuration
  5. retried yarn build -- it worked!
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/jedwards1211/webpack-mainFields-order