I'm creating a new Next.js application.
When i run yarn create-next-app and i start to write javascript code inside Visual Studio Code, the ESlint extension throw back an error every time i digit.
And, naturally, eslint doesn't work.
The error is:
ESLint: Invalid Options: - Unknown options: env, parserOptions, rules - 'parserOptions' has been removed. Please use the 'overrideConfig.parserOptions' option instead. - 'rules' has been removed. Please use the 'overrideConfig.rules' option instead.. Please see the 'ESLint' output channel for details.
This is the image for an immediate visual recognizing:
Eslint extension error on Visual Studio Code
This is my package.json file (the default package.json given by Next.js):
{
"name": "myApp",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "8.4.1",
"eslint-config-next": "12.0.7"
}
}
Thank you for your help.
Solved on my own by wrapping the content of esling.options into overrideConfig in my settings.json vscode file, like this:
"eslint.options": {
"overrideConfig": {
"env": {
"browser": true,
"es6": true
},
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"no-debugger": "off"
}
}
},
This may be obvious to most, but I wanted to add one caveat. The above config fix works, but make sure you do it at the user level as well as the workspace level. If the eslint.options json doesn't have the overrideConfig at the user level config it will continue to error. Sorry if this is obvious, but I just spent the last hour trying to understand why I was continuing to get the invalid options error despite adding the above solution until I realized I was making the change in the workspace only. Hopefully this can save someone a headache.
I was not able to find the exact cause of the problem, but I was able to fix the issue by completely reinstalling vscode. Use this guide to do a clean uninstall.
Related
In an existing node project written in JS we're trying to enable the use of Typescript so we can use it in our ongoing refactoring.
I've added a tsConfig like so:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"rootDir": "./",
"outDir": "./tsOutput",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
},
"include": ["./"]
}
I've also installed the following as dev dependencies:
"#types/express": "^4.17.14",
"#types/node": "^18.11.9",
"#types/node-fetch": "^2.6.2",
"ts-node": "^10.9.1",
"ts-node-dev": "^2.0.0",
"typescript": "^4.9.3"
And I run tsc on build, which runs and generates a js and mapping file. I've run tried this both outputting to a separate directory and removing the outDir in the tsConfig.
To test it works, I added the following class in my test project:
class ExampleClass {
logSomeStuff(stringToLog : string, numberToLog : number, booleanToLog : boolean)
{
console.log(stringToLog);
console.log(numberToLog);
console.log(booleanToLog);
}
}
export default ExampleClass;
Consume it with this JS file:
const { Example } = require("./Example.ts");
function TypescriptConsumerExample() {
const blah = new Example();
blah.logSomeStuff("String", 2, false);
}
module.exports = TypescriptConsumerExample;
And attempt to run this JS test:
const TypescriptConsumerExample = require("../TSExample/TSConsumerExample");
describe("TS test", () => {
it("Should be able to call TS code", () => {
TypescriptConsumerExample();
console.log("Built");
});
});
But I get this warning, which implies that it doesn't understand what TS is:
logSomeStuff(stringToLog : string, numberToLog : number, booleanToLog : boolean)
^
SyntaxError: Unexpected token ':'
Equally, if I run the main project and try and call this TS class from index.js:
function TSTest()
{
console.log("Success!");
}
export default TSTest;
I get this error:
TypeError: TSTest is not a function at Object.<anonymous>
Your tsconfig.json probably should have allowJs: true to allow js in the project at all.
Use tsx watch --inspect src/server for development, tsx src/server to launch.
tsx allows running whatever import/require js/ts modules at once (conpability list)
I would recomment you to convert the entire project into .ts first (by renaming), so file extensions are consistent, in one big git commit, so blame don't break on files that were renamed and edited at once
Two ways you can go about this. You can set a script in your package.json to compile the TS and then run that compiled typescript like so:
"scripts": { "start": "tsc && node dist/server.js" },
Alternatively, nodemon is a super useful tool that you may already be using..and it understands typescript. You can set another script like so:
"dev": "npx nodemon ./src/server.ts",
This article by Cole Gawin goes into the details of standing up the latter https://blog.logrocket.com/configuring-nodemon-with-typescript/
In addition to the answer provided by Dimava - adding the allowJs flag to tsconfig.json, it also turned out I missed changing this line in package.json to point to the outputs index.js file:
"main": "./tsOutput/index.js",
In combination with the following:
"scripts": {
"start": "tsc && node --unhandled-rejections=warn ./tsOutput/index.js",
"dev": "tsc && node --unhandled-rejections=warn ./tsOutput/index.js",
I am creating an NPM package called notifman. Here's what I did:
Created the package.json:
{
"name": "notifman",
"version": "1.0.5",
"description": "Advanced, Lightweight and Powerful Notification Library For Plain JS",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev": "npx nodemon index.js"
},
"keywords": [
"notification",
"frontend",
"js",
"plain"
],
"author": "...",
"license": "MIT",
"dependencies": {
"notifman": "^1.0.3"
},
"devDependencies": {
"nodemon": "^2.0.20"
}
}
I wrote the index.js:
console.log("hello world");
Wrote a README.md
Tested the package in Node.js and it worked fine.
Originally, I wanted the package to work in the browser, so I tried changing the code in index.js to:
export default function getRoot() {
return document.getElementById("root");
}
Then, I wanted to test using import/export syntax, I suppose it is:
import getRoot from "notifman";
getRoot.textContent = "hello world";
The error message is:
Uncaught TypeError: Failed to resolve module specifier "notifman". Relative references must start with either "/", "./", or "../".
Partially Solved:
I just used Webpack, and it worked fine. But I am sure Webpack is not required. I want it to work WITHOUT webpack. This is why this is partially solved.
"type": "module"
**add this to your package.json just below main **
[Build Error in parcel # 2.7.0 start when I am trying to add external index.html file in the main I also ignored the main but it also doesn't work for me. Will please someone help me to solve this problem It also not working with JavaScript file when I added externally and also getting error with html file but I want to add the html file but as a solution I try to add JavaScript file but it also doesn't work for me. Will please someone solve this issue or tell me how to solve this issue
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "unrelated.js",
"targets": {
"main": false
},
"scripts": {
"start": "parcel start index.html",
"build": "parcel build index.html"
},
"author": "Meelad Sultan",
"license": "ISC",
"devDependencies": {
"parcel": "^2.7.0"
}
}
enter code here
At last I can find the solution of my problem after almost a day if someone else facing the same problem they just do add the **Browsers list ** in the package.json file before script and ignore the main target and also set the parcel to latest then the parcel will run successfully and do not give any server error or build error. And don't forget to run periodically npx browerlist#latest --update-db. It will update your package-lock file with new caniuse-lite version. In this case, you will be sure that last two version or > 0.2% will target what you expect
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "unrelated.js",
"target": {
"main": false
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"start": "parcel index.html "
},
"author": "Meelad Sultan",
"license": "ISC",
"devDependencies": {
"#parcel/transformer-sass": "^2.7.0",
"parcel": "latest"
},
"dependencies": {
"sass": "^1.55.0"
}
}
Meteor version 1.7.0.5
Using meteortesting:mocha
I have a very simple meteor react app. I added a test file in imports/startup/simple-schema.tests.js
describe('Todos_item', function () {
console.log('Todo');
});
I was running npm run test-app so it should be logged in console but that file actually doesn't run. But when I added this snippet to my tests/main.js Todo is logged in console. So am I missing something.
My directory tree
package.json
{
"name": "meteor-bootstrap",
"private": true,
"scripts": {
"start": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer"
},
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"meteor-node-stubs": "^0.4.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"simpl-schema": "^1.5.3"
},
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
},
"testModule": "tests/main.js"
},
"engines": {
"node": "8.11.4"
}
}
Any help will be greatly appreciated. Thanks in advance.
New Meteor apps since 1.7 have eager loading turned off by default (which is causing your problem)
The behaviour is controlled by the meteor section in your package.json.
To restore the eager loading behaviour for tests, delete the testModule key-value pair from your package.json. It should look like this:
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
}
},
If you want to restore pre-1.7 behaviour for all files, just delete the whole meteor section from package.json
If you don't want to use eager loading, you will need to import all of your test files from the tests/main.js file
Also one thing to add when with #Fred answer importing test files have to use require not import though I am not sure is it due to my node version or not I am using my node version v6.11.1
I used the following example to test tail call recursion with Babel and the es2016 preset:
'use strict';
try {
function r(n) {
if (n%5000===0)
console.log(`reached a depth of ${n}`);
r(n+1);
}
r(0);
} catch (e) {
if (!(e instanceof RangeError))
throw e;
else
console.log('stack blown');
}
My package.json file is:
{
"name": "tail-call-optimization",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel es6 --out-dir es5 --source-maps",
"watch": "babel es6 --out-dir es5 --source-maps --watch",
"start": "node es5/app.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.6.5",
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2016": "^6.0.10",
"babel-runtime": "^6.6.1"
},
"dependencies": {
"babel-polyfill": "^6.7.4",
"source-map-support": "^0.4.0"
}
}
... and the .babelrc is simply:
{
"presets": ["es2016"]
}
Running the above with:
npm run build && npm run start
... results in the following console output:
reached a depth of 0
reached a depth of 5000
reached a depth of 10000
reached a depth of 15000
stack blown
Indeed, looking at the transpiled file in the es5 directory, there's nothing to suggest that TCO has been implemented.
Am I missing something?
My node version is 4.3.2.
Looking at: https://babeljs.io/docs/learn-es2015/ one reads:
Temporarily Removed in Babel 6
Only explicit self referencing tail recursion was supported due to the complexity and performance impact of supporting tail calls globally. Removed due to other bugs and will be re-implemented.
So I guess it's not presently implemented.
None of the "official" Babel 6 plugins / presets currently implements TCO. babel-preset-es2016 is not an "official" preset. Unless TCO relies on parser support in Babylon (off the top of my head I wouldn't think so, but I'm not sure) then I suppose a userland plugin / preset could implement it, and perhaps does (but not that I know of). Here is the issue tracking eventual "official" re-implementation: T2614. If someone wants to PR that link into the Learn ES2015 docs #Marcus mentioned ping me here and I'll merge it.