How to solve module.id should be a string error using webpack2

Question

So I'm using webpack2 on a Angular2 project that has several external dependecies. Some of these dependencies are using commonjs and are declaring components like below:

@Component({
    moduleId: module.id,
    templateUrl: 'mycomponent.html'
    ...
})

This causes the error below:

Error: moduleId should be a string in "MyComponent"

After some research, I figure out this is due to Webpack expecting components to have id as a number while Angular declares it as string. I cannot change the dependency code. What can I do to live with this kind of dependency?

Thanks!

score 4 · Accepted Answer · edited Jan 22 '19 at 18:03

4

So here's what I came up to live with that dependency for now. Use string replace loader to remove that line for me:

{
    test: /.*node_modules\/my-dependency-folder\/.*\.js/,
    loader: 'string-replace-loader',
    query: {
        search: 'moduleId: module.id,',
        replace: ''
    }
}

Hope this helps somebody with the same issue.

edited Jan 22 '19 at 18:03

Josh England

39
7

answered Mar 23 '17 at 23:19

Juliano

443
1
5
16

score 1 · Answer 2 · edited May 08 '17 at 15:31

1

I don't know if this is going to help or no, but maybe someone would need it anyway (I did!).

So in worst cases it is possible to search for module.id in the .js files and add .toString() method (module.id.toString()), it will solve the problem.

edited May 08 '17 at 15:31

pringi

3,987
5
35
45

answered May 08 '17 at 13:55

Ch_y

356
1
4
16

score 0 · Answer 3 · answered Jan 15 '17 at 06:04

0

Remove the line

moduleId: module.id,

It works.

answered Jan 15 '17 at 06:04

Vinu

166
2
10

Do webpack [solve relative paths](http://stackoverflow.com/questions/37178192/angular2-what-is-the-meanings-of-module-id-in-component) without module id? – Pavel Jan 15 '17 at 15:12
As I said, I cannot just remove all module.id references from all 3rd party libraries. They are pulled via npm everytime. Every person that needs to work on the project would need to do this. @pavel, yes Webpack doesnt need it to resolve relative paths. – Juliano Jan 15 '17 at 18:09
There has to be a better way to solve this. I tried adding rule to replace all module.id declarations via string-replace-loader. However, it still doesnt work since the templates are not referencing the directory like './mytemplate.html' but just declaring 'mytemplate.htnl'. The latter doesnt work with Webpack – Juliano Jan 15 '17 at 18:12
@Juliano, looks like these components do not supports webpack-way of including templates. Very interesting problem, using of moduleId is default official way of reffering templates in Angular, but looks like webpack do not supports it. I think, you should report an issue to webpack. ADD: looks like [you are not first](https://github.com/angular/angular/issues/12214). – Pavel Jan 16 '17 at 09:06

How to solve module.id should be a string error using webpack2

3 Answers3