bug: ReferenceError: require is not defined in ES module scope, you can use import instead

[neslinesli93]

trafficstars

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Stencil ESLint Version

1.0.0

Current Behavior

Hey, I've been trying to run eslint with this plugin and I've been unable to do because of the line containing the require in the bundle:

const jsdom = require("jsdom");

This happens both on an old project and on a new project that i just scaffolded with the latest version of stencil and of this plugin. The project can be seen here: https://github.com/neslinesli93/test-stencil-eslint

Just run the following commands to reproduce the issue:

yarn
yarn lint

The error is:

yarn run v1.22.22
$ eslint src

Oops! Something went wrong! :(

ESLint: 9.22.0

ReferenceError: require is not defined in ES module scope, you can use import instead
    at file:///home/neslinesli93/STUFF/test-stencil-eslint/node_modules/@stencil/eslint-plugin/dist/index.js:1047:15
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected Behavior

The linter runs just fine

Steps to Reproduce

• Clone https://github.com/neslinesli93/test-stencil-eslint
• Run yarn and yarn lint

Code Reproduction URL

https://github.com/neslinesli93/test-stencil-eslint

Additional Information

No response

[MatteoFeltrin]

After 2 days of digging, it turned out that using eslint.config.ts resolved the problem for me. Had also to use the ts parser due to this.

Anyway JSDOM is importable even through standard ES6 import. import { JSDOM } from 'jsdom' is perfectly fine.

Should we open a PR to fix this? I have no clue why someone would have used a require inside a ES6 context

[zovorap]

After 2 days of digging, it turned out that using eslint.config.ts resolved the problem for me. Had also to use the ts parser due to this.

@MatteoFeltrin can you share how you used ts parser? I tried different things, but nothing works.

[MatteoFeltrin]

After 2 days of digging, it turned out that using eslint.config.ts resolved the problem for me. Had also to use the ts parser due to this.

@MatteoFeltrin can you share how you used ts parser? I tried different things, but nothing works.

This is my eslint.config.ts (I removed useless things)

import { defineConfig } from "eslint/config";
import stencil from '@stencil/eslint-plugin';
import tsEslint from "typescript-eslint";

export default defineConfig([
  stencil.configs.flat.base,
  stencil.configs.flat.recommended,
  tsEslint.configs.recommended,
  {
    files: [
      "**/*.ts",
      "**/*.tsx",
    ],
    languageOptions: {
      parser: tsEslint.parser,
      parserOptions: {
        project: "./tsconfig.json",
      }
    },
  }
]);

[valadas]

@zovorap If you need a working example, you can run locally, here is what I did https://github.com/DNNCommunity/dnn-elements/tree/develop/packages/stencil-library Note that for .ts to work you also need jiti as a dev-dependency

If that does not get you to a working state please share either a public example we can help on or give us some details on what errors you encounter.

[zovorap]

@MatteoFeltrin @valadas Thank you guys for the responses. We decided not to continue with eslint+prettier, since it's taking too much effort to setup our projects and also it's very slow (for some reason recent update made it unbearable). We're switching to Biome instead.

[MatteoFeltrin]

@zovorap were you able to use stencil rules with Biome?

[zovorap]

@zovorap were you able to use stencil rules with Biome?

I don't think Biome has Stencil support yet. Also the eslint+prettier rules are not matching Biome 1 to 1. But so far I didn't find anything that would make Biome not usable for our projects. The only concern I have at the moment - the latest version of Biome doesn't work on RHEL7 (we still have some servers running it)

[YcZzy]

The "type": "module" is present in the package.json of the plugin, but the require() is used inside its dist/index.js.

[christian-bromann]

import { JSDOM } from 'jsdom' is perfectly fine.

I have merged a community PR with a fix for this.

Furthermore I have updated the build command to compile this project for ESM and CJS.