Module parse failed: Unexpected token (9:37) with babel-loader

Question

I am serving the app through Express, which needs to use ES modules. Node does allow that, but I had to replace __dirname with another solution:

server.mjs:

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

This resulted in error with Babel, which required me to add extra plugin ( https://babeljs.io/docs/en/next/babel-plugin-syntax-import-meta.html ). I replaced original CRA with custom webpack and created .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-import-meta"]
}

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js", // entry point to the application = top react component,
    output: {
        path: path.resolve(__dirname, "build"), // path where the transformed index.js will be stored
        filename: "index_bundle.js", //name of the transformed file
    },
    module: {
        rules: [
            {
                test: /\.(js|mjs|jsx)$/, use: {
                    loader: 'babel-loader',
                }
            }, // what files will be loaded by what procedure
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },
        ]
    },
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html" // will take the template file and transform it to include the rest
        }),
    ]
};

I am still runing into an error when trying to build the app. It seems that all other files are built successfully, but server.mjs is still returning an error:

ERROR in ./src/server/server.mjs 9:66
Module parse failed: Unexpected token (9:66)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import getInitialPlayerStates from "../components/functions/initialStateFunctions.mjs";
|
> var __dirname = path.resolve(path.dirname(decodeURI(new URL(import.meta.url).pathname)));
|
| var port = process.env.PORT || 4001;
 @ ./src/App.js 49:0-48 119:14-27
 @ ./src/index.js

Other .mjs files are being build alright unless I include the line with import.meta in their code - than they fail too.

What is wrong? How can I overcome this problem?

Answer 1

"es-dirname" library solves the problem without using "import.meta".

https://www.npmjs.com/package/es-dirname