[eslint-plugin-import:resolver:vite] require() of ES Module vite.config.js #12

hugomallet · 2023-08-04T11:07:44Z

Hi,

I get this error in eslint console :

[eslint-plugin-import:resolver:vite] require() of ES Module vite.config.js from node_modules/eslint-import-resolver-vite/index.js not supported.
Instead change the require of vite.config.js in node_modules/eslint-import-resolver-vite/index.js to a dynamic import() which is available in all CommonJS modules.

In package.json "type": "module" and I've created this file .eslintrc.cjs (cjs) file :

const path = require('path');

module.exports = {
	settings: {
		'import/resolver': {
			vite: {
				configPath: path.resolve(__dirname, './vite.config.js'),
				namedExport: 'viteConfig',
			},
		},
	},
};

If I understand correctly, the vite plugin is required as cjs because of cjs eslint. But then it cannot require the esm vite config...

What could I do please ?

pzmosquito · 2023-08-08T22:45:04Z

I think the error was clear. with type: 'module' setting, the require() will not work with ESM. Unfortunately eslint-plugin-import does not support dynamic import. So you will have to remove the type: 'module' setting. I'll look into alternative ways of reading vite config file without using require().

n0099 · 2023-12-16T06:59:31Z

With the latest 2.0.0-beta1 that inversed the control of how to get vite config from the inlined require() to our hand, the problem has turned into how to synchronously dynamic import() esm vite.config.js into the cjs based .eslintrc.cjs.
I've found a package import-sync at https://stackoverflow.com/a/77307226/12576620 and https://stackoverflow.com/a/77329422/12576620 which resolved this easily:

settings: {
    'import/resolver': {
        vite: { viteConfig: require('import-sync')('./vite.config.js or ts').default },
    },
},

pzmosquito · 2023-12-16T08:02:17Z

With the latest 2.0.0-beta1 that inversed the control of how to get vite config from the inlined require() to our hand, the problem has turned into how to synchronously dynamic import() esm vite.config.js into the cjs based .eslintrc.cjs. I've found a package import-sync at https://stackoverflow.com/a/77307226/12576620 and https://stackoverflow.com/a/77329422/12576620 which resolved this easily:
settings: {
    'import/resolver': {
        vite: { viteConfig: require('import-sync')('./vite.config.js or ts').default },
    },
},

that's good info! Thanks. I'm hoping the eslint-plugin-import will support the async resolver in the future, so that the vite config can be loaded using Vite's API directly.

n0099 · 2024-02-11T17:47:13Z

vite: { viteConfig: require('import-sync')('./vite.config.js or ts').default },

This will trigger warning about Vite CJS Node API deprecated: vitejs/vite#13928 when running eslint for now:

$ VITE_CJS_TRACE=true yarn eslint src
Trace: The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
    at console.pa (.yarn/berry/cache/@httptoolkit-esm-npm-3.3.0-7df4a4e361-10c0.zip/node_modules/@httptoolkit/esm/esm.js:1:232686)
    at console.trace (.yarn/berry/cache/@httptoolkit-esm-npm-3.3.0-7df4a4e361-10c0.zip/node_modules/@httptoolkit/esm/esm.js:1:233360)
    at warnCjsUsage (.yarn/__virtual__/vite-virtual-d411a2b300/5/n0099/.yarn/berry/cache/vite-npm-5.1.1-b2a0538293-10c0.zip/node_modules/vite/index.cjs:32:3)
    at Object.<anonymous> (.yarn/__virtual__/vite-virtual-d411a2b300/5/n0099/.yarn/berry/cache/vite-npm-5.1.1-b2a0538293-10c0.zip/node_modules/vite/index.cjs:3:1)
    at Mu (.yarn/berry/cache/@httptoolkit-esm-npm-3.3.0-7df4a4e361-10c0.zip/node_modules/@httptoolkit/esm/esm.js:1:266342)
    at Object.run (.yarn/berry/cache/@httptoolkit-esm-npm-3.3.0-7df4a4e361-10c0.zip/node_modules/@httptoolkit/esm/esm.js:1:266075)
    at Object.<anonymous> (.yarn/__virtual__/vite-virtual-d411a2b300/5/n0099/.yarn/berry/cache/vite-npm-5.1.1-b2a0538293-10c0.zip/node_modules/vite/index.cjs:1:27)
    at Object.<anonymous> (.yarn/berry/cache/@httptoolkit-esm-npm-3.3.0-7df4a4e361-10c0.zip/node_modules/@httptoolkit/esm/esm.js:1:278385)
    at .yarn/berry/cache/@httptoolkit-esm-npm-3.3.0-7df4a4e361-10c0.zip/node_modules/@httptoolkit/esm/esm.js:1:272210
    at Generator.next (<anonymous>)

n0099 · 2024-03-05T08:48:45Z

It's completely broken after upgrade vite from 5.1.4 to 5.1.5 due to changes made in vitejs/vite@b20d542#diff-eda401f4a5814309124fd4af535f9fc871b6522c0040aab8bd58d67938b4df43R2:

Oops! Something went wrong! :(

ESLint: 8.57.0

Error: Cannot read config file: .eslintrc.cjs
Error:
        Failed to import from:
            vite.config.ts.
        Options:
            {}
        Require error message:
            node_modules\vite\dist\node\index.js:1
Error: Cannot find module 'vite/runtime'
Require stack:
- node_modules\vite\dist\node\index.js
- vite.config.ts
- node_modules\import-sync\dist\cjs\import.js
- node_modules\import-sync\dist\cjs\index.js
- .eslintrc.cjs
- node_modules\@eslint\eslintrc\dist\eslintrc.cjs
- node_modules\eslint\lib\cli-engine\cli-engine.js
- node_modules\eslint\lib\eslint\eslint.js
- node_modules\eslint\lib\eslint\index.js
- node_modules\eslint\lib\cli.js
- node_modules\eslint\bin\eslint.js
    at Object.<anonymous> (node_modules\vite\dist\node\index.js:1)

    at esmImport (node_modules\import-sync\dist\cjs\import.js:30:15)
    at importSync (node_modules\import-sync\dist\cjs\import.js:52:28)
    at Object.<anonymous> (.eslintrc.cjs:555:59)
    at Module._compile (node:internal/modules/cjs/loader:1378:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at Module.load (node:internal/modules/cjs/loader:1212:32)
    at Module._load (node:internal/modules/cjs/loader:1028:12)
    at Module.require (node:internal/modules/cjs/loader:1237:19)
    at module.exports [as default] (node_modules\import-fresh\index.js:32:59)
    at loadJSConfigFile (node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2583:47)
(node:14540) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

We might need https://github.com/dividab/tsconfig-paths to compliant with https://www.typescriptlang.org/tsconfig#paths in vitejs/vite@b20d542#diff-c939fb298531661c9de72b988f28de92c0d8f1d7d5e6a8926ba640052af4f4c1R9.
Edit: node -r tsconfig-paths/register node_modules/eslint/bin/eslint.js src seems not working.

$ yarn set version latest * pin `[email protected]` due to pzmosquito/eslint-import-resolver-vite#12 (comment) - `vue.vscode-typescript-vue-plugin` in favor of `Vue.volar^2.0.0` behind `@vue/language-server^2.0.0` @ .vscode/extensions.json @ fe

pzmosquito · 2024-03-05T17:53:32Z

found something interesting but I haven't tried it.
eslint/eslint#16864 (comment)

n0099 · 2024-03-06T00:56:43Z

--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -527,2 +527,2 @@
-module.exports = {
+module.exports = (async () => ({
@@ -553,3 +553,2 @@ module.exports = {
-                vite: { viteConfig: require('import-sync')('./vite.config.ts').default },
+                vite: { viteConfig: (await import('./vite.config.ts')).default },
@@ -594 +593 @@ module.exports = {
-};
+}))();

Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for vite.config.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:403:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:285:45)
    at async link (node:internal/modules/esm/module_job:76:21)

https://github.com/privatenumber/ts-runtime-comparison might be helpful

n0099 · 2024-03-06T01:06:19Z

-                vite: { viteConfig: require('import-sync')('./vite.config.ts').default },
+                vite: { viteConfig: require('./vite.config.ts').default },

$ yarn add -D tsx
$ yarn run tsx node_modules/eslint/bin/eslint src
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

works but still using the cjs require() for vite.

-                vite: { viteConfig: require('./vite.config.ts').default },
+                vite: { viteConfig: import('./vite.config.ts') },

thanks to tsx, without awaiting the import also works and using the esm build of vite.

$ yarn add -D tsx $ yarn up vite * using esm `import()` without awaiting it since pzmosquito/eslint-import-resolver-vite#12 (comment) * ignore `.js` extension for rule `import/extensions` @ .eslintrc.cjs @ fe

n0099 · 2024-03-06T04:15:25Z

For convenience adding run eslint scripts alias:

--- a/package.json
+++ b/package.json
@@ -9 +9,2 @@ "scripts": {
+        "eslint": "tsx node_modules/eslint/bin/eslint"

when using yarn pnp:

$ yarn unplug eslint

+        "eslint": "tsx .yarn/unplugged/eslint-npm-*/node_modules/eslint/bin/eslint.js"

…to/eslint-import-resolver-vite#12 (comment) @ package.json $ yarn unplug eslint $ yarn dlx @yarnpkg/sdks vscode $ yarn upgrade-interactive @ fe

n0099 · 2024-06-05T01:13:39Z

When using flat config, we can use static import to import vite config as esm to eslint.config.js that now supports both esm and cjs:

+ import viteConfig from './vite.config.ts';

-                vite: { viteConfig: import('./vite.config.ts') },
+                vite: { viteConfig },

but tsx is still required to import .ts into .js since eslint.config.ts is not a thing.

n0099 · 2024-06-06T03:35:16Z

but tsx is still required to import .ts into .js since eslint.config.ts is not a thing.

When using vscode extension dbaeumer.vscode-eslint>=3.0.5 that supports flat config but not configurable to execute node tsx eslint/lib/api.js:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for vite.config.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:219:36)
    at defaultLoad (node:internal/modules/esm/load:133:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:555:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:436:45)

we can use tsImport() provided by tsx to dynamiclly tsc the vite.config.ts into .js:

import { tsImport } from 'tsx/esm/api'

const viteConfig = await tsImport('./vite.config.ts', import.meta.url);

or tsx.require()

import { require } from 'tsx/cjs/api'

const viteConfig = require('./vite.config.ts', import.meta.url);

but it will trigger #12 (comment)

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

n0099 · 2024-06-06T19:13:25Z

#12 (comment)

For convenience adding run eslint scripts alias:

--- a/package.json
+++ b/package.json
@@ -9 +9,2 @@ "scripts": {
+        "eslint": "tsx node_modules/eslint/bin/eslint"

when using yarn pnp:

$ yarn unplug eslint

+        "eslint": "tsx .yarn/unplugged/eslint-npm-*/node_modules/eslint/bin/eslint.js"

When using api provided by tsx to dynamically import vite.config.ts, we can re-plug the eslint into yarn pnp:

--- a/package.json
-    "dependenciesMeta": {
-        "[email protected]": {
-            "unplugged": true
-        }
-    }

-        "eslint": "tsx .yarn/unplugged/eslint-npm-*/node_modules/eslint/bin/eslint.js"

* fix `Parse errors in imported module '': parserPath or languageOptions.parser is required!`: un-ts/eslint-plugin-import-x#85 (comment) @ eslint.config.js * re-plug eslint: pzmosquito/eslint-import-resolver-vite#12 (comment) @ package.json * fix some violations of eslint rules @ fe

* merge two settings for `import-x/resolver` from `*.{ts,vue}` to globalwide * rename import `stylisticMigrate` to `pluginStylisticMigrate` @ eslint.config.js * re-plug eslint: pzmosquito/eslint-import-resolver-vite#12 (comment) @ package.json * fix some violations of eslint rules @ fe

pzmosquito closed this as completed Sep 13, 2023

pzmosquito mentioned this issue Sep 13, 2023

[eslint-plugin-import:resolver:vite] Cannot use import statement outside a module #13

Closed

n0099 mentioned this issue Dec 19, 2023

@vue/compiler-sfc didn't know anything about vite.config.* ota-meshi/typescript-eslint-parser-for-extra-files#82

Open

2 tasks

n0099 mentioned this issue Jun 5, 2024

New resolver design un-ts/eslint-plugin-import-x#40

Open

n0099 mentioned this issue Jun 6, 2024

[Bug?]: Yarn pnp / sdk generation doesn't work with ESLint new flat config support yarnpkg/berry#6219

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[eslint-plugin-import:resolver:vite] require() of ES Module vite.config.js #12

[eslint-plugin-import:resolver:vite] require() of ES Module vite.config.js #12

hugomallet commented Aug 4, 2023

pzmosquito commented Aug 8, 2023

n0099 commented Dec 16, 2023 •

edited

Loading

pzmosquito commented Dec 16, 2023

n0099 commented Feb 11, 2024 •

edited

Loading

n0099 commented Mar 5, 2024 •

edited

Loading

pzmosquito commented Mar 5, 2024

n0099 commented Mar 6, 2024 •

edited

Loading

n0099 commented Mar 6, 2024 •

edited

Loading

n0099 commented Mar 6, 2024 •

edited

Loading

n0099 commented Jun 5, 2024 •

edited

Loading

n0099 commented Jun 6, 2024 •

edited

Loading

n0099 commented Jun 6, 2024 •

edited

Loading

[eslint-plugin-import:resolver:vite] require() of ES Module vite.config.js #12

[eslint-plugin-import:resolver:vite] require() of ES Module vite.config.js #12

Comments

hugomallet commented Aug 4, 2023

pzmosquito commented Aug 8, 2023

n0099 commented Dec 16, 2023 • edited Loading

pzmosquito commented Dec 16, 2023

n0099 commented Feb 11, 2024 • edited Loading

n0099 commented Mar 5, 2024 • edited Loading

pzmosquito commented Mar 5, 2024

n0099 commented Mar 6, 2024 • edited Loading

n0099 commented Mar 6, 2024 • edited Loading

n0099 commented Mar 6, 2024 • edited Loading

n0099 commented Jun 5, 2024 • edited Loading

n0099 commented Jun 6, 2024 • edited Loading

n0099 commented Jun 6, 2024 • edited Loading

n0099 commented Dec 16, 2023 •

edited

Loading

n0099 commented Feb 11, 2024 •

edited

Loading

n0099 commented Mar 5, 2024 •

edited

Loading

n0099 commented Mar 6, 2024 •

edited

Loading

n0099 commented Mar 6, 2024 •

edited

Loading

n0099 commented Mar 6, 2024 •

edited

Loading

n0099 commented Jun 5, 2024 •

edited

Loading

n0099 commented Jun 6, 2024 •

edited

Loading

n0099 commented Jun 6, 2024 •

edited

Loading