Browserify not getting the browser build specifiecd in package.json

[danielstocks]

After upgrading to Styletron 3.x we we're experiencing Browserify build errors related to Styletron.

Background

I'm looking at https://github.com/rtsao/styletron/blob/master/packages/styletron-react/package.json and it has the following lines:

{
  "main": "./dist/index",
  "module": "./dist/index.mjs",
  "browser": {
    "./dist/index.js": "./dist/browser.es5.js",
    "./dist/index.mjs": "./dist/browser.es5.mjs"
},

The reason our build is failing is because we're piping our browserify bundle through uglify for JS minification. But now it won't run anymore because styletron 3.x is giving us non ES5 compatible js when importing it.

Styletron 2.x works fine in our build pipeline becuase importing it give's us ES5/Browser compatible code, that will run through uglify without any errors.

Example code:

const b = browserify()
b.require('styletron-react')
b.bundle().pipe(process.stdout);

Result:

Gives me the contents of node_modules/styletron-react/dist/index.js

Expected:

If i understood Browserify correctly, should I not get node_modules/styletron-react/dist/browser.es5.js ?

[rtsao]

It appears browserify and webpack differ in how they treat the browser field, which means it isn't working with browserify. Working on a fix for this.

[rtsao]

This should be resolved in 3.0.3

[danielstocks]

I can confirm 3.0.3 solves the issue. Thank you @rtsao!