Vue-loader: Use of import vs. System.import in Webpack2

[githoniel]

Since import() support has landed in webpack and System.import is considered deprecated

but use import in .vue files result in

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

System.import works

and both works in .js files

[yyx990803]

You need babel-plugin-syntax-dynamic-import.

[yola-0316]

I according the offical guide:

      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [['es2015', {modules: false}]],
            plugins: [
              'syntax-dynamic-import',
              'transform-async-to-generator',
              'transform-regenerator',
              'transform-runtime',
            ]
          }
        }]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          preLoaders: {
          },
          loaders: {},
        }
      },

but still got an error:

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./app/components/editor.vue
Module build failed: SyntaxError: Unexpected token (15:23)

  13 |
  14 | async function determineDate() {
> 15 |   const moment = await import('moment');
     |                        ^
  16 |   return moment().format('LLLL');
  17 | }
  18 |

[yyx990803]

Use .babelrc instead of loader options.