Dynamic import of optional dep from addon gives runtime "could not find module" error
I'm making a V1 ember addon, and I'm trying to dynamically import a non-ember npm package: prosemirror-dev-tools
I followed the instructions as per the readme, but while everything builds fine, I get a runtime error in the dummy app:
Uncaught (in promise) Error: Could not find module `_eai_dyn_prosemirror-dev-tools` imported from `(require)`
at missingModule (loader.js:247:1)
at findModule (loader.js:258:1)
at requireModule (loader.js:24:1)
at module.exports.window.emberAutoImportDynamic (app.cjs:7:14)
at new Prosemirror (prosemirror.ts:188:7)
at RdfaEditor.handleRawEditorInit (rdfa-editor.ts:119:24)
(the last two lines of the stacktrace are my files) The usecase is that I'm trying to add the devtools as an optional dependency. The following code runs to check if it's available:
if (devtools) {
import('prosemirror-dev-tools').then(
({ default: applyDevTools }) => {
applyDevTools(this.view);
},
() => {
this.logger(
'optional dependency prosemirror-dev-tools is not installed'
);
}
);
}
The idea being that I can avoid the bundle size increase in production.
Important: I'm getting the error whether or not the dependency is installed
However, I'm not getting the error when I make devtools false, skipping the dynamic import block altogether. So at least that's working as expected.
Potentially relevant versions:
ember-auto-import : 2.5.0 ember-source: 3.28.8 ember-cli: 3.28.5 ember-cli-typescript: 5.1.0
my full index.js file:
'use strict';
module.exports = {
isDevelopingAddon() {
return process.env.EMBER_ENV === 'development';
},
name: require('./package').name,
options: {
babel: {
sourceMaps: 'inline',
plugins: [require.resolve('ember-auto-import/babel-plugin')],
},
autoImport: {
webpack: {
node: {
global: true,
__filename: true,
__dirname: true,
},
resolve: {
fallback: {
stream: require.resolve('stream-browserify'),
crypto: require.resolve('crypto-browserify'),
},
},
},
},
},
included: function (app) {
this._super.included.apply(this, arguments);
app.options.sassOptions = app.options.sassOptions || {};
app.options.sassOptions.includePaths =
app.options.sassOptions.includePaths || [];
},
};
Incidentally, if I can rely on tree-shaking (can I?), I could just static import and just not call the applyDevTools function.
That still leaves this as a bug though