Vue Lazy Loading erro

O seu projeto foi criado usando o Vue CLI? Digo isso, porque você usou require. O Vue CLI cria um projeto que usa ESM e o require é usado se você criou um projeto usando CommonJS. Geralmente o Laravel usa CommonJS nos projetos criados e que usam Vue.

Agora, é de se estranhar esse problema, tendo em vista a quantidade absurda de alunos que já terminaram o curso sem problema algum. Nesse sentido, você precisa confirmar para mim se esta usando exatamente a versão de Vue que usei no curso.

Aguardo seu retorno.

Criei o projeto pelo CLI, eu só usei o require pois através do System.import ele apresentou o erro abaixo, e pesquisando na web achei algumas pessoas com alguns erros semelhantes e uma das soluções foi o require que testei aqui e realmente funcionou. Segue as versões do vue da minha maquina:

npm list | grep vue
alurapic@1.0.0 /Users/caique.bertolozzi/alvo/cursos/js/vue/alurapic
├── vue@2.5.2
├─┬ vue-loader@13.3.0
│ ├── vue-hot-reload-api@2.2.0
│ ├─┬ vue-style-loader@3.0.3
│ └── vue-template-es2015-compiler@1.6.0
├── vue-resource@1.0.3
├── vue-router@2.1.1
├─┬ vue-template-compiler@2.5.2

Qual a versão do Vue CLI instalada?

Desculpe a demora, segue:

vue-cli@2.7.0

Tive o mesmo problema que o Caique, e consegui resolver sem usar o require:

const Cadastro = () => System.import('./components/cadastro/Cadastro.vue').then(m => m.default);

A explicação que encontrei, seria que os arquivos do tipo "*.vue" normalizam a exportação automaticamente, para que você possa dar um resolve no valor importado diretamente. Nesse caso, é necessário dar um resolve no .default por conta própria.

Tive o mesmo problema e resolvi seguindo a solução do Rômulo Martins França.

Meu package.json:

{
  "name": "alurapic",
  "description": "Picture manager",
  "version": "1.0.0",
  "author": "Rafael Moraes",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --host 0.0.0.0",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vee-validate": "^2.0.0-beta.18",
    "vue": "^2.5.11",
    "vue-router": "^2.1.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}