__dirname is not defined - WEBPACK

Question

I had to switch to imports and from browserify to webpack. This is my Webpack config on CLIENTSIDE. if I do module.exports it will say module is not defined... naturally I just switched it to export default.

My package.json has type: "module" in it.

Any thoughts on the solution here? I think dirname is from the node "path" module. I actually don't know how to get an absolute directory value on clientside outside of the browser here... You cannot use "" or "./" or "/". No relative paths allowed.

Thanks!

Uncaught ReferenceError: __dirname is not defined

// webpack.config.js
export default {
  mode: "development",
  entry: ["./src/index.js", "./src/index.css"],
  output: {
    path: __dirname,
    publicPath: "/",
    filename: "./dist/bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "script-loader",
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};

Answer 1

Try this way indirectly in your code, not from your package.json . Let me know if this works.

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);