npm webpack server start error “./” is not an absolute path

Question

I was working on a React tutorial here and ran into a problem starting the Webpack server. When running npm start I get the following error:

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

This is my directory structure:

reactApp
  + node_modules
  + App.jsx
  + index.html
  + main.js
  + package.json
  + webpack.comfig.js

My webpack config is

var config = {
   entry: './main.js',

   output: {
      path:'./',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

And main.js is

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

In package.json I have the start script

"scripts": {
    "start": "webpack-dev-server --hot"
  },

It seems to be failing on import App from './App.jsx';

Here is the error log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@3.10.10
3 info using node@v6.9.4
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle react-app@1.0.0~prestart: react-app@1.0.0
6 silly lifecycle react-app@1.0.0~prestart: no script for prestart, continuing
7 info lifecycle react-app@1.0.0~start: react-app@1.0.0
8 verbose lifecycle react-app@1.0.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle react-app@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\node\reactApp\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\oracle\product\10.2.0\client_1\bin;C:\Program Files\Common Files\Microsoft Shared\Microsoft Online Services;C:\Program Files (x86)\Common Files\Microsoft Shared\Microsoft Online Services;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files (x86)\Hewlett-Packard\HP ProtectTools Security Manager\Bin\;c:\Program Files\Intel\DMIX;C:\Program Files (x86)\Intel\Services\IPT\;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x64;C:\Strawberry\perl\bin;C:\Strawberry\perl\site\bin;C:\Strawberry\c\bin;C:\Dwimperl\perl\bin;C:\Dwimperl\perl\site\bin;C:\Dwimperl\c\bin;C:\Maven\apache-maven-3.3.9\bin;C:\Program Files\Java\jdk1.8.0_65\bin;C:\Maven\apache-maven-3.3.9\bin;C:\php;C:\Program Files\nodejs\;C:\ProgramData\Oracle\Java\javapath;C:\oracle\product\10.2.0\client_1\bin;C:\Program Files\Common Files\Microsoft Shared\Microsoft Online Services;C:\Program Files (x86)\Common Files\Microsoft Shared\Microsoft Online Services;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files (x86)\Hewlett-Packard\HP ProtectTools Security Manager\Bin\;c:\Program Files\Intel\DMIX;C:\Program Files (x86)\Intel\Services\IPT\;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x64;C:\Strawberry\perl\bin;C:\Strawberry\perl\site\bin;C:\Strawberry\c\bin;C:\Dwimperl\perl\bin;C:\Dwimperl\perl\site\bin;C:\Dwimperl\c\bin;C:\Maven\apache-maven-3.3.9\bin;C:\Program Files\Java\jdk1.8.0_65\bin;C:\Users\hatch\AppData\Roaming\npm
10 verbose lifecycle react-app@1.0.0~start: CWD: C:\node\reactApp
11 silly lifecycle react-app@1.0.0~start: Args: [ '/d /s /c', 'webpack-dev-server --hot' ]
12 silly lifecycle react-app@1.0.0~start: Returned: code: 1  signal: null
13 info lifecycle react-app@1.0.0~start: Failed to exec start script
14 verbose stack Error: react-app@1.0.0 start: `webpack-dev-server --hot`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid react-app@1.0.0
16 verbose cwd C:\node\reactApp
17 error Windows_NT 6.1.7601
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v6.9.4
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error react-app@1.0.0 start: `webpack-dev-server --hot`
22 error Exit status 1
23 error Failed at the react-app@1.0.0 start script 'webpack-dev-server --hot'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-app package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack-dev-server --hot
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs react-app
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls react-app
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

I don't understand what the problem is? It cannot import App.jsx I think...

Can anyone see the problem?

I am using Windows 7, Node 6.9.4, and NPM 3.10.10

Answer 1

The output path must be absolute instead of relative. Your .\\ is relative to the current path, C:\\Users... would be absolute.

Or, you could dynamically determine the absolute path in the webpack.config.js:

path: __dirname,

https://webpack.js.org/configuration/output/#output-path