Missing dependency when upgrading to Polaris 5

[mbaumbach]

Issue summary

After upgrading to Polaris 5.0.0, it appears there's a missing dependency to @shopify/browserslist-config. This was tested with Create React App 3.4.1 using the import '@shopify/polaris/dist/styles.css'; form of getting Polaris styles into your project.

Expected behavior

After creating a new Create React App project and adding @shopify/polaris to your dependencies. Creating a basic Polaris app results in an error due to a missing dependency on @shopify/browserslist-config. It's expected that will work without that dependency.

Actual behavior

The following error comes up when starting the application (yarn start):

./node_modules/@shopify/polaris/dist/styles.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/@shopify/polaris/dist/styles.css)
Error: Cannot find module '@shopify/browserslist-config'
Require stack:
- /Users/testuser/Downloads/testing/node_modules/browserslist/node.js
- /Users/testuser/Downloads/testing/node_modules/browserslist/index.js
- /Users/testuser/Downloads/testing/node_modules/postcss-browser-comments/index.cjs.js
- /Users/testuser/Downloads/testing/node_modules/postcss-normalize/index.cjs.js
- /Users/testuser/Downloads/testing/node_modules/react-scripts/config/webpack.config.js
- /Users/testuser/Downloads/testing/node_modules/react-scripts/scripts/start.js
    at Array.reduce (<anonymous>)

If you perform yarn add @shopify/browserslist-config -D, the problem goes away. I'm not sure if this is expected and not documented (or I missed it) or if the dependency should be added as a devDependency/dependency in Polaris itself.

Steps to reproduce the problem

1. yarn create react-app testing
2. cd testing
3. yarn add @shopify/polaris
4. Modify the index.js to match the Reduced test case below
5. yarn start
6. Above error is in the console and in the browser

Reduced test case

import '@shopify/polaris/dist/styles.css';
import React from 'react';
import ReactDOM from 'react-dom';
import enTranslations from '@shopify/polaris/locales/en.json';
import {AppProvider, Button} from '@shopify/polaris';

ReactDOM.render(
  <React.StrictMode>
    <AppProvider i18n={enTranslations}>
      <Button onClick={() => alert('Button clicked!')}>Example button</Button>
    </AppProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 5.0.0
• Browser: Any
• Device: MacBook Pro
• Operating System: macOS High Sierra

[BPScott]

Oof, yeah that's not right. You shouldn't need to add @shopify/browserslist-config to your dependencies. Sorry about that @mbaumbach.

I assumed that key would only have meaning within our own build process and wouldn't be read outside of that. Clearly I was wrong. Fix is easy - we'll revert #3101. I'll try and release a 5.0.1 with that fix and another unrelated issue out by end-of-day tomorrow.

[BPScott]

Just released 5.1.0, That should work now.

[mbaumbach]

@BPScott Confirmed it's working in 5.1.0. Thanks for the quick fix!