I currently maintain two packages, one is a library and the other is a craco app. Within the library, I want to preserve a dynamic import statement:
// library.js
export async function getExternalModule(expression) {
const { stuff } = await import('http://someserver/' + expression)
return stuff
}
// craco.tsx
import { getExternalModule } from 'library';
const x = await getExternalModule('some-code.js')
When I run this code in the browser, I always get a cannot find module 'http://someserver/some-code.js'.
I’ve already tried:
// craco.config.js
webpack.resolve.alias = {
'http://someserver': false
}
webpack.plugins = [
new webpack.IgnorePlugin({
resourceRegExp: /http://someserver/
})
]
webpack.externals = {
'http://someserver': 'http://someserver'
}
I know that Webpack provides for ways to specify which import expressions to ignore using magic comments, but as far as I can tell those only work if the import statement is in the craco app itself and doesn’t work within dependencies
Is there some way I can get webpack to ignore that specific import statement, or perhaps is there a better way to go about what I am trying to do?