[Resolvido] Webpack erro: ‘The provided value <output.path> is not an absolute path!

[Resolvido] Webpack erro: &amp;#8216;The provided value &lt;output.path&gt; is not an absolute path!

Overview

Tem um projeto NPM novinho em folha mas esbarrou no erro ‘-configuration.output.path’ ao tentar configurar o webpack? Respira fundo que não é o fim do mundo! Este post vai te mostrar passo a passo como sair dessa roubada com uma solução simples que vai deixar seu setup nos trinques - e salvar a vida dos pandas.

Então você acaba de criar um novo projeto utilizando o NPM, instala o webpack, faz as configurações básicas e…surpresa! Não funciona. Voce recebe a mensagem: -configuration.output.path: The provided value “./build” is not an absolute path! Este post ensina como resolver este problema.

Após criar o projeto, você criou o arquivo webpack.config.js e configurou nele o caminho relativo para um diretório. Neste exemplo, vamos usar o diretório de build e considerar que o arquivo webpack.config.js e a pasta build estão no mesmo nível na estrutura de diretórios do projeto.

Inicialmente, o arquivo webpack.config.js ficou assim:

module.exports = {
  entry: ['./app/index.js'],
  output: {
    path: './build',
    filename: 'bundle.js'
  }
}

Então você, para testar, executou o comando npm run build e foi agraciado com o seguinte erro:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./build/" is not an absolute path!

Não importa o valor que você coloque na propriedade path, sempre ocorrerá este erro. Mesmo se você colocar o caminho absoluto para o diretório…coisa que você não vai fazer, por que cada vez que você coloca um caminho absoluto fixo no código, um panda morre.

A solução é bem simples. Altere o webpack.config.js para que fique desta forma:

const path = require('path');

module.exports = {
  entry: ['./app/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
}

Isso irá resolver o problema e manter o caminho do arquivo relativo. Este problema parece ocorrer desde a versão 2.3.0 e aconteceu comigo na 3.4.1.

Espero ter ajudado.

*Update 24/08/2017*: Ajustado um erro de ortografia no titulo.