ESLint with Airbnb-base using Gulp - javascript

So I am trying to add the Airbnb style guide to my company's code base using ESLint and Gulp. I'm running into the following error:
Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import'
Referenced from: airbnb-base
Referenced from:
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
Here is my current configuration:
eslint.gulp.js
export default (gulp, plugins, config) => {
return gulp.src([
`${config.SRC}/**/*.js`,
`!${config.SRC}/**/__generated/*.js`,
`!${config.SRC}/libraries/**`,
`!**/node_modules/**`
])
.pipe(plugins.errorHandler())
.pipe(plugins.eslint({
"extends": "airbnb-base"
})
)
.pipe(plugins.eslint.format())
.pipe(plugins.eslint.failAfterError());
}
.eslintrc file
{
"env": {
"es6": true,
"browser": true
},
"extends": "airbnb-base",
"rules": {}
}
Any ideas what I might be doing wrong?

i suggest
npm install npm#latest -g
rm -rf node_modules
npm install

Related

anchor test command error - Error: Cannot find module '[#project-serum/anchor] ' Please verify that the package.json has a valid "main" entry

I was following an introduction tutorial using anchor (solana framework), it is based in the official github.
In the testing part, I used anchor test command and I got this error:
BPF SDK: /home/sebastian/.local/share/solana/install/releases/1.9.12/solana-release/bin/sdk/bpf
cargo-build-bpf child: rustup toolchain list -v
cargo-build-bpf child: cargo +bpf build --target bpfel-unknown-unknown --release
Finished release [optimized] target(s) in 3.86s
cargo-build-bpf child: /home/sebastian/.local/share/solana/install/releases/1.9.12/solana-release/bin/sdk/bpf/dependencies/bpf-tools/llvm/bin/llvm-readelf --dyn-symbols /home/sebastian/Documentos/solana-project/anchor/examples/tutorial/basic-1/target/deploy/basic_1.so
To deploy this program:
$ solana program deploy /home/sebastian/Documentos/solana-project/anchor/examples/tutorial/basic-1/target/deploy/basic_1.so
The program address will default to this keypair (override with --program-id):
/home/sebastian/Documentos/solana-project/anchor/examples/tutorial/basic-1/target/deploy/basic_1-keypair.json
yarn run v1.22.17
$ /home/sebastian/Documentos/solana-project/anchor/examples/tutorial/node_modules/.bin/mocha -t 1000000 tests/
Error: Cannot find module '/home/sebastian/Documentos/solana-project/anchor/examples/tutorial/node_modules/#project-serum/anchor/dist/cjs/index.js'. Please verify that the package.json has a valid "main" entry
at tryPackage (node:internal/modules/cjs/loader:353:19)
at Function.Module._findPath (node:internal/modules/cjs/loader:566:18)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/home/sebastian/Documentos/solana-project/anchor/examples/tutorial/basic-1/tests/basic-1.js:2:16)
at Module._compile (node:internal/modules/cjs/loader:1099:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async formattedImport (/home/sebastian/Documentos/solana-project/anchor/examples/tutorial/node_modules/mocha/lib/nodejs/esm-utils.js:7:14)
at async Object.exports.requireOrImport (/home/sebastian/Documentos/solana-project/anchor/examples/tutorial/node_modules/mocha/lib/nodejs/esm-utils.js:48:32)
at async Object.exports.loadFilesAsync (/home/sebastian/Documentos/solana-project/anchor/examples/tutorial/node_modules/mocha/lib/nodejs/esm-utils.js:88:20)
at async singleRun (/home/sebastian/Documentos/solana-project/anchor/examples/tutorial/node_modules/mocha/lib/cli/run-helpers.js:125:3)
at async Object.exports.handler (/home/sebastian/Documentos/solana-project/anchor/examples/tutorial/node_modules/mocha/lib/cli/run.js:374:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
This is my package.json:
{
"name": "basic-1",
"version": "0.24.2",
"license": "(MIT OR Apache-2.0)",
"homepage": "https://github.com/project-serum/anchor#readme",
"bugs": {
"url": "https://github.com/project-serum/anchor/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/project-serum/anchor.git"
},
"engines": {
"node": ">=11"
},
"scripts": {
"test": "anchor test --skip-lint"
},
"dependencies": {
"#project-serum/anchor": "^0.24.2"
}
}
I really appreciate any information about it. I also attach the tutorial and anchor's github link.
https://github.com/project-serum/anchor
https://youtu.be/CmG5_sIas1Q
Try re-installing #project-serum/anchor
yarn add #project-serum/anchor
In your anchor.toml file, try changing the value of 'test' to mocha tests/test.js , replace test.js with whatever the name of your file in tests.
Go check node_modules/#project-serum/anchor if you don't have a "dist" folder there you will have to run yarn add#project-serum/anchor again. When you can see that the "dist" folder was properly installed you'll be able to run your tests again.

Making Kafka.js external dependency using webpack in node as a commonjs module

I'm trying to make kafkajs external dependency (move out from webpack bundle) with this config:
externals: {
kafkajs: 'kafkajs',
redis: 'redis'
}
Dependencies:
dependencies: {
...
"kafkajs": "^1.12.0",
...
}
But I'm getting error "Cannot find module":
{
"error": "Initialization has failed due to: Error: Cannot find module 'kafkajs'\n at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)\n at Function.Module._load (internal/modules/cjs/loader.js:507:25)\n at Module.require (internal/modules/cjs/loader.js:637:17)\n at require (internal/modules/cjs/helpers.js:22:18)\n at Object.<anonymous>"
}
I tried clearing the cache, saving the dependency again and with different externals configuration:
externals: [
"kafkajs",
{
Kafka: {
commonjs: ["kafkajs", "Kafka"],
}
]
Thanks ahead for any guidance
If you are bundling your node.js app, it is better to mark as external all the node_modules, there is a lib for that, webpack-node-externals.
npm install webpack-node-externals --save-dev
//webpack.config.js
const nodeExternals = require('webpack-node-externals');
...
module.exports = {
...
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
...
};

Rollup.js after-build error: Error: Cannot find module './polyfills.js'

I'm building my library using Rollup.js. After bundling, I want to run it via node command like:
node -e "require('./dist/index.min.js')"
But it throws me an error:
internal/modules/cjs/loader.js:605
throw err;
^
Error: Cannot find module './polyfills.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:659:17)
at require (internal/modules/cjs/helpers.js:22:18)
at XYZ/dist/index.min.js:583:17
at Object.<anonymous> (XYZ/dist/index.min.js:9767:21)
at Module._compile (internal/modules/cjs/loader.js:723:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
Side info: The build command run just fine and create output file in dist folder as intended.
My rollup config:
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import uglify from 'rollup-plugin-uglify-es'
import json from '#rollup/plugin-json'
import builtins from 'rollup-plugin-node-builtins'
import globals from 'rollup-plugin-node-globals'
export default {
input: 'src/index.js',
plugins: [
globals(),
builtins(),
babel({
exclude: 'node_modules/**'
}),
resolve(),
commonjs(),
json(),
uglify()
],
output: {
extend: true,
compact: true,
file: 'dist/index.min.js',
format: 'iife',
name: 'lib',
sourcemap: 'dist/index.js.map'
},
};
My .babelrc file:
{
"presets": [
"#babel/env"
]
}
I've tried to install #babel/polyfill and import it in the src/index.js file, but it that didn't fix the error.

How to use tsify with watchify on Ubuntu?

The input directory contains:
a JavaScript file (a jQuery plugin that is not in the DefinitelyTyped repo) and
2 TypeScript files
declarations.d.ts
main.ts
The tsconfig.json file is this (work in progress):
{
"compilerOptions": {
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"outDir": "wp-content/themes/custom-theme/assets/js",
"watch": true,
"allowJs": true,
"lib": ["ES2016", "DOM"]
},
"include": [
"wp-content/themes/custom-theme/assets/ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
Currently I have this watch.sh script that works well:
tmux \
new-session 'cd html && tsc' \; \
split-window 'cd html/wp-content/themes && scss --watch custom-theme/assets/scss:custom-theme/assets/css' \; \
split-window 'cd html/wp-content/themes && watchify custom-theme/assets/js/main.js -o custom-theme/assets/js/bundle.js'
I want to replace this script with something like a Browserify build.js file (I prefer build.ts if possible), and I want to use Tsify with Watchify (I understood that Watchify build.js file is similar to the Browserify file).
I have seen this example, but I am not sure if I am on the good road.
I have this not-working build.js file:
const browserify = require("browserify");
const tsify = require("tsify");
browserify()
.plugin(tsify, { allowsJs: true })
.add("wp-content/themes/custom-theme/assets/ts/main.ts")
.bundle()
.on('error', function (error) { console.error(error.toString()) })
.pipe(process.stdout);
It does not even start to run: it says there is a syntax error on line 1 near (.
Any advice is greatly appreciated.
Thank you.
Update 1
The new build.js file:
const watchify = require("watchify");
const tsify = require("tsify");
watchify()
.plugin(tsify, { allowsJs: true })
.add("wp-content/themes/custom-theme/assets/ts/main.ts")
.bundle()
.on('error', function (error) { console.error(error.toString()) })
.pipe(process.stdout);
runs but throws this:
$ node build.js
/.../node_modules/watchify/index.js:14
var cache = b._options.cache;
^
TypeError: Cannot read property '_options' of undefined
at watchify (/.../node_modules/watchify/index.js:14:19)
at Object.<anonymous> (/.../build.js:4:1)
at Module._compile (internal/modules/cjs/loader.js:1147:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
at Module.load (internal/modules/cjs/loader.js:996:32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47
Update 2
I ended up using this watch.sh shell script file:
tmux \
new-session 'cd html && tsc' \; \
split-window 'cd html/wp-content/themes; scss --watch custom-theme/assets/scss:custom-theme/assets/css' \; \
split-window 'cd html/wp-content/themes; watchify custom-theme/assets/ts/main.ts -p [ tsify ] -o custom-theme/assets/js/bundle.js -v'
From here I understand that it respects the tsconfig.json file. The only issue is that the require call in main.ts does not return something that VS Code understands well, so I do not have autocompletition support. This is where I still need help. In future I would also like to use a build.js script, if there is anyone who can help me with this.
Now I use ES6 syntax for importing modules everywhere I import something. I also use relative paths to files inside the relevant npm packages in node_modules directory when I import from npm packages.
In tsconfig.json I have these lines besides others:
"target": "ES3",
"lib": ["ES2020", "DOM"],
"module": "CommonJS"
The final working test project is here.
I still have problems with some modules that are not prepaired for ES6 import.

eslint 'html-webpack-plugin' should be listed in the project's dependencies, not devDependencies. (import/no-extraneous-dependencies)

In my Vs code editor, i am getting following error in simple require statement like:
const HtmlWebpackPlugin = require('html-webpack-plugin')
Error: [eslint] 'html-webpack-plugin' should be listed in the project's dependencies, not devDependencies. (import/no-extraneous-dependencies)
Can anyone explain what is no-extraneous-dependencies and why it is giving me this error in simple require statement in my webpack config. I went through this link : eslint should be listed in the project's dependencies, not devDependencies but it was not much helpful as it did not explain why i am adding that line.
My eslintrc.json file:
{
"env": {
"browser": true,
"es6": true,
"commonjs": true,
"node": true
},
"extends": ["airbnb", "prettier", "prettier/react"],
"plugins": ["prettier"],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}
You just need to tell eslint that it's ok to require dev dependency in webpack.
You can create .eslintrc in your webpack folder with
rules:
import/no-extraneous-dependencies: [error, { devDependencies: true }]
This will prevent the error from appearing.
Alternatively you can just set
const HtmlWebpackPlugin = require('html-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies
to disable only this line
In your .eslintrc.json include webpack.config.js in devDependencies:
"rules": {
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.ts?(x)",
"**/*.spec.ts?(x)",
"**/test-utils.ts",
"webpack.config.js"
]
}
],
Add "type": "module" to your package.json, then you can use ES6 import without this error/warning.

Categories

Resources