Invalid imports from virtual modules halt the build with an unhelpful error

[nightire]

In one of our addon's index.js:

module.exports = {
  options: {
    cssModules: {
      // ...
      virtualModules: {
        'ui-colors': {
          'ui-white': '#fff',
          // ...
        }
      }
    }
  }
}

and in one of .css file:

@value ui-white from 'ui-colors';

This works on ember-css-modules v0.5.x, but after I upgrade to v0.6.2, resolve this import from virtualModules will throw an error:

The Broccoli Plugin: [CSSModules] failed with:
TypeError: Cannot read property 'root' of undefined
    at resolveExternalPath (/Users/nightire/Code/ui.cform.io/node_modules/ember-css-modules/lib/resolve-path.js:45:38)
    at ModulesPreprocessor.resolvePath [as _resolvePath] (/Users/nightire/Code/ui.cform.io/node_modules/ember-css-modules/lib/resolve-path.js:15:12)
    at ModulesPreprocessor.resolvePath (/Users/nightire/Code/ui.cform.io/node_modules/ember-css-modules/lib/modules-preprocessor.js:165:15)
    at ModulesPreprocessor.onImportResolutionFailure (/Users/nightire/Code/ui.cform.io/node_modules/ember-css-modules/lib/modules-preprocessor.js:128:27)
    at /Users/nightire/Code/ui.cform.io/node_modules/broccoli-css-modules/lib/link-modules.js:47:19
    at Rule.each (/Users/nightire/Code/ui.cform.io/node_modules/postcss/lib/container.js:114:22)
    at /Users/nightire/Code/ui.cform.io/node_modules/broccoli-css-modules/lib/link-modules.js:42:10
    at tryCatch (/Users/nightire/Code/ui.cform.io/node_modules/rsvp/dist/rsvp.js:538:12)
    at invokeCallback (/Users/nightire/Code/ui.cform.io/node_modules/rsvp/dist/rsvp.js:553:13)
    at /Users/nightire/Code/ui.cform.io/node_modules/rsvp/dist/rsvp.js:628:16
    at flush (/Users/nightire/Code/ui.cform.io/node_modules/rsvp/dist/rsvp.js:2373:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at:
    at CSSModules.Plugin (/Users/nightire/Code/ui.cform.io/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at CSSModules.CachingWriter [as constructor] (/Users/nightire/Code/ui.cform.io/node_modules/broccoli-caching-writer/index.js:18:10)
    at new CSSModules (/Users/nightire/Code/ui.cform.io/node_modules/broccoli-css-modules/index.js:26:10)
    at CSSModules (/Users/nightire/Code/ui.cform.io/node_modules/broccoli-css-modules/index.js:24:47)
    at ModulesPreprocessor.toTree (/Users/nightire/Code/ui.cform.io/node_modules/ember-css-modules/lib/modules-preprocessor.js:38:53)
    at /Users/nightire/Code/ui.cform.io/node_modules/ember-cli-preprocess-registry/preprocessors.js:180:26
    at Array.forEach (native)
    at processPlugins (/Users/nightire/Code/ui.cform.io/node_modules/ember-cli-preprocess-registry/preprocessors.js:178:11)
    at Function.module.exports.preprocessJs (/Users/nightire/Code/ui.cform.io/node_modules/ember-cli-preprocess-registry/preprocessors.js:171:10)
    at Class.preprocessJs (/Users/nightire/Code/ui.cform.io/node_modules/ember-cli/lib/models/addon.js:814:25)
    at Class.processedAddonJsFiles (/Users/nightire/Code/ui.cform.io/node_modules/ember-cli/lib/models/addon.js:826:17)
    at Class.compileAddon (/Users/nightire/Code/ui.cform.io/node_modules/ember-cli/lib/models/addon.js:742:24)
    at Class.treeForAddon (/Users/nightire/Code/ui.cform.io/node_modules/ember-cli/lib/models/addon.js:514:26)
    at Class._treeFor (/Users/nightire/Code/ui.cform.io/node_modules/ember-cli/lib/models/addon.js:371:33)
    at Class.treeFor (/Users/nightire/Code/ui.cform.io/node_modules/ember-cli/lib/models/addon.js:339:21)
    at /Users/nightire/Code/ui.cform.io/node_modules/ember-cli/lib/broccoli/ember-app.js:499:20

I was tracking this deeper and found in error has been thrown at https://github.com/salsify/ember-css-modules/blob/master/lib/resolve-path.js#L41 because addonName could not be parsed correctly:

[dfreeman]

Interesting. For virtual modules, resolvePath should never be called because the lookup should short-circuit on this line in broccoli-css-modules.

The test suite includes coverage for addons with virtual imports*, so at least in the general case they should be working. Would you be able to share a sample repo that reproduces the issue?

*See these files for the test:

• https://github.com/salsify/ember-css-modules/blob/master/tests/dummy-addon/index.js#L9-L14
• https://github.com/salsify/ember-css-modules/blob/master/tests/dummy-addon/addon/styles/components/testing/addon-component-with-virtual-imports.css#L1
• https://github.com/salsify/ember-css-modules/blob/master/tests/acceptance/imports-test.js#L13

[nightire]

@dfreeman OK, let me try to talk to my boss first 😹

[nightire]

@dfreeman Here it is: https://github.com/choice-form/ember-choice-ui

0.5.x in master branch which works well
0.6.4 in ember-css-modules branch which throws error

thanks for your time

[dfreeman]

@nightire Thanks for the reproduction! That led me right to the issue.

It looks like you have a typo (ui-gary instead of ui-gray) in ui-switch/styles.css. In 0.6.0, we started emitting a warning when you try to import values that don't exist, and that warning code breaks for virtual modules.

In the short term just fixing the typo should let you work around the issue, and I'll try to get a fix out in ember-css-modules in the next couple days so no one else hits this problem. Sorry that you ran into this!

[nightire]

@dfreeman nice catch, how can I event miss that 🤔, thank you!

[dfreeman]

@nightire I'm going to keep this open for now to track fixing the underlying issue, if that's ok with you :)