You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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.
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.
@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.
@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.
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:
To Reproduce
create-react-app
project with TypeScript as template (from macos CLI):npx create-react-app cra-typescript --template typescript
.vs-code-prettier-eslint
extension README:a.
npm i -D prettier eslint @typescript-eslint/parser
b. Updated
settings.json
exactly according to instructions: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:
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
npx create-react-app cra-typescript --template typescript
)package.json
Versions (please complete the following information):
5.0.4
1.76.1
16.17.0
8.19.2
2.8.4
8.35.0
5.0.1
System Specifications (please complete the following information):
The text was updated successfully, but these errors were encountered: