I am using System.import() in my React project for lazy loading components and data to reduce initial bundle size.
["module-resolver", {"alias": { "data": "./src/data/"}}]
Sample code
System.import('data/faqs')
.then(response => response.default)
.then(faqs => this.setState({faqs}))
Error
ERROR in ./src/scripts/app/pages/FAQ.js
Module not found: Error: Can't resolve 'data/faqs' in '<truncated-path>/src/scripts/app/pages'
@ ./src/scripts/app/pages/FAQ.js 42:6-39
@ ./src/scripts/bundles/app.js
@ multi app
Regular imports (import faqs from 'data/faqs') are working as expected, but not when using System.import()
If System.import() is not supported is there an alternative I can use?
For now I am just creating aliases within webpack config for the affected imports like below
resolve: {
alias: {
data: path.join(__dirname, 'src/data/')
}
}
Would be nice if babel could handle all the aliases if possible :)
I am using
System.import()in my React project for lazy loading components and data to reduce initial bundle size.Sample code
Error
Regular imports (
import faqs from 'data/faqs') are working as expected, but not when usingSystem.import()If
System.import()is not supported is there an alternative I can use?For now I am just creating aliases within webpack config for the affected imports like below
Would be nice if babel could handle all the aliases if possible :)