markdown-toc: Usage in Angular-Cli fails with CommonJS Error

I have following function:

createToc(doc) {
  const options = {}
   const toc = require('markdown-toc');     
        return Promise.resolve().then(() => {
            return new Remarkable()
                .use(toc.plugin(options))
                .render(doc);
        });
}

When building the application, I get the following message:

WARNING in ./node_modules/markdown-toc/lib/utils.js
8:34-41 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

From webpack/webpack#2675, I guess the issue might be here: utils.js#L26

About this issue

Most upvoted comments

@flamusdiu thanks for digging in more and looking for a solution.

On your fork, if you try some of the following things that end up working with angular-cli, I’ll review and consider a PR:

  • Instead of using gray-matter-webpack-build, try upgrading gray-matter to the latest version. There were some changes made because of webpack there.
  • In the markdown-toc package.json, add querystring-es3 as a dependency and add the following property:
    "browser": {
      "querystring": "querystring-es3"
    },
    

Along with your changes to require in the utils directly, I think these would make working with webpack and angular-cli easier.

I meant to mention the unlazy loader earlier… I didn’t know it was hard to add webpack loaders to angular-cli.

I’ll look into this a little more later today.