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
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.
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
...
};
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.
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.
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.