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

by

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 🙂

More Related Contents:

  1. CORS error even after setting Access-Control-Allow-Origin or other Access-Control-Allow-* headers on client side
  2. Cannot find module ‘webpack/bin/config-yargs’
  3. How to include css files in Vue 2
  4. Multiple html files using webpack
  5. Webpack – background images not loading
  6. How can I use ES6 in webpack.config.js?
  7. I am getting an “Invalid Host header” message when connecting to webpack-dev-server remotely
  8. TypeError: MiniCssExtractPlugin is not a constructor
  9. How to inline CSS in the head tag of a NextJS project?
  10. Webpack: “there are multiple modules with names that only differ in casing” but modules referenced are identical
  11. How to use a library from a CDN in a Webpack project in production
  12. Is it possible to create custom resolver in webpack?
  13. Module not found: Error: Can’t resolve ‘util’ in webpack
  14. How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
  15. webpack can’t find module if file named jsx
  16. Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED [duplicate]
  17. What is `require.context`?
  18. How to use variable substitution in Frontend js applications like backend applications?
  19. What does “The code generator has deoptimised the styling of [some file] as it exceeds the max of “100KB”” mean?
  20. Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser
  21. using async/await with webpack-simple configuration throwing error: RegeneratorRuntime not defined
  22. Rules vs Loaders in Webpack – What’s the Difference?
  23. How “include” and “exclude” works in webpack loader
  24. Set environment variable for build in Netlify
  25. Inline JavaScript and CSS with webpack
  26. How to pass .env file variables to webpack config?
  27. Webpack how to build production code and how to use it
  28. Passing environment-dependent variables in webpack
  29. Angular 6 many Can’t resolve errors (crypto, fs, http, https, net, path, stream, tls, zlib)
  30. React-Native: Module AppRegistry is not a registered callable module

Leave a Comment