Usage in Angular-Cli fails with CommonJS Error

[flamusdiu]

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

[flamusdiu]

Umm, I would have to use doowb/unlazy-loader to get this to work; however, Angular CLI doesn't seem to provided anyway to inject the plugin that I have found without configuring the whole webpack stack myself.

[doowb]

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.

[flamusdiu]

Yeah, you can run ng eject but that makes the webpack config static and you lose the cli stuff. Thanks for the response. You can see more from angular/angular-cli#1665

[doowb]

@flamusdiu I don't know much about angular-cli but it looks like from the issue they're not going to allow customizing webpack configs.

I don't have the time right now, but if someone else wants to do a PR, we could browserify the source into a distributable file and set the browser property in package.json to point to that file. I'm pretty sure webpack supports the browser property now, so that should work for angular-cli builds too.

[flamusdiu]

webpack does but not sure if angular-cli will use it. You would need to set it the angular-cli file. I guess I'll need to look at how to do that.

[flamusdiu]

I forked it and did a quick fix for the moment: flamusdiu/markdown-toc

Also, you have to use gray-matter-webpack-build as well as change the require statements. Not sure if there is a good way to change the dependencies when installing.

[flamusdiu]

Hell, I hit the same problem as markdown-toc#82

[flamusdiu]

Okay, so #82 is caused because angular-cli uses webpack which uses outdated version of querystring-es3. When webpack compiles, it uses this resolution which does not have the .escape function.

[flamusdiu]

Oooo ... Should get fixed with this -> webpack/node-libs-browser#70

[flamusdiu]

@doowd if you don't want to wait, could use the solution in the comment mhart/aws4#46 (comment) changing the function. It might more limited by, though.

[doowb]

@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.

[flamusdiu]

I'll try this in the morning

[flamusdiu]

@doowb I am still getting querystring.escape is not a function. You can check my branch here: https://github.com/flamusdiu/markdown-toc/tree/try-changes-1

I'll look at it again when I get off work.

[HereChen]

I have the same problem in a vue-cli project (webpack).

import markdownToc from 'markdown-toc';
...
markdownToc.Insert(markdown);
...

 warning  in ./~/markdown-toc/lib/utils.js

8:34-41 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[ajojra]

I am facing a similar issue: Stackoverflow

has anyone faced this issue before?