Webpack with Babel lazy load module using ES6 recommended Import() approach not working

Viewed 2437

I'm trying to do code splitting and lazy loading with webpack using the import() method

import('./myLazyModule').then(function(module) {
    // do something with module.myLazyModule
}

I'm getting

'import' and 'export' may only appear at the top level

Note top level imports are working fine, i'm just getting an issue when I try and using the dynamic variant of import()

var path = require('path');

module.exports = {
    entry: {
        main: "./src/app/app.module.js",
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name]-application.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015']
                    }
                }]
            }
        ]
    },
    resolve : {
        modules : [
            'node_modules',
            'bower_components'
        ]
    },
    devtool : "source-map"
}

EDIT:

If I change it so the syntax reads, it works.... but the chunk comments don't work to label the bundle. I'm confused because the documentation says the the following is depreciated.

The use of System.import in webpack did not fit the proposed spec, so it was deprecated in webpack 2.1.0-beta.28 in favor of import().

System.import('./myLazyModule').then(function(module) {
    // do something with module.myLazyModule
}
1 Answers
Related