ember build failing at webpack error (debugging help)

[ghost]

After updating to ember-cli@3.7.1, ember build fails:

ERROR in ./tmp/broccoli-35248RkE16LEYgYVA/cache-590-bundler/staging/app.js 23:47
Module parse failed: Unexpected token (23:47)
You may need an appropriate loader to handle this file type.
|     d('moment-timezone', [], function() { return require('project/node_modules/moment-timezone/index.js'); });
|     d('raf-pool', [], function() { return require('project/node_modules/raf-pool/dist/raf-pool.umd.js'); });
>     d('_eai_dyn_docx', [], function() { return import('project/node_modules/docx/build/index.js'); });
| })();
|
cleaning up...
Build Error (Bundler)

webpack returned errors to ember-auto-import

We are using ember-auto-import@1.2.19. The failure comes from a dynamic import of the docx package. I believe I have the configuration specified correctly. Commenting out the import( causes ember build to succeed.
I created a fresh application with a similar setup, and it works. This suggests a configuration bug with my main application. Do you have pointers to ember-auto-import internals to further debug this? I wanted to ask before pouring a day into fruitless debugging.

[mlenderink]

I'am getting the same error trying to build a ember-addon within a mono-repo. It works fine within its own repo.

[ef4]

I think that error message is claiming that ./tmp/broccoli-35248RkE16LEYgYVA/cache-590-bundler/staging/app.js has a syntax error. Is that true? Can you share that file?

[ghost]

@ef4 I will grab that snippet locally. Do you what flag / env var I use to persist the broccoli artifacts?
Think i found it BROCCOLI_DEBUG=ember-auto-import:* ember build (https://github.com/broccolijs/broccoli-debug/#consumers)

[ef4]

There may be some BROCCOLI_DEBUG tree that contains that file, but I'm not sure.

If you run ember s, the file should remain there until you exit.

[ghost]

@ef4 thanks, ember s did the trick. BROCCOLI_DEBUG didn't.
Here is the output of that chunk:

if (typeof document !== 'undefined') {
  __webpack_public_path__ = (function(){
    var scripts = document.querySelectorAll('script');
    return scripts[scripts.length - 1].src.replace(/\/[^/]*$/, '/');
  })();
}

module.exports = (function(){
  var d = _eai_d;
  var r = _eai_r;
  window.emberAutoImportDynamic = function(specifier) {
    return r('_eai_dyn_' + specifier);
  };
    d('dropzone', [], function() { return require('//node_modules/dropzone/dist/dropzone.js'); });
    d('intersection-observer-admin', [], function() { return require('//node_modules/intersection-observer-admin/dist/intersection-observer-admin.umd.js'); });
    d('lodash', [], function() { return require('//node_modules/lodash/index.js'); });
    d('marked', [], function() { return require('//node_modules/marked/lib/marked.js'); });
    d('moment', [], function() { return require('//node_modules/moment/moment.js'); });
    d('moment-timezone', [], function() { return require('//node_modules/moment-timezone/index.js'); });
    d('raf-pool', [], function() { return require('//node_modules/raf-pool/dist/raf-pool.umd.js'); });
    d('_eai_dyn_docx', [], function() { return import('//node_modules/docx/build/index.js'); });
})();

I think it complains that import is the syntax error? Perhaps from my babel + eslint parsing? as in it considers this section to be ES5 and hence import would be disallowed.

[ef4]

Maybe this is caused by webpack/webpack#8656

Do you have webpack 4.29.0? Can you try downgrading it to 4.28.0?

[ghost]

@ef4 thanks, that is the culprit:

$ npm ls webpack
└─┬ ember-auto-import@1.2.19
  └── webpack@4.29.3

I'll manually downgrade to 4.28 and see.
Downgraded to 4.28.4 and it works. I also checked the reproduction app, that had webpack@4.29.4. I tried 4.29.4 with our app and it still brok.

FWIW, we don't use webpack directly in our app. So perhaps we need to pin webpack to 4.28 in ember-auto-import? I can PR this if so.

[ef4]

If you use yarn, you can use yarn resolutions to pin it without changing ember-auto-import. But yes, perhaps we should release a fix to ember-auto-import to save everybody else from running into this.

It looks like the underlying bug is actually NPM's. One that has separately bitten me before. https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

[ghost]

Interesting. thanks tips and help debugging this!

[ef4]

Workaround released in 1.2.21.