"Could not find module errors" at runtime for some packages

I’m working on a project using Ember 3.27.2 that is included as part of a Chrome extension. When running the application I’m seeing errors when the app tries to use certain modules.

  • prop-types (used by ember-arg-types)
  • intersection-observer-admin (used by ember-in-viewport/-private/observer-admin in ember-infinity)
  • local-time (referenced directly within one of the components)

The errors all look something like this:

Uncaught (in promise) Error: Could not find module `intersection-observer-admin` imported from `ember-in-viewport/-private/observer-admin`
    at missingModule (vendor.js:259)
    at findModule (vendor.js:270)
    at Module.findDeps (vendor.js:180)
    at findModule (vendor.js:274)
    at Module.findDeps (vendor.js:180)
    at findModule (vendor.js:274)
    at Module.findDeps (vendor.js:180)
    at findModule (vendor.js:274)
    at requireModule (vendor.js:36)
    at Class._extractDefaultExport (vendor.js:129821)

I stuck a breakpoint into findModule so that I could look at the registry array. The modules referenced above are indeed missing from registry. I’ve searched through vendor.js and I do see references to prop-types, etc.

Does anybody know why those modules would be left out of the build or not show up in registry?

The issue is caused by the use of eval by ember-auto-import. When running as a Chrome extension it appears that the CSP breaks importing of some modules. Adding the ember-auto-import forbidEval: true setting in ember-cli-build.js fixed the problem.

Here is a link to the suggested solution in the FAQ of ember-auto-import:

I tracked down the problem by turning on debugging with the following ENV vars. This confirmed that the modules were being processed properly.

DEBUG="ember-auto-import:*"
AUTO_IMPORT_VERBOSE=true

The modules that wouldn’t load are listed in the app > static node:

ember-auto-import:splitter output {
  "app": {
    "static": [
      {
         ...
       }

Once I confirmed that they were available the forbidEval setting stood out as the solution because I know Chrome Extensions have a strict CSP.

1 Like