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

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.

webpack@3.10.0

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 21 (10 by maintainers)

Commits related to this issue

Fix: Up Buble version to 0.19.2 (#815) Fixes #807 Related #798 #764 — committed to styleguidist/react-styleguidist by lgordey 6 years ago

Most upvoted comments

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

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"
  ]

testower on Oct 17, 2018

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

sapegin on Mar 28, 2018

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',
      },
    ],
  },
},

yurist38 on Jan 14, 2018

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.

sapegin on Jan 2, 2018

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

adrianheine on Feb 5, 2018