search

idahogurl / vs-code-prettier-eslint

A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.
MIT License
185 stars 46 forks source link

Extension fails format on save even with fresh CRA TS project #155

Closed jcphua closed 1 year ago

jcphua commented 1 year ago

Describe the bug

Basic functionality of formatting on save does not work for TypeScript project. The immediate error seen in the Prettier Eslint output is:

Error: Failed to load plugin 'react' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''

To Reproduce

  1. As a barebones and easily replicatable starting point, created a new create-react-app project with TypeScript as template (from macos CLI): npx create-react-app cra-typescript --template typescript.

  2. Followed the installation instructions from the vs-code-prettier-eslint extension README: a. npm i -D prettier eslint @typescript-eslint/parser b. Updated settings.json exactly according to instructions:

    {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"editor.formatOnPaste": false, // required
"editor.formatOnType": false, // required
"editor.formatOnSave": true, // optional
"editor.formatOnSaveMode": "file", // required to format on save
"files.autoSave": "onFocusChange" // optional but recommended
}
    • c. My indicator for successful operation is just simply for correct indention of TypeScript source code.

    However even attempting a simple save of file src/App.tsx at this point (no change to the default generated boilerplate contents of this file), and also not yet beginning setup of prettier or eslint config files/properties), seemingly has no effect.

    The only indicator of a failure is when viewing VSCode Output pane (with Prettier Eslint output selected), you see the following:

Error: Failed to load plugin 'react' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received '' 
TypeError: Failed to load plugin 'react' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
    at new NodeError (node:internal/errors:371:5)
    at createRequire (node:internal/modules/cjs/loader:1281:13)
    at Object.resolve (<folder>/cra-typescript/node_modules/@eslint/eslintrc/lib/shared/relative-module-resolver.js:23:16)
    at Object.ModuleResolver.resolve (<folder>/cra-typescript/node_modules/@rushstack/eslint-patch/src/modern-module-resolution.ts:235:36)
    at ConfigArrayFactory._loadPlugin (<folder>/cra-typescript/node_modules/@eslint/eslintrc/lib/config-array-factory.js:1067:33)
    at ConfigArrayFactory._loadPlugin (<folder>/cra-typescript/node_modules/@rushstack/eslint-patch/src/modern-module-resolution.ts:243:35)
    at <folder>/cra-typescript/node_modules/@eslint/eslintrc/lib/config-array-factory.js:958:33
    at Array.reduce (<anonymous>)
    at ConfigArrayFactory._loadPlugins (<folder>/cra-typescript/node_modules/@eslint/eslintrc/lib/config-array-factory.js:954:22)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (<folder>/cra-typescript/node_modules/@eslint/eslintrc/lib/config-array-factory.js:754:44)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (<folder>/cra-typescript/node_modules/@eslint/eslintrc/lib/config-array-factory.js:694:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at ConfigArrayFactory.create (<folder>/cra-typescript/node_modules/@eslint/eslintrc/lib/config-array-factory.js:489:16)
    at createCLIConfigArray (<folder>/cra-typescript/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:168:47)
    at CascadingConfigArrayFactory.clearCache (<folder>/cra-typescript/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:339:32)
    at new ESLint (<folder>/cra-typescript/node_modules/eslint/lib/eslint/eslint.js:449:32)
    at Pge (~/.vscode/extensions/rvest.vs-code-prettier-eslint-5.0.4/dist/extension.js:180:69)
    at ~/.vscode/extensions/rvest.vs-code-prettier-eslint-5.0.4/dist/extension.js:188:700
    at Lge (~/.vscode/extensions/rvest.vs-code-prettier-eslint-5.0.4/dist/extension.js:180:1439)

Have performed the same preliminary steps as per above on a default CRA (non-TypeScript) project (via npx create-react-app cra-javascript) and can see successful formatting on save and no errors on output, so my local environment does not appear to be the issue.

Expected behavior

No errors in output pane, successful indentation/formatting on save of TypeScript file.

Example Project

Versions (please complete the following information):

System Specifications (please complete the following information):

idahogurl commented 1 year ago

@jcphua This is an issue with @rushstack/eslint-patch. An issue has been created on their repository page. In the meantime, you can find the fix explained here.

The issue cannot be fixed by the extension since it's using local node_modules so the patch file needs to be created locally. I could perhaps have a command that can run to create the patched file locally. Would a FAQ in discussions for this error and other other common errors help? Or I could update the Troubleshooting area to include the error message and what to do about it.

jcphua commented 1 year ago

@idahogurl Thanks for providing the link to the manual/local fix.

For visibility, and others facing the same issue maybe it's a good idea to mention it in FAQ/other documentation, but since you've supplied the details on the issue and fix, I'm happy for this issue to be closed.

Cheers!