Vue-styleguidist: Using async/await in the examples

Created on 29 Jan 2020  路  4Comments  路  Source: vue-styleguidist/vue-styleguidist

Problem

I want to be able to use async/await in the code examples within the guide, however transpiling doesn't seem to work for those and throws this error message:

- CompileError: Transforming async arrow functions is not implemented. Use `transforms: { asyncAwait: false }` to skip transformation and disable this error. (11:10)

This can easily be reproduced in the demo example: https://vue-styleguidist.github.io/basic/
Screenshot_20200129_093220

Additional information

I'm using @babel/core 7 and I tried setting up the runtime transform plugin. Here is my current webpack config:

{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            sourceType: 'unambiguous',
            plugins: [
                '@babel/plugin-transform-runtime'
            ],
            presets: [
                [
                    '@babel/preset-env',
                    {
                        useBuiltIns: 'usage',
                        corejs: 3,
                        targets: {
                            ie: '11',
                        },
                    },
                ],
            ],
            comments: false,
        },
    },
},

However that configuration still yields the same error message.

Am I running in some configuration issue or is this just not yet supported by the styleguide?

enhancement

Most helpful comment

@RaffaeleCanale , I ran into this issue today as well. I was able to get async calls working by adding a complierConfig section to the styleguide.config.js.

compilerConfig: {
    objectAssign: 'Object.assign',
    transforms: {  
      // make async/await work by default (no transforms)
      asyncAwait: false,  
    },  
  },

All 4 comments

@RaffaeleCanale , I ran into this issue today as well. I was able to get async calls working by adding a complierConfig section to the styleguide.config.js.

compilerConfig: {
    objectAssign: 'Object.assign',
    transforms: {  
      // make async/await work by default (no transforms)
      asyncAwait: false,  
    },  
  },

@oh-yeah Thanks for the quick reply!

Indeed this solution works! However, it does have the drawback that Internet Explorer won't be able to parse that, which is a shame for us as we usually also want to test our components in IE :disappointed:

I would have hoped for a solution that would transpile them.

Buble does not help us there... We might move to babel on the front but it's a heavier and slower compiler.

I will close this request for now so that no-one expect it too soon. If I get a lot of traction, I will make it a priority and reopen the request.

Thank you for your interrest @RaffaeleCanale

Was this page helpful?
0 / 5 - 0 ratings