We Keep Coding

generated-stories-entry.js error for rule 'import/no-unresolved'

I have added storybook to my Vue project with vue add storybook.
This has added several dependencies to my project, e.g. in my package.json I find this among others:
"vue": "~2.6.14",
"#storybook/vue": "6.4.19",
"vue-cli-plugin-storybook": "~2.1.0",
"eslint": "~6.8.0",
Now I am trying to run the storybook server with npm run storybook:serve but I get an error:
I have been trying different things, like configuring the 'import/no-unresolved' rule to be off, emitError: false on the eslist-loader inside .eslintrc, skipping the linter plugin in the webpack configuration, etc. Nothing worked and each attempt just produced new errors.
Currently I have no explicit es-linter nor webpack configuration at all. But if I comment a line inside node_modules/eslint-loader/index.js like this:
// emitter(new ESLintError(messages));
then it all works.
I don't want to be commenting out lines inside a library, I would like to have a proper solution and understand what is happening.

I found the answer myself. I had to add the eslint-plugin-import package:
npm install eslint-plugin-import
And add the plugin to the eslint configuration:
"plugins": [
"import"
]

For me the suggested answer didn’t work, what fix it in the end was to ignore those files in eslint configuration:
"ignorePatterns": [
"generated-stories-entry.js",
"storybook-init-framework-entry.js"
],

mocha.opts deprecated, how to migrate to package.json?

I'm working on a massive project and since last week I updated mocha, Now we are getting warning:
DeprecationWarning: Configuration via mocha.opts is DEPRECATED and
will be removed from a future version of Mocha. Use RC files or
package.json instead.
I want to migrate the options to package.json but there is no good migration guide. all posts on GitHub with similar questions are all answered "see the docs". But the docs doesn't show how to transfer one option from mocha.opts to package.json, there is no information on how it should be formatted. Only thing I can find is that the "spec" property is the pattern for files to run. Nothing else seems implicit to me.
Our mocha.opts file:
--reporter dot
--require test/mocha.main
--recursive src/**/*.test.js
--grep #slow --invert
My attempt which doesn't work:
"mocha": {
"reporter": "dot",
"require": "test/mocha.main",
"spec": "src/**/*.test.js",
"grep": "#slow --invert"
},
Please explain how I should format this configuration block in order to achieve samme behaviour as when using the options from the above mocha.opts

I too had some difficulties finding the exact solution for migrating to new standards and could finally resolve those. I hope I'm not too late and I can still help you.
So first thing, you would need a new config file to replace mocha.opts. Mocha now offers quite some variations of file formats which can be used for it. You can find these here in their GIT. I took .mocharc.json and will be using it for further examples. Although adding it didn't change anything just the way it shows no effect for you too.
The catch was to point mocha test script to this config file in package.json. Provide --config flag in the test script in the scripts section in your package.json like below.
"scripts": {
"test": "mocha --config=test/.mocharc.json --node-env=test --exit",
"start": "node server"
}
Now you can update your configs in the .mocharc.json file and they should reflect correctly. Below is an example of it.
{
"diff": true,
"extension": ["js"],
"package": "../package.json",
"reporter": "spec",
"slow": 1500,
"timeout": 20000,
"recursive": true,
"file": ["test/utils/helpers.js", "test/utils/authorizer.js"],
"ui": "bdd",
"watch-files": ["lib/**/*.js", "test/**/*.js"],
"watch-ignore": ["lib/vendor"]
}
I'm using file property to define which files should go first as they need to be executed first. They will be executed in the order you provide them in the file array. Another property you can play around is slow whose value defines whether mocha consider the time taken to execute any test case as slow or not.

Check out this link to see the new format of the options file for mocha:
https://github.com/mochajs/mocha/blob/master/example/config/.mocharc.yml
Basically you need a .mocharc.yml, or .mocharc.json, (there are a couple more formats) to set the mocha configurations. I came to this POST hoping to find an answer too. Hope this is helpful for you!

I ended up getting the package.json working by using an array instead of the string literals you did.
ex:
"mocha": {
"require": ["tsconfig/register"]
}
Might be worth a try!

Seems like mocha won't check the package.json for config by default so you need to pass --package package.json.

/* This example illustrates how to configure mocha globally
*1. add the 'mocharch.json' to link mocha to the 'package.json' like so:
*/
{
"package": "./package.json"
}
/* 2. in the 'package.json' add: */
"mocha": {
"recursive": "true"
}

The answer by Rathore is great, but I just wanted to point out that if you just add the .mocharc.json file to your base directory, you don't need to specify "--config=test/.mocharc.json" in your package.json, it just finds it automatically.

you can create .mocharc.json in project root folder.
{
"spec": "src/tests/**/*.ts",
"require": "ts-node/register"
}
in package.json add mocha property.
"mocha": {
"spec": ["src/tests/**/*.ts"],
"require": ["ts-node/register"]
}
js project change file name.

Where should I insert '#babel/polyfill' into?: main.js or each modules [duplicate]

I just started to use Babel to compile my ES6 javascript code into ES5. When I start to use Promises it looks like it's not working. The Babel website states support for promises via polyfills.
Without any luck, I tried to add:
require("babel/polyfill");
or
import * as p from "babel/polyfill";
With that I'll get the following error on my app bootstrapping:
Cannot find module 'babel/polyfill'
I searched for the module but it seems I'm missing some fundamental thing here. I also tried to add the old and good bluebird NPM but it looks like it's not working.
How to use the polyfills from Babel?

This changed a bit in babel v6.
From the docs:
The polyfill will emulate a full ES6 environment. This polyfill is automatically loaded when using babel-node.
Installation:
$ npm install babel-polyfill
Usage in Node / Browserify / Webpack:
To include the polyfill you need to require it at the top of the entry point to your application.
require("babel-polyfill");
Usage in Browser:
Available from the dist/polyfill.js file within a babel-polyfill npm release. This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script> before it.
NOTE: Do not require this via browserify etc, use babel-polyfill.

The Babel docs describe this pretty concisely:
Babel includes a polyfill that includes a custom regenerator runtime
and core.js.
This will emulate a full ES6 environment. This polyfill is
automatically loaded when using babel-node and babel/register.
Make sure you require it at the entry-point to your application, before anything else is called. If you're using a tool like webpack, that becomes pretty simple (you can tell webpack to include it in the bundle).
If you're using a tool like gulp-babel or babel-loader, you need to also install the babel package itself to use the polyfill.
Also note that for modules that affect the global scope (polyfills and the like), you can use a terse import to avoid having unused variables in your module:
import 'babel/polyfill';

For Babel version 7, if your are using #babel/preset-env, to include polyfill all you have to do is add a flag 'useBuiltIns' with the value of 'usage' in your babel configuration. There is no need to require or import polyfill at the entry point of your App.
With this flag specified, babel#7 will optimize and only include the polyfills you needs.
To use this flag, after installation:
npm install --save-dev #babel/core #babel/cli #babel/preset-env
npm install --save #babel/polyfill
Simply add the flag:
useBuiltIns: "usage"
to your babel configuration file called "babel.config.js" (also new to Babel#7), under the "#babel/env" section:
// file: babel.config.js
module.exports = () => {
const presets = [
[
"#babel/env",
{
targets: { /* your targeted browser */ },
useBuiltIns: "usage" // <-----------------*** add this
}
]
];
return { presets };
};
Reference:
usage#polyfill
babel-polyfill#usage-in-node-browserify-webpack
babel-preset-env#usebuiltins
Update Aug 2019:
With the release of Babel 7.4.0 (March 19, 2019) #babel/polyfill is deprecated. Instead of installing #babe/polyfill, you will install core-js:
npm install --save core-js#3
A new entry corejs is added to your babel.config.js
// file: babel.config.js
module.exports = () => {
const presets = [
[
"#babel/env",
{
targets: { /* your targeted browser */ },
useBuiltIns: "usage",
corejs: 3 // <----- specify version of corejs used
}
]
];
return { presets };
};
see example: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3
Reference:
7.4.0 Released: core-js 3, static private methods and partial
application
core-js#3, babel and a look into the future

If your package.json looks something like the following:
...
"devDependencies": {
"babel": "^6.5.2",
"babel-eslint": "^6.0.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babelify": "^7.3.0",
...
And you get the Cannot find module 'babel/polyfill' error message, then you probably just need to change your import statement FROM:
import "babel/polyfill";
TO:
import "babel-polyfill";
And make sure it comes before any other import statement (not necessarily at the entry point of your application).
Reference: https://babeljs.io/docs/usage/polyfill/

First off, the obvious answer that no one has provided, you need to install Babel into your application:
npm install babel --save
(or babel-core if you instead want to require('babel-core/polyfill')).
Aside from that, I have a grunt task to transpile my es6 and jsx as a build step (i.e. I don't want to use babel/register, which is why I am trying to use babel/polyfill directly in the first place), so I'd like to put more emphasis on this part of #ssube's answer:
Make sure you require it at the entry-point to your application,
before anything else is called
I ran into some weird issue where I was trying to require babel/polyfill from some shared environment startup file and I got the error the user referenced - I think it might have had something to do with how babel orders imports versus requires but I'm unable to reproduce now. Anyway, moving import 'babel/polyfill' as the first line in both my client and server startup scripts fixed the problem.
Note that if you instead want to use require('babel/polyfill') I would make sure all your other module loader statements are also requires and not use imports - avoid mixing the two. In other words, if you have any import statements in your startup script, make import babel/polyfill the first line in your script rather than require('babel/polyfill').

babel-polyfill allows you to use the full set of ES6 features beyond
syntax changes. This includes features such as new built-in objects
like Promises and WeakMap, as well as new static methods like
Array.from or Object.assign.
Without babel-polyfill, babel only allows you to use features like
arrow functions, destructuring, default arguments, and other
syntax-specific features introduced in ES6.
https://www.quora.com/What-does-babel-polyfill-do
https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

Like Babel says in the docs, for Babel > 7.4.0 the module #babel/polyfill is deprecated, so it's recommended to use directly core-js and regenerator-runtime libraries that before were included in #babel/polyfill.
So this worked for me:
npm install --save core-js#3.6.5
npm install regenerator-runtime
then add to the very top of your initial js file:
import 'core-js/stable';
import 'regenerator-runtime/runtime';

Calling VueLoaderPlugin() causes 'findIndex' undefined error

I'm trying to integrate a Vue CLI app in another web project we are working with. The Vue app itself works when running the dev server bundled with Vue CLI.
The Vue application contains .vue files, so a loader for webpack is needed. I used the setup from the vue-loader documentation. When I ran webpack (via Grunt) I now get the following error:
Warning: Cannot read property 'findIndex' of undefined Use --force to continue.
After a lot of tinkering I figured out that the new VueLoaderPlugin(); line from the documentation mentioned above was the cause of this. However I do need this plugin to get my .vue-files to work.
I am using the following set of loaders, imported using npm via package.json:
{
// ...
"dependencies": {
//...
"webpack": "~3.9.1"
},
"devDependencies": {
// ...
"vue": "^2.5.17",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17"
}
}
I have tried googling for the error but came up empty handed. All help and suggestions are welcome. Cheers!

When fiddling around trying to get the vue-loader to work, at some point I got an error leading me to update webpack to a later version. This version seemed to have deprecated the use of module.loaders in favour of module.rules.
Changing this in the webpack config seems to have made everything work smoothly. Hope someone finds this useful!

Disable a specific linter rule in Atom (for js-standard)

How do I tell an Atom linter, specifically js-standard, to ignore a rule? I want it ignored project-wide, and I thought that I could achieve this with a package.json or a .eslintrc but I can't get either to work. The rule I want to disable is camelcase
I should be able to do this in a package.json file, because the js-standard linter has an option called honorStyleSettings:
Honors style settings defined in package.json.
Current style settings supported:
ignore
parser
What's the syntax of these settings?

For the record, here's how to use js-standard in Atom while selectively disabling a certain rule.
Disable the linter-js-standard Atom package
Install linter-eslint
Add an .eslintrc file:
{
"extends": ["standard"],
"rules": {
"camelcase": 0
}
}
You may also need to install standard and eslint via npm, if you don't have them already.

Using the default install, there is no way to do this in linter-js-standard. (I believe this was a conscious decision on the part of the module authors who believe that standard is a hard target rather than an ideal.)
If you wish to use eslint-style comments to disable linting for certain lines or code sections, install babel-eslint via npm i --save-dev babel-eslint and add
{
...
"standard": {
"parser": "babel-eslint"
}
...
}
to your package.json file which will allow you to annotate your source as needed.
Example
Assuming foo is defined but not used elsewhere in your file, linter will warn: 'foo is assigned a value but never used. (no-unused-vars)'
const foo = 1
After installing babel-eslint, configuring standard in your package.json file, and adding this comment, linter will ignore the line.
const foo = 1 // eslint-disable-line
See Configuring ESLint for other configuration annotations.

I've managed to disable the "camelcase" rule by going to "linter-js-standard" package folder and adding to node_modules/standard/eslintrc.json file the following line:
"rules": { "camelcase": [0] }
So the entire "eslintrc.json" looks like:
{
"extends": ["standard", "standard-jsx"],
"rules": { "camelcase": [0] }
}
Just save or edit your .js file in Atom for the changes to take effect.
On my Linux desktop the full path to eslintrc.json is:
~/.atom/packages/linter-js-standard/node_modules/standard/eslintrc.json
Of course, when you update the "linter-js-standard" package in Atom, you'll have to do the above steps again.
To turn the "camelcase" rule on you may change the "camelcase" value to [2] instead of deleting the entire "rules" line:
"rules": { "camelcase": [2] }

If it is ESlint that your plugin uses then create a .eslintrc file in the root of your project & write your rules within there.
Heres an example of a .eslintrc file github example. I find i need to close and reopen Atom to refresh the lint errors
EDIT:
showEslintRules (default: false). You will need to change this option to true.