Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usage in Angular-Cli fails with CommonJS Error #102

Open
flamusdiu opened this issue Nov 2, 2017 · 15 comments · May be fixed by #103
Open

Usage in Angular-Cli fails with CommonJS Error #102

flamusdiu opened this issue Nov 2, 2017 · 15 comments · May be fixed by #103

Comments

@flamusdiu
Copy link

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
Copy link
Author

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
Copy link
Collaborator

doowb commented Nov 2, 2017

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
Copy link
Author

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
Copy link
Collaborator

doowb commented Nov 3, 2017

@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
Copy link
Author

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
Copy link
Author

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
Copy link
Author

flamusdiu commented Nov 4, 2017

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

@flamusdiu
Copy link
Author

flamusdiu commented Nov 5, 2017

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
Copy link
Author

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

@flamusdiu
Copy link
Author

@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
Copy link
Collaborator

doowb commented Nov 5, 2017

@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
Copy link
Author

I'll try this in the morning

@flamusdiu
Copy link
Author

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

@flamusdiu flamusdiu linked a pull request Nov 11, 2017 that will close this issue
@HereChen
Copy link

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
Copy link

ajojra commented Jul 16, 2018

I am facing a similar issue: Stackoverflow

has anyone faced this issue before?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants