React-styleguidist: Update to v6.1.0 has caused IE11 to no longer work.

[rluiten]

When something isn’t working, include:

• Your style guide config (styleguide.config.js).

const path = require('path');

module.exports = {
  title: 'MFL React Components',
  components: 'src/components/**/*.tsx',
  skipComponentsWithoutExample: true,
  ignore: [],
  require: [
    path.resolve(__dirname, './styleguide/setup.js'),
    path.join(__dirname, './node_modules/enhanced-theme/enhanced/mfl.scss'),
    path.join(__dirname, './src/main.scss')
  ],
  styleguideComponents: {
    Wrapper: path.join(__dirname, './styleguide/Wrapper')
  },
  assetsDir: 'Content'
};

• Webpack version.

[email protected]

• Operating system, browser and version if it’s a layout bug.

Windows 10 64 bit, IE11 only. (chrome, firefox, edge are ok).

The totally unmodified styleguidist example https://github.com/styleguidist/example produces same problem in IE11 locally.

There error recieved in IE11 is.

SCRIPT1002: Syntax Error
main.bundle.js (50619,39)

A screen capture of what is at the location in main.bundle.js follows.

Reverting to styleguidist 6.0.33 allows the example to work.

[rluiten]

Just realised might be the fat arrow function!.

[sapegin]

Yeah, most likely it’s an arrow function or a const. Do you know where this code is coming from?

[rluiten]

Is there anything specific I can do ?
I can provide a compressed version of the bundle it is a bit over 450 KB compressed and about 2.6 MB uncompressed. I've snooped around in it to see if i can figure out what module it is it might be buble.

[rluiten]

By the way the actual code i posted above is from the example app not from my application.

[sapegin]

It’s from acorn5-object-spread which is a dependency of buble. From our side we can only file and issue there and ask what browsers they support.

[Andarist]

@sapegin it's not only a dep of buble but a buble itself too, it doesnt transpile i.e. classes. I've filed an issue there to see what they target with the buble's codebase.

We could incorporate a test to see if the parts of the bundle generated by react-styleguidist are valid es5 - it's actually quite easy, because we'd have to check if the bundle can be minified using uglifyjs@2, which doesn't support any es6+ syntax. WDYT? Im willing to work on this, as supporting older browsers is crucial for us.

We can also temporarily fix this upstream in the react-styleguidist itself by transpiling buble on our own.

[sapegin]

That sounds great!

[Andarist]

Could you describe your test approach in a little bit detail? Im interested mostly in what is in test directory, cannot find how some of the files there are used - i.e. run.build.js.

[sapegin]

These two files, run.*.js aren’t really test cases, more like examples of API usage.

• jestsetup.js to setup Jest (see package.json)
• raf-polyfill.js— requestAnimationFrame polyfill for Node.js. I think we should use raf module instead, it’s already in dependencies but not used.  
• browser.js is used to test bundles in Headless Chrome (see test:browser:* npm scripts)

Other files in test folder are test data.

[yurist38]

Just solved this issue in my project. I set up buble to be transpiled by babel-loader which contains es2015 preset. This is the part of my styleguide.config.js file:

webpackConfig: {
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules\/(?!buble)/,
        use: 'babel-loader',
      },
    ],
  },
},

[iamtyce]

Just checking in on this issue. Was 6.2.0 meant to resolve this? I'm still having errors in IE11.

[sapegin]

@iamtyce Nope, it shouldn’t ;-(

[iamtyce]

@sapegin Just re-read your comment above about acorn5. Understood, thanks!

[sapegin]

As soon as someone submit a pull request. We don’t support (means test) IE11 officially but happy to merge fixes.

[jbovenschen]

Asked it in an existing PR, https://github.com/adrianheine/acorn5-object-spread/pull/1 They decided to close it because acorn already support it out of the box, so we should be able to fix it with just updating buble, but today I saw there was a PR merged for downgrading the buble version because of some html entity encoding issues, would it be ok, if I try to get it working with a newer version of buble?

[sapegin]

@jbachhardie Sure, if you can make sure that both issues are fixed.

[adrianheine]

I just fixed #798 (I think) in bublé, so upgrading to master should work. I'd like to do a release soon, too.

[iamtyce]

@yurist38 We followed suit with what you did to regain testing in IE11 capability but found it drastically slowed our webpack builds. Do you have the same problem?

[yurist38]

@iamtyce I didn't measure it but I do not remember any visible changes in a build process.

[sapegin]

I think it should be fixed now after the Buble update. Feel free to reopen if you still have this issue.

[testower]

I'm unable to view styleguidist in IE11. Any pointers? The workaround here doesn't work for me either: https://github.com/styleguidist/react-styleguidist/issues/764#issuecomment-357543200

Possibly related? https://github.com/Rich-Harris/buble/pull/154

UPDATE:

Styleguidist itself was not the problem, rather it was my own components which were not transpiled appropriately for IE11. Solution, make sure to use @babel/present-env along with a browserslist that includes IE11:

webpack config:

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { presets: ['@babel/react', '@babel/preset-env'] }
      },

package.json (example):

  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 10",
    "not op_mini all"
  ]