I have been using vscode prettier for few months now. I always used it to auto format my codes with vscode shortcut Shift + Alt + F or type >Format Document in command palette
But all of a sudden, vscode gave me this error this error msg: "invalid prettier configuration file detected. See log for details.". This happend after update vscode to v1.53
When I click on "show Log". It show me this:. (It is much much more longer of cause, but I think here is the most import part)
["ERROR" - 2:50:11 PM] Invalid prettier configuration file detected.
["ERROR" - 2:50:11 PM] Must use import to load ES Module: /home/koonfoon/git-repos/koonfoon/someRepo/.prettierrc.js
require() of ES modules is not supported.
require() of /home/koonfoon/git-repos/koonfoon/someRepo/.prettierrc.js from /home/koonfoon/.vscode-server/extensions/esbenp.prettier-vscode-5.9.1/node_modules/prettier/third-party.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename .prettierrc.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/koonfoon/git-repos/koonfoon/someRepo/package.json.
Inside my package.json has value "type": "module".
This is how my .prettierrc.js looks like:
// .prettierrc.js
module.exports = {
semi: true,
trailingComma: "all",
singleQuote: true,
printWidth: 120,
tabWidth: 4
};
.eslintrc.js:
// .eslintrc.js
module.exports = {
"env": {
"commonjs": true,
"es2021": true,
"node": true
},
"extends": [
//"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
}
};
Please note: it was working fine until vscode updated to v1.53
My repo is written in typescript.
I have no ideal what cause this error.
Please help.
Thank you.
Related
I am working on a legacy project which uses RequireJs to load and resolve all the dependencies. It works fine on modern browsers, but i need to add support for IE11.
I tried to use babel 7 with #babel/preset-env with following .babelrc
{
"presets": [
["#babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"browsers" : ["ie>=11"]
},
"modules": false
}]
],
"compact": false
}
the import statements injected by the preset as following
import "core-js/modules/es.function.name.js";
cause error "import statements can't be used outside a module". Even when I use modules: "amd", then core-js is imported as
define(["core-js/modules/es.array.filter.js", "core-js/modules/es.object.to-string.js", "core-js/modules/es.string.includes.js", "core-js/modules/es.function.name.js", "core-js/modules/es.regexp.exec.js", "core-js/modules/es.string.split.js", "core-js/modules/es.string.small.js", "core-js/modules/es.string.search.js"], function (_esArrayFilter, _esObjectToString, _esStringIncludes, _esFunctionName, _esRegexpExec, _esStringSplit, _esStringSmall, _esStringSearch) {
"use strict";
//...
});
which throws error like "define is not defined in require.js".
When using useBuiltIns: "entry", and then including core-js as
require(["core-js", ../other modules], function(corejs, ...){
}
)
in the main.js file, it fails to correctly resolve the path of the files even though I have included the path to core-js in require.config.paths.
I tried #babel/runtime and #babel/plugin-transform-runtime but no luck there.
So my question is what would be the best way to add babel and the required polyfills in my RequireJs project so that it is compatible with IE 11?
I've a outdated app that uses very older few packages those doesn't support ES Module as an example file-type package. So if you setup babel and node HTTP server with and then install file-type package then start building and running will throw error message like below:
Error [ERR_REQUIRE_ESM]: require() of ES Module E:\test\testbabel\node_modules\file-
type\index.js from E:\test\testbabel\dist\index.js not supported.
Instead change the require of E:\test\testbabel\node_modules\file-type\index.js in
E:\test\testbabel\dist\index.js to a dynamic import() which is available in all CommonJS
modules.
at Object.<anonymous> (E:\test\testbabel\dist\index.js:10:17) {
code: 'ERR_REQUIRE_ESM'
}
I tried this on a fresh project though my old project has an outdated config or so, It still throwing this error
Here are my index.js codes
import http from 'http';
import { fileTypeFromFile } from 'file-type';
const server = http.createServer((req, res) => {
res.end('Hello from the server');
}).listen(4001);
console.log('Server is up and running');
export default server;
file package.json.
{
"name": "testbabel",
"version": "1.0.0",
"description": "test babel with http or express",
"main": "index.js",
"scripts": {
"build": "babel index.js -d dist",
"start": "npm run build && node dist/index.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.18.2",
"#babel/plugin-transform-modules-commonjs": "^7.18.2",
"#babel/preset-env": "^7.18.2"
},
"dependencies": {
"file-type": "^17.1.1"
}
}
I just tried to import the package and got the errors above.
attempt:
I thought a converter might help so used #babel/plugin-transform-modules-commonjs but still didn't help, and seems no effect on including that package
I'm not sure but added some tweaks on package.json like "type": "module" "type": "commonjs" didn't help at all.
what is the easiest solution for this issue and how do we fix it?
Note: I saw people were going back to the supported package instead of new one which doesn't make sense to me as a solution.
Option1(babel with mocha): Rename "index.js" to "index.mjs" and modify file-type's pacakage.json ("index.js" to "index.mjs"), then leave Babel to transpile for you.
// babel-register.js
const babel_register = require("#babel/register").default;
babel_register({
ignore: [
// Only work on Project-wide configuration
// overrides ignore can transpile packages(modules) from node_modules (https://babeljs.io/docs/en/babel-register/#ignores-node_modules-by-default)
],
});
Use babel.config instead of .babelrc
//.mocharc.js
require("./babel-register");
module.exports = {
// https://github.com/mochajs/mocha/blob/v8.4.0/example/config/.mocharc.js
ui: "bdd",
timeout: 5000,
recursive: true,
};
Option2(babel only): Using dynamic import expression
async function doSomething() {
const {fileTypeFromStream} = await import("file-type");
}
and
["#babel/preset-env", {
exclude: ["proposal-dynamic-import"]
}]
Avoiding Babel tanspile dynamic import expression
Prettier in VS Code uses the wrong indentation, even after I changed all the places I can think of to a width of "4".
Here are my file contents (some are maybe not necessary, but I added them while trying to fix it):
c:\Users\jp\Documents\Repositories\Game\Client\.prettierrc.js
module.exports = {
semi: true,
trailingComma: "none",
singleQuote: false,
printWidth: 120,
tabWidth: 4,
endOfLine: "auto",
trailingComma: "none"
};
c:\Users\jp\Documents\Repositories\Game\Client\.editorconfig
indent_size = 4
c:\Users\jp\Documents\Repositories\Game\Client\.eslintrc.js
module.exports = {
parser: "#typescript-eslint/parser", // Specifies the ESLint parser
parserOptions: {
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
sourceType: "module", // Allows for the use of imports
ecmaFeatures: {
jsx: true // Allows for the parsing of JSX
}
},
settings: {
react: {
version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
}
},
extends: [
"plugin:react/recommended", // Uses the recommended rules from #eslint-plugin-react
"plugin:#typescript-eslint/recommended", // Uses the recommended rules from the #typescript-eslint/eslint-plugin
"plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
"prettier"
],
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "#typescript-eslint/explicit-function-return-type": "off",
"no-var": "error", // preference for let and const only
"prefer-const": "error",
"react/react-in-jsx-scope": "off",
"#typescript-eslint/no-empty-function": "off",
"react/prop-types": "off",
"prettier/prettier": [
"warn",
{
semi: true,
trailingComma: "none",
singleQuote: false,
printWidth: 120,
tabWidth: 4,
endOfLine: "auto",
trailingComma: "none"
}
]
}
};
c:\Users\jp\Documents\Repositories\Game\Client\.vscode\settings.json
{
"editor.formatOnSave": true,
"editor.formatOnType": true,
"prettier.tabWidth": 4,
"editor.tabSize": 4,
"jestrunner.jestCommand": "npm run test -- --watchAll=false"
}
My VS Code configuration is set to "4,", and in the bottom bar in VS Code it's set to "4". I also set "detect indendation" to false.
Here is what the Prettier extension output says when I format the document:
["INFO" - 17:18:30] Formatting file:///c%3A/Users/jp/Documents/Repositories/Game/Client/src/App.tsx
["INFO" - 17:18:30] Using config file at 'c:\Users\jp\Documents\Repositories\Game\Client\.prettierrc.js'
["INFO" - 17:18:30] Using ignore file (if present) at c:\Users\jp\Documents\Repositories\Game\Client\.prettierignore
["INFO" - 17:18:30] File Info:
{
"ignored": false,
"inferredParser": "typescript"
}
["INFO" - 17:18:30] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 17:18:30] Prettier Options:
{
"filepath": "c:\\Users\\jp\\Documents\\Repositories\\Game\\Client\\src\\App.tsx",
"parser": "typescript",
"semi": true,
"trailingComma": "none",
"singleQuote": false,
"printWidth": 120,
"tabWidth": 3,
"endOfLine": "auto"
}
["INFO" - 17:18:30] Formatting completed in 0.027ms.
It even says it found the right configuration file, yet uses the wrong indentation.
I restarted VS Code while making the changes to make sure nothing was cached.
In the parent path no .editorconfig is present.
I just don't have any idea where Prettier may take the wrong indentation from...
Edit: When I use the "Quick Fix" with "Fix all prettier/prettier problems", it uses the correct indentation. Formatting on save or Using "Format document" uses the wrong one. Output of the extension output window is the same.
Check if your detect indentation has been enabled. Disable it.
It's not obvious at first, but prettier has order of reading custom configs and is this one according to documentation:
Prettier uses cosmiconfig for configuration file support. This means you can configure Prettier via (in order of precedence):
"prettier" key in your package.json file.
prettierrc file written in JSON or YAML.
.prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
.prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
.prettierrc.toml file.
I can only assume you forgot to check configuration in package.json, and remove these settings from there.
I'm working on a React project in vscode. I noticed a few days ago that any of my imports that point to a directory with an index.js/jsx file in them cannot be resolved by cmd+clicking on the import or the function name.
I get an error in the bottom right "Unable to open : File is a directory"
I have the following in my jsconfig.json file:
{
"compilerOptions": {
"allowSyntheticDefaultImports": false,
"target": "es2017",
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"#/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"**/node_modules",
"dist"
]
}
I've tried:
Removing the jsconfig entirely
Various combinations of module import/export patterns
Various combinations of paths/baseUrl/other options in the jsconfig file
Disabling all extensions
Nothing seems to work. The only way I get cmd+click to work is if I point my imports directly at the component itself, or directly at the index.js file.
Does anyone have any insights, please? Googling hasn't shone much light on anything. It's not the end of the world as I cmd+t to most things but it sure is annoying. FWIW Webstorm handles the imports without any issues. Cheers.
EDIT: I forgot to mention. For added spiciness, the cmd+click works for a few seconds while vscode loads. Then "something" happens and it starts throwing the error. Other projects seem to be ok.
I think I may have solved it by adding a tsconfig.json to the project root with the same paths etc. I can now reliably click on import and see function definitions on hover.
If anyone has a similar problem, try the following:
{
"compilerOptions": {
"moduleResolution": "node",
"esModuleInterop": true,
"resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"#/*": [
"src/*"
]
},
},
"include": [
"src/**/**.ts",
"tests/**/*.ts"
],
"exclude": [
"node_modules"
]
}
I feel like I must be missing something really simple here, but for all my searching and going over the docs, I just cannot find a solution to this problem.
I have an inherited file structure (which at the moment cannot change) that looks like this:
- Folder 1
-Web Files Folder
- Folder 2 (root)
- .eslintrc.js
Folder 1 and 2 are siblings of one another, my main set of js, jsx, ts and tsx are set up in the Web Files Folder, and my eslint and webpack configs, package.json and entry point files are all in Folder 2.
I cannot seem to get the IDE (in this case VS Code) to effectively lint the files within the Web Files Folder. I have tried a whole host of things, the latest of which was trying to use overrides in my .eslintrc.js file to point to the relevant directory:
module.exports = {
env: {
browser: true,
es6: true,
jest: true,
jquery: true,
node: true
},
extends: [
'eslint:recommended',
'eslint-config-prettier',
'plugin:#typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:jsx-a11y/recommended',
'prettier',
'prettier/#typescript-eslint'
],
parser: '#typescript-eslint/parser',
parserOptions: {
jsx: true,
ecmaVersion: 2020
},
plugins: ['#typescript-eslint', 'react', 'prettier', 'jsx-a11y', 'jest'],
root: true,
rules: {
'array-callback-return': 0,
'consistent-return': 0,
...
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
}
},
react: {
version: 'detect'
}
}
overrides: [
{
files: ['../Folder 1/Web Files Folder/*.js', '../Folder 1/Web Files Folder/*.jsx', '../Folder 1/Web Files Folder/*.ts', '../Folder 1/Web Files Folder/*.tsx']
},
]
};
This results in the error in the Eslint console: Invalid override pattern (expected relative path not containing '..')
However nothing I have tried works. I am not worried about the linting in the build, only getting the errors to appear in the IDE and resolve on save (which works perfectly if I place the files within Folder 2)
I am looking for a solution which I can use in my eslintrc.js file rather than any changes to settings in the IDE if possible. Something like
project: ['./**/*', '../Folder 1/Web Files Folder/**/*']