We Keep Coding

Using non-fully-specified imports with nextjs and webpack 5

I am trying to use a library (a node module I don't control) that contains this import in the packaged code
import _omit from 'lodash/omit';
and it does not work with nextjs12 and webpack5. I get this error
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data .Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/dev/project/node_modules/lodash/omit' imported from /Users/dev/project/node_modules/library/es/library.js
Did you mean to import lodash/omit.js?
The library has "type": "module" in it, which I think is the cause of this?
I have seen that you need to add fullySpecifed: false, to the webpack loaders, and I have tried that a few different ways.
In my next config, i have
experimental: { esmExternals: true, fullySpecified: false },
I also tried doing this to the config in the webpack function.
config.module.rules.push({
test: /\.m?js$/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
});
Is there something i am missing to make this work? It seems like it might have to do with the fact that this is during "collecting page data" and not "build"?
Node version: 14.16.0
yarn 1

create-react-app / babel / binding state and functions

Thank you for your time. I have the same issue as in this issue re parsing error - unexpected token = eslint on (originally state - which was fixed by putting in constructor, now) handleClick. New project and think this error will continue through the rest of the project.
class Header extends Component {
constructor() {
super();
this.state = {
activeItem: "home"
};
}
handleClick = (event, { name }) => this.setState({ activeItem: name });
I am new to react, and apologise if this is a simple question. Project was installed with create-react-app, there is no babelrc file, the eslint is as follows.
module.exports = {
env: {
browser: true,
es2021: true,
jest: true,
},
extends: ["plugin:react/recommended", "airbnb", "prettier"],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: "module",
},
plugins: ["react"],
rules: {},
};
From what i have read, I have to install babel to the project, and customise the config to accept state = { activeItem: "home" }; if I want to set state / functions outside the constructor and need to use a 'basic syntax', for fixing the function, i am not sure what that basic syntax is. Help?! I think the course of action is to create a babelrc config file, but am not sure why if it is already installed with create-react-app and do not want to install a bunch of dependencies unless i have to.
Thank you for your patience.

It looks like you need to fix up your ESlint config a bit:
npm install eslint #babel/core #babel/eslint-parser --save-dev
and then add
parser: "#babel/eslint-parser",
to the top level of your ESLint config. Alternatively you could use the default Create React App ESLint config by removing yours, which should be all set already.

How to extend CRA ESLint rules with EXTEND_ESLINT environment variable

Recently Facebook's Create React App (CRA) released a new feature which allows you to extend their base ESLint rules.
We recognise that in some cases, further customisation is required. It
is now possible to extend the base ESLint config by setting the
EXTEND_ESLINT environment variable to true.
Setting Up Your Editor
Here is the example given but with no detail such as filename or what "shared-config" is.
{
"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}
The feature is enabled by added an environment variable.
EXTEND_ESLINT=true
but on the documentation page it also doesn't give any information how to use it - Advanced configuation
I've added their example code to my build in a file called .eslintrc.json but I get a build error:
"Error: ESLint configuration in .eslintrc.json is invalid: - Unexpected top-level property "eslintConfig"."
Has anyone got this working? Does the file need to export a module?

While unclear from the Create-React-App documentation, the example they give is as if the project's ESLint configuration was inside the eslintConfig property of the package.json file.
You need to configure ESLint as described in its documentation. So if you choose the .eslintrc.json way, it must be a valid ESLint configuration file, which doesn't have a eslintConfig property.
The only things that matter in the example are:
they're extending from "react-app" before any other configuration
any additional rule is set to "warn" to avoid stopping the project from building
if using TypeScript, place the specific TS related configuration in the "overrides" section.
A simple .eslintrc.js (notice the extension) configuration file for a CRA project using TypeScript could be as follows:
const defaultRules = [
'react-app',
'eslint:recommended',
// any other plugins or custom configuration you'd like to extend from.
];
module.exports = {
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2017,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
node: true,
es6: true,
jest: true,
},
extends: defaultRules,
rules: {
'array-callback-return': 'warn',
'consistent-return': 'warn',
'default-case': 'warn',
// etc.
},
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
plugins: ['#typescript-eslint'],
extends: [
...defaultRules,
'plugin:#typescript-eslint/recommended',
// any other TypeScript specific config (from a plugin, or custom)
],
rules: {
'#typescript-eslint/no-explicit-any': 'warn',
'#typescript-eslint/no-unused-vars': 'warn',
'#typescript-eslint/no-unused-expressions': 'warn',
// etc.
},
},
],
settings: {
react: {
// React version. "detect" automatically picks the version you have installed.
version: 'detect',
},
},
};

Svelte and ESLint

A few days ago I decide to migrate frontend application to Svelte from Vanilla JS (specific reasons).
And at first I decided to configure eslint config. I spent about 3 hours to find an answer of how to integrate svelte into eslint and I didn't find nothing besides this plugin
Here is my eslint config
module.exports = {
extends: ['eslint:recommended', 'prettier'],
parserOptions: {
ecmaVersion: 2019,
sourceType: 'module'
},
env: {
es6: true,
browser: true
},
plugins: [ 'svelte3' ],
overrides: [
{
files: '*.svelte',
processor: 'svelte3/svelte3'
}
],
globals: {
"module": true,
"process": true,
},
rules: {
// ...
},
settings: {
// ...
}
};
Here is dev. dependencies of package.json:
Where is contains my svelte components:
I have non formatted code:
And what tell me eslint:
After eslint . and eslint . --fix commands the code of svelte component still non formatted
I'm sure that I'm doing something wrong, hope on your help.

To use eslint with svelte 3, all you have to do is :
npm install \
eslint \
eslint-plugin-import \
eslint-plugin-node \
eslint-plugin-promise \
eslint-plugin-standard \
eslint-plugin-svelte3 \
--save-dev
Add this script in package.json :
"scripts": {
"lint": "eslint . --ext .js,.svelte --fix"
},
And add a file .eslintrc.js next to the package.json file :
module.exports = {
parserOptions: {
ecmaVersion: 2019,
sourceType: 'module'
},
env: {
es6: true,
browser: true,
node: true
},
extends: [
'eslint:recommended'
],
plugins: [
'svelte3'
],
ignorePatterns: [
'public/build/'
],
overrides: [
{
files: ['**/*.svelte'],
processor: 'svelte3/svelte3'
}
],
rules: {
// semi: ['error', 'never'] // uncomment if you want to remove ;
},
settings: {
// ...
}
}
Then you can run npm run lint to fix your files.

ESLint (and linters in general) are good for finding and potentially fixing things that violate certain rules, but ESLint isn't primarily a formatting tool.
To format Svelte files automatically, you'll have better luck with Prettier and the Svelte plugin for Prettier.
If you're using Visual Studio Code, you can install the Svelte for VS Code plugin which will be able to format your files automatically when you save them (assuming you have formatOnSave turned on).

I assume you are using VSCode by looking at your screenshots. At the documentation's page of the plugin you mention, there's an explanation of how to configure it in your code editor. ( https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/INTEGRATIONS.md )
You'll need the ESLint extension installed.
Unless you're using .html for your Svelte components, you'll need to configure files.associations to associate the appropriate file extension with the html language. For example, to associate .svelte, put this in your settings.json:
{
"files.associations": {
"*.svelte": "html"
}
}
Then, you'll need to tell the ESLint extension to also lint files with language html and to enable autofixing where possible. If you haven't adjusted the eslint.validate setting, it defaults to [ "javascript", "javascriptreact" ], so put this in your settings.json:
{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
}
]
}
If you are using an extension that provides Svelte syntax highlighting, don't associate *.svelte files with the html language, and instead enable the ESLint extension on "language": "svelte".
Reload VS Code and give it a go!

"No ESLint configuration found" error

Recently, we've upgraded to ESLint 3.0.0 and started to receive the following message running the grunt eslint task:
> $ grunt eslint
Running "eslint:files" (eslint) task
Warning: No ESLint configuration found. Use --force to continue.
Here is the grunt-eslint configuration:
var lintTargets = [
"<%= app.src %>/**/*/!(*test|swfobject)+(.js)",
"test/e2e/**/*/*.js",
"!test/e2e/db/models/*.js"
];
module.exports.tasks = {
eslint: {
files: {
options: {
config: 'eslint.json',
fix: true,
rulesdir: ['eslint_rules']
},
src: lintTargets
}
}
};
What should we do to fix the error?

The error you are facing is because your configuration is not present.
To configure the eslint type
eslint --init
then configure as your requirement.
then execute the project again.

I've had the same error. It seems to need configuration.
Go to your project root & run in terminal
./node_modules/.bin/eslint --init

Try to swap config with configFile. Then :
Create eslint.json file and
Point the right location of it (relative to Gruntfile.js file)
Place some configuration in that file (eslint.json), i.e.:
.
{
"rules": {
"eqeqeq": "off",
"curly": "warn",
"quotes": ["warn", "double"]
}
}
for more examples, go here.

I hade the same problem with Gulp and running "gulp-eslint": "^3.0.1" version.
I had to rename config: to configFile in Gulp task
.pipe(lint({configFile: 'eslint.json'}))

For those having the same problem, this is how we've fixed it.
Following the Requiring Configuration to Run migration procedure, we had to rename eslint.json to .eslintrc.json which is one of the default ESLint config file names now.
We've also removed the config grunt-eslint option.

Create a new file on the root directory called .eslintrc.json file:
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error"
}
}

Just follow the steps
1.create eslint config file name eslintrc.json
2.place the code as given below
gulp.src(jsFiles)
// eslint() attaches the lint output to the "eslint" property
// of the file object so it can be used by other modules.
.pipe(eslint({configFile: 'eslintrc.json'}))
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failAfterError last.
.pipe(eslint.failAfterError());

Webpack
I had eslint.rc file in my root project directory but event though
I was getting error.
Solution was to add exclude property to "eslint-loader" rule config:
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
// eslint options (if necessary)
}
},
],
},
// ...
}

We faced this problem today and realized, that the issue was not caused inside the project that we were working on, but inside a package that we had a link on using the command:
yarn link
Which is a feature often useful to test out new features or when trying to debug an issue in a package that manifests itself in another project.
We solved it by either removing the link, or in case of ember.js disabling the developer mode of our addon package.
index.js
module.exports = {
isDevelopingAddon: function() {
return false;
},
...
}

gulp.task('eslint',function(){
return gulp.src(['src/*.js'])
.pipe(eslint())
.pipe(eslint.format())
});
`touch .eslintrc` instead of .eslint
these two steps may help you!

Run the command ember init.
When it asks for overwriting the existing file(s). Type n to skipping overwriting the file.
Now it will automatically create required files like .eslintrc, etc.
For me the same issue occurred when i copied my folder except dist, dist_production and node_modules folder to another system and tried running ember build.