Cannot use 'import.meta' outside a module

Question

I have Node + Express + Babel + ES6 project with the following files:

/package.json

{
  "name": "test-backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "babel-node src/index.mjs",
    "build": "babel src --out-dir build",
    "start": "node build/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.19.6",
    "@babel/node": "^7.19.1",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "babel-plugin-module-extension": "^0.1.3"
  }
}

/.babelrc.js

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/transform-runtime', ['module-extension', { mjs: 'js' }]],
  sourceMaps: false,
  retainLines: false,
  minified: true,
};

/src/index.mjs

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import { sum } from './utils.mjs';

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

const app = express();

app.get('/', (req, res) => {
  const result = sum(3, 2);
  res.send(`current dir: ${__dirname} | sum(3, 2) = ${result}`);
})

const port = 8080;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

src/utils.mjs

export const sum = (num1, num2) => num1 + num2;

I can properly test the website with the command:

$ npm run dev

Then going to: http://localhost:8080

I can properly build the website with the command:

$ npm run build

Which will generate a new directory: /build.

My problem is: When I try to run the built website with command:

$ npm start

I get the following error: SyntaxError: Cannot use 'import.meta' outside a module. Below you have the full error:

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> [email protected] start
> node build/index.js

D:\myproject\build\index.js:1
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _express=_interopRequireDefault(require("express"));var _path=_interopRequireDefault(require("path"));var _url=require("url");var _utils=require("./utils.js");var _filename=(0,_url.fileURLToPath)(import.meta.url);var _dirname=_path["default"].dirname(_filename);var app=(0,_express["default"])();app.get("/",function(req,res){var result=(0,_utils.sum)(3,2);res.send("current dir: ".concat(_dirname," | sum(3, 2) = ").concat(result))});var port=8080;app.listen(port,function(){console.log("Example app listening on port ".concat(port))});
                                                                                                                                                                                                                                                                                                               ^^^^

SyntaxError: Cannot use 'import.meta' outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

The issue indicates it is caused because the following lines on: /src/index.mjs:

import { fileURLToPath } from 'url';

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

Here is the transpiled /build/index.js

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _express = _interopRequireDefault(require("express"));
var _path = _interopRequireDefault(require("path"));
var _url = require("url");
var _utils = require("./utils.js");
var _filename = (0, _url.fileURLToPath)(import.meta.url);
var _dirname = _path["default"].dirname(_filename);
var app = (0, _express["default"])();
app.get("/", function (req, res) {
  var result = (0, _utils.sum)(3, 2);
  res.send("current dir: ".concat(_dirname, " | sum(3, 2) = ").concat(result));
});
var port = 8080;
app.listen(port, function () {
  console.log("Example app listening on port ".concat(port));
});

where you can see the code uses: import.meta.url which is the conflicting line.

My requirements are:

• Need to get the current working directoy because I have resources in there that I need for the app to run.
• Need the source code to be: ES6 so I can use classes, imports, exports, etc.

Any idea on how to make this work?

Thanks!

Answer 1

Do you need the build to be CommonJS or ESM?

For an ESM build on a supported Node version you can:

• Update package.json

  "type": "module"
  

• Update ./babelrc.js:

    export default {
       presets: [['@babel/preset-env', { modules: false }]],
       // The rest is the same ...
    }
  

About the modules setting

Setting this to false will preserve ES modules.

Now run

npm run build
npm start

Alternatively, you can use babel's --out-file-extension option and use .mjs in your build script. You would still need to update @babel/preset-env to preserve the ES module system. I think it is cleaner and clearer to use "type": "module" in the package.json whenever you want to use ES modules.

For a CommonJS build you would need to:

• Rename your files from .mjs to .js so the heuristic for determining the module system isn't toggling between ESM and CommonJS for dev/build runs.
• Remove usage of import.meta and use the __dirname global available to CommonJS modules.

Answer 2

Looks like the transpiled code didnt transpile import.meta.url

Since babel is the transpiler, I think we can circle in on that being the focus

Maybe try this babel plugin to transform import.meta when transpiling: https://github.com/javiertury/babel-plugin-transform-import-meta/