Search code examples
ruby-on-railsangulartypescriptangular-materialwebpacker

Syntax error in library code when including matrial design using Rails + Webpacker + Typescript + Angular


In my rails app, I get a syntax error somewhere in a huge js file that is presumably generated by webpacker. But it seems to be some sort of angular/material code. If I don't include material design, the error goes away, so it seems to be related to material design. This is the part that causes the syntax error:

function instantiateSupportedAnimationDriver() {
  return !(function webpackMissingModule() { var e = new Error("Cannot find module '@angular/animations/browser'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())() ? new !(function webpackMissingModule() { var e = new Error("Cannot find module '@angular/animations/browser'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())() : new !(function webpackMissingModule() { var e = new Error("Cannot find module '@angular/animations/browser'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())();
}

Note that telling me how to fix the syntax error doesn't help me. This code is not in my control and I wouldn't know how to effectively patch it. Besides, it's a frequently used piece of code, I doubt that it has a syntax error, probably something in plumbing is incorrect.

Some context: I probably don't get all the mechanics right. I am trying to make the combination Rails + Webpacker + Typescript + Angular + Material work. It's quite tricky, I find nothing useful on it on the web and I seem to be pretty much the first one to do it. I saw some suggestions to make an api-only rails app, but I don't like that...


Solution

  • I never really figured out why this caused a syntax error in a seemingly unrelated file, but I had some "unmet peer dependency" warnings and when I fixed them, this went away.