Erro na instalação após rodar o NPM RUN DEV | Vue.js parte 1: construindo Single Page Applications

C:\vue\alurapic>npm run dev

alurapic@1.0.0 dev C:\vue\alurapic cross-env NODE_ENV=development webpack-dev-server --open --hot

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern. npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! alurapic@1.0.0 dev: cross-env NODE_ENV=development webpack-dev-server --open --hot npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the alurapic@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\wanger\AppData\Roaming\npm-cache_logs\2021-09-22T16_37_57_418Z-debug.log

Olá, Wanger!

Aparentemente há um problema de configuração do Webpack.

Na mensagem, fala de uma breaking change na versão 5, mas o curso utiliza a versão 2 do Webpack. Você pode confirmar no package.json qual versão foi instalada?

Em devDependencies, as linhas do Webpack deveriam ser:

    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.9"

Entretanto, eu acredito que toda essa instalação é gerenciada pela CLI, inclusive o webpack.config.js. Assim, acho estranho o próprio CLI criar um arquivo de configuração incompatível, mas infelizmente isso acontece de vez em quando (não só no Vue como em outros frameworks).

Pelo que eu entendi do erro, o problema é na configuração da devtool:

configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern.

Então temos uma expressão regular, e o valor dessa configuração precisa seguir esse padrão. Tente resolver isso assim:

Entre no arquivo webpack.config.js, e procure a linha do devtool (aqui é a linha 53, talvez aí seja a mesma). No projeto do instrutor, a linha está assim:

devtool: '#eval-source-map'

Repare que o # não segue o padrão exigido pela expressão regular. Então mude a linha para o seguinte:

devtool: 'eval-source-map'

E aí tente rodar de novo. Na melhor das hipóteses, esse vai ser o único erro de incompatibilidade do arquivo. Se outros erros aparecerem, volte aqui e mande que eu dou uma olhada e vamos tentando resolver. Ou, se preferir, pode tentar recriar o projeto.

Espero que isso ajude!

Mergulhe em programação