Trying to import a config file made in civet in a mjs file

[la-magra]

Hello, I'm attempting to import a configuration file made in civet eslint.config.civet into eslint.config.js.

So far these two attempts have failed:

// eslint.config.mjs attempt #1
import "@danielx/civet/register"
import config from "./eslint.config.civet"

export default config

and

// eslint.config.mjs attempt #2
import { register } from 'node:module';
import { pathToFileURL } from 'node:url';

// Register the Civet ESM loader so Node can understand .civet files
register('@danielx/civet/esm', pathToFileURL('./'));

// Import and export your actual configuration
import config from './eslint.config.civet';
export default config;

with the following config file

// eslint.config.civet
import js from "@eslint/js"
import globals from "globals"
import { defineConfig } from "eslint/config"

export default defineConfig([
  . files: ["**/*.{js,mjs,cjs}"]
    plugins: { js }
    extends: ["js/recommended"]
    languageOptions: { globals: globals.browser }
])

Both attempts send:

$ yarn eslint test.js

Oops! Something went wrong! :(

ESLint: 10.0.3

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".civet" for ./eslint.config.civet
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:185:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:211:36)
    at defaultLoadSync (node:internal/modules/esm/load:158:16)
    at #loadAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:796:12)
    at #loadSync (node:internal/modules/esm/loader:816:49)
    at ModuleLoader.load (node:internal/modules/esm/loader:781:26)
    at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:526:31)
    at #getOrCreateModuleJobAfterResolve (node:internal/modules/esm/loader:577:36)
    at afterResolve (node:internal/modules/esm/loader:625:52)
    at ModuleLoader.getOrCreateModuleJob (node:internal/modules/esm/loader:631:12)

Strangely, using an import in NODE_OPTIONS seems to work with the exact same files:

$ NODE_OPTIONS="--import @danielx/civet/register" yarn eslint test.js
./test.js
   5:1   error  Definition for rule 'import/namespace' was not found  import/namespace

Am I missing something when using importing the register in eslint.config.mjs?

env:

Node.js v24.14.0
$ yarn civet --version
0.11.5

[edemaine]

Unfortunately, Node in ESM node resolves and links the full static import graph before it runs the module body, so you can't load the Civet loader before the sibling import of ./eslint.config.civet. See this NodeJS note:

Do not use static import statements to load modules that need to be customized in the same module that registers the hooks, because static import statements are evaluated before any code in the importer module is run, including the call to registerHooks(), regardless of where the static import statements appear in the importer module.

This is why --import (via command-line argument or NODE_OPTIONS) is the recommended way. You could make your own wrapper for eslint... or perhaps we should add one to our eslint plugin...

[la-magra]

Another option could be to use cjs instead then?

[edemaine]

Oh yes, I think require would solve all of these problems:

require("@danielx/civet/register")
module.exports = require("./eslint.config.civet")

Also await import should work (but haven't tested):

import "@danielx/civet/register"
export default (await import "./eslint.config.civet").default

[la-magra]

We went with

// eslint.config.mjs
import "@danielx/civet/register"
const eslintconfig = await import('./eslint.config.civet')
export default eslintconfig.default

because

// eslint.config.mjs
import "@danielx/civet/register"
export default await import("./eslint.config.civet").default //didn't work

[edemaine]

Sorry, I parenthesized wrong. It should be

export default (await import "./eslint.config.civet").default

[edemaine]

New solution for eslint specifically: eslint-plugin-civet@0.1.0 (via #1869) provides a civetlint script wrapping eslint that supports configuration directly in eslint.config.civet (using ideas from this thread). Let us know if it helps!

[a666]

This is very welcome.
I'll definitively give it a look, thanks.

[la-magra]

Indeed, it looks good.