Getting "Error: `output.path` needs to be an absolute path or `/`"

Question

I am new to JS development, in an attempt to hot load changes using webpack-dev-server I keep above exception. The exact stack is:

Error: `output.path` needs to be an absolute path or `/`.
at Object.Shared.share.setFs (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/lib/Shared.js:88:11)
at Shared (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/lib/Shared.js:214:8)
at module.exports (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/middleware.js:22:15)
at new Server (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/lib/Server.js:56:20)

at startDevServer (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:379:12)
at processOptions (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:317:3)
at Object.<anonymous> (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:441:1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)

Here are the webpack config files i have tried already:

module.exports = {
    entry: "./client/app.jsx",
    output: {
        path: "dist/js",
        filename: "bundle.js",
        publicPath: "http://127.0.0.1:2992/js"
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                include: /client/
            }
        ]
    }
};

And:

module.exports = {
    entry: "./client/app.jsx",
    output: {
        path: "/Users/mybox/work/day1/ex6/dist/js",
        filename: "bundle.js",
        publicPath: "http://127.0.0.1:2992/js"
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                include: /client/,
                query: {
                    presets:['react']
                }
            }
        ]
    }
};

Below is my package.json file

{
 "name": "ex6",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
   "server": "node index.js",
   "hot": "webpack-dev-server --inline --hot --port 2992 --progress --colors",
   "dev": "webpack-dev-server --inline --dev --port 2992 --progress --colors"
 },
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
  "babel-preset-es2015": "^6.22.0",
  "hapi": "^16.1.0",
  "inert": "^4.1.0"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-react": "^6.22.0",
"builder": "^3.2.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"description": ""
}

Hardik Modha · Accepted Answer · 2017-03-23 17:54:37Z

78

As the error message says, you need to use absolute path.

To get an absolute path for current directory, You can use __dirname to get the current directory and then append dist/js. So it would be something like,

output: {
    path: __dirname + "/dist/js", // or path: path.join(__dirname, "dist/js"),
    filename: "bundle.js"
}

Both will work just fine. You can read about webpack configuration here

Edit: To use path: path.join(__dirname, "dist/js") you will need to require node's built-in path module.

Quoting from the docs:

Path module: It provides utilities for working with file and directory paths. Using it with the prefix __dirname global will prevent file path issues between operating systems and will allow relative paths to work as expected.

You can require it at the top of your webpack.config.js as

var path = require('path');
.....
....
..
output: {
    path: path.join(__dirname, "dist/js"),
    filename: "bundle.js"
}
// rest of the configuration

Apart from above two methods, You can also use path.resolve as mentioned here.

path: path.resolve(__dirname, "dist/js")

Hope it helps :)

edited Mar 23, 2017 at 17:54

answered Feb 10, 2017 at 18:58

Hardik Modha

12.8k3 gold badges40 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

bluefalcon Over a year ago

For some reason i am still getting the same exception with path: "./dist/js", while __dirname + "dist/js" works fine.

Hardik Modha Over a year ago

./dist/js is relative path. May be that's why you are getting an error. But in my project it's working fine. Which version of webpack you are using?

bluefalcon Over a year ago

webpack": "^2.2.1", "webpack-dev-server": "^2.3.0"

hungryWolf Over a year ago

Why should this be done? Why does it need a abs path? Is there a specific reason such design decision was made?

Hardik Modha Over a year ago

@hungryWolf I don't know about why this design decision was made but it is a limitation and a consistency issue for webpack users. We'll soon be able to use the relative path value for output.path. You can visit this PR for details: github.com/webpack/webpack/pull/6214

|

Michael Guild · Accepted Answer · 2017-02-13 15:40:17Z

0

you need to include this at the top of or webpack.config.js file var path = require('path') and then in your path do the following: path: path.join(__dirname, "dist/js")

answered Feb 13, 2017 at 15:40

Michael Guild

8449 silver badges9 bronze badges

Comments

Aung Baw · Accepted Answer · 2018-11-27 13:54:43Z

0

You could use __dirname to get current executed file's path.

const webpack = require('webpack')

module.exports = {
    mode: 'development',
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/dist",
        filename: 'main.js'
    }
}

You could also import build-in path API & use resolve method, i think this one is prefer by webpack

const webpack = require('webpack')
const path = require('path')

module.exports = {
    mode: 'development',
    entry:  path.resolve("./src/index.js"),
    output: {
        path: path.resolve("./dist"),
        filename: 'main.js'
    }
}

answered Nov 27, 2018 at 13:54

Aung Baw

4763 silver badges9 bronze badges

1 Comment

NeoZoom.lua Over a year ago

note: __dirname only works in CommonJS, i.e. .cjs. It doesn't exist in ES6 modules.

NeoZoom.lua · Accepted Answer · 2022-04-03 03:58:50Z

0

It's a design joke called aymmetric system-inconsistency from the author, you can find more details from the issue there: https://github.com/webpack/webpack/issues/1908.

answered Apr 3, 2022 at 3:58

NeoZoom.lua

2,9814 gold badges42 silver badges88 bronze badges

Comments

Muhammad Ali · Accepted Answer · 2017-02-13 09:29:54Z

-2

You can use it like following code to get absolute path.

output: {
  path: require('path').resolve("./dist/js"),
  filename: 'bundle.js',
  publicPath: 'http://127.0.0.1:2992/js'
}

answered Feb 13, 2017 at 9:29

Muhammad Ali

635 bronze badges

1 Comment

Michael Guild Over a year ago

don't require in the path. That should be defined at the top of the file so it can be referenced for other paths. That's bad practice.

Collectives™ on Stack Overflow

Getting "Error: `output.path` needs to be an absolute path or `/`"

5 Answers 5

6 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related