TypeError: _lodash2.default.debounce is not a function

[breeze1990]

It seems something is wrong when using the lodash library
Message when starting the server:
Cannot parse static/src/vue/components/table.vue: TypeError: _lodash2.default.debounce is not a function
It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

and the Vue file is like:

<script>
    import _ from 'lodash';  
    export default {
        methods: {
            someMethod: _.debounce(function () {}),
        }
    }
</script>

The issue looks like #16 but I'm using the latest version and still get the error

[rafaesc]

Hi, @breeze1990

It's because when tries to extract the doc, the parser doesn't read external libraries, always sets it as a function
https://github.com/vue-styleguidist/vue-docgen-api/blob/master/src/utils/getSandbox.js#L72

So, when converted the file to read it, the result will be like this:

<script>
    // import _ from 'lodash';
    var _ = function() {} 

    export default {
        methods: {
            someMethod: _.debounce(function () {}), // Error
            anotherMethod: function() {
              const example = _.debounce(function () {}) // Works!
              // ...
            }
        }
    }
</script>

It's a little limited but the parser it's quickly. You can hack it, with this way

<script>
    import _ from 'lodash';  
    _.debounce = _.debounce || function() {}

    export default {
        methods: {
            someMethod: _.debounce(function () {}),
        }
    }
</script>

UPDATE:
or better

<script>
    import debounce from 'lodash/debounce';  

    export default {
        methods: {
            someMethod: debounce(function () {}),
        }
    }
</script>

Maybe I need to create another strategy to fix it

[breeze1990]

Thank you for the detailed explanation.

[davidhewitt]

I've also run into this problem (when importing functions from d3). It's a little suprising for other readers of the code to introduce this workaround above. Would it perhaps be possible to add an option to the config to disable this mocking for certain imports (maybe described by a list of regexes)?

[rafaesc]

@davidhewitt Yes, but this approach it will change, because it should take props and methods through AST handling (like react-docgen), but it's so complex to develop that it's probable take me a time to release a beta version, but when it will be done, vue-docgen-api will be faster.

[davidhewitt]

No problem, I understand these things take time! Glad to hear this'll be better one day! 😄