yarn workspace not update the local package (making eslint plugin) - eslint

Problem
I'm making custom eslint plugin referencing working with plugins and generator-eslint. Then I make a monorepo using yarn workspace and turbo repo like following structure:
file structure
apps
service
.eslintrc.js
index.ts (written to throw eslint error)
package.json
packages
eslint-plugin-custom
lib
rules
func-prefix-matching.js
index.js
.eslintrc.js
package.json
package.json
turbo.json
The key files of it is:
apps/service/.eslintrc.js
module.exports = {
root: true,
extends: ['eslint:recommended'],
plugins: ['eslint-plugin-custom'],
env: {
node: true,
es6: true,
},
rules: {
"custom/func-prefix-matching": ['error']
}
};
apps/service/package.json
{
"name": "service",
"version": "0.0.0",
"private": true,
"scripts": {
"lint": "eslint ."
},
"dependencies": {},
"devDependencies": {
"eslint": "8.22.0",
"eslint-plugin-custom": "*",
"typescript": "^4.5.3"
}
}
packages/eslint-plugin-custom/lib/rules/func-prefix-matching.js
"use strict";
//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------
const rulePrefix = ["is", "pre", "on", "post", "get", "set"];
const isValidName = (name, { prefix, exclude }) => {
const isValid = (prefix) => name.indexOf(prefix) === 0;
return exclude.some(isValid) || prefix.some(isValid);
};
/** #type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
type: 'suggestion', // `problem`, `suggestion`, or `layout`
docs: {
description: 'exmaple',
recommended: false,
url: null, // URL to the documentation page for this rule
},
fixable: null, // Or `code` or `whitespace`
schema: [], // Add a schema if the rule has options
messages: {
example: 'example',
},
},
create(context) {
const { options } = context;
const {include = [], exclude = [] } = options[0]||{};
return {
Identifier: (node) => {
if (node.parent.init && node.parent.init.type === 'ArrowFunctionExpression'
// You can add more checks here
) {
const { name } = node;
const allPrefix = [...include, ...rulePrefix].sort();
// Sorting is optional
if (!isValidName(name, { prefix: allPrefix, exclude })) {
context.report({
node,
messageId: `${name} should start with ${allPrefix.join(", ")}.`,
});
}
}
},
};
},
};
packages/eslint-plugin-custom/package.json
{
"name": "eslint-plugin-custom",
"version": "1.0.0",
"description": "ESLint plugin",
"keywords": [
"eslint",
"eslintplugin",
"eslint-plugin"
],
"author": "inflab",
"main": "./lib/index.js",
"exports": "./lib/index.js",
"files": [
"lib",
"README.md"
],
"scripts": {
"lint": "eslint .",
"test": "mocha tests --recursive --watch"
},
"dependencies": {
"requireindex": "^1.2.0"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-plugin-eslint-plugin": "^5.0.0",
"eslint-plugin-node": "^11.1.0",
"mocha": "^10.0.0"
},
"engines": {
"node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
},
"peerDependencies": {
"eslint": ">=7"
},
"license": "ISC"
}
package.json
{
"name": "custom-lint",
"version": "0.0.0",
"private": true,
"workspaces": [
"apps/*",
"packages/*"
],
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev --parallel",
"lint": "turbo run lint",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"test": "turbo run test"
},
"devDependencies": {
"prettier": "latest",
"turbo": "latest"
},
"engines": {
"node": ">=14.0.0"
},
"dependencies": {},
"packageManager": "yarn#1.22.19"
}
turbo.json
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {},
"lint": {
"outputs": []
},
"dev": {
"cache": false
},
"test": {}
}
}
issue
Now, eslint make output:
[Error - 10:34:20 PM] TypeError: context.report() called with a messageId of 'function1 should start with get, is, on, post, pre, set.' which is not present in the 'messages' config: {
"example": "example"
}
Occurred while linting /custom-lint/apps/service/index.ts:1
So I edit code like:
"use strict";
//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------
const rulePrefix = ["is", "pre", "on", "post", "get", "set"];
const isValidName = (name, { prefix, exclude }) => {
const isValid = (prefix) => name.indexOf(prefix) === 0;
return exclude.some(isValid) || prefix.some(isValid);
};
/** #type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
...
messages: {
messageId: 'message',
},
},
create(context) {
...
return {
Identifier: (node) => {
if (node.parent.init && node.parent.init.type === 'ArrowFunctionExpression'
// You can add more checks here
) {
const { name } = node;
const allPrefix = [...include, ...rulePrefix].sort();
// Sorting is optional
if (!isValidName(name, { prefix: allPrefix, exclude })) {
context.report({
node,
messageId: 'messageId',
});
}
}
},
};
},
};
Then yarn workspace automatically make symlink to the eslint-plugin-custom package and I can see the latest edited code in (project root)/node_modules/eslint-plugin-custom. But the same error is occurred.
[Error - 10:34:20 PM] TypeError: context.report() called with a messageId of 'function1 should start with get, is, on, post, pre, set.' which is not present in the 'messages' config: {
"example": "example"
}
Occurred while linting /custom-lint/apps/service/index.ts:1
what I tried
It looks like cache problem, so I run yarn cache clean. But not work
I change the plugin version like
packages/eslint-plugin-custom/package.json
{
"name": "eslint-plugin-custom",
"version": "1.0.1",
...
}
apps/service/package.json
{
"name": "service",
"version": "0.0.0",
"private": true,
"scripts": {
"lint": "eslint ."
},
"dependencies": {},
"devDependencies": {
"eslint": "8.22.0",
"eslint-plugin-custom": "1.0.1",
"typescript": "^4.5.3"
}
}
to match exact version, but it does not work.
removing node_modules dirs and re-install, not work.
what I expect
I expect
the plugin work correctly
to see the output of eslint change when I edit plugin code
Is there any help... :(

Related

NodeJS ExpressJS EJS Tailwind not working

I am working on a website and I am trying use tailwind with EJS as the viewer and it's not loading the CSS (It's what I am assuming) I have watched several Youtube videos and non of them have worked.
Tailwind Config file
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./views/*.{html,js,css} ",
"./views/index.ejs",
],
theme: {
extend: {},
},
plugins: [ {
tailwindcss: {},
autoprefixer: {},
}
]
}
Server.js File
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./views/*.{html,js,css} ",
"./views/index.ejs",
],
theme: {
extend: {},
},
plugins: [ {
tailwindcss: {},
autoprefixer: {},
}
]
}
Package.json file
{
"name": "person-website",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "nodemon server.js",
"build-tail": "SET NODE_ENV=production tailwindcss build -i /styles/tailwindcss.css -o /assets/styles.css"
},
"author": "Thomas Murray",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.8",
"express": "^4.18.2"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"nodemon": "^2.0.20",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4"
}
}
My file structure
It just keeps loading the HTML/EJS file and the CSS

How to run the webpack 3 project in a local system?

I have a webpack project 3 and I want to run it on my local system.
Here is my webpack config file and the package.json
{
"private": true,
"name": "XXx",
"version": "Xxx",
"description": "X",
"main": "index.js",
"dependencies": {
"babel": "^6.23.0",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"findandreplacedomtext": "^0.4.6",
"raw-loader": "^0.5.1",
"style-loader": "^0.19.1",
"text-loader": "0.0.1"
},
"devDependencies": {
"nodemon": "^1.19.4",
"sass": "^1.58.0",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0"
},
"scripts": {
"min.js": "make min.js",
"min.css": "make min.css",
"serve": "webpack"
},
"author": "",
"license": "ISC"
}
Makefile
const UglifyJs = require('uglifyjs-webpack-plugin')
const isWatching = process.argv[2] === '-w'
const plugins = [
function() {
this.plugin('watch-run', function(watching, callback) {
console.log('Begin compile at ' + new Date())
callback()
})
}
]
if (!isWatching) {
plugins.unshift(
new UglifyJs({
extractComments: false,
sourceMap: true,
})
)
}
module.exports = {
entry: {
'bundle': './js/bundle.js'
},
devtool: isWatching ? 'source-map' : false,
output: {
path: `${__dirname}/js`,
filename: '[name].min.js',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'raw-loader',
}
},
{
test: /\.s?css$/,
use: [
{
loader: "css-loader",
options: {
url: false, // do not bundle images
},
},
{loader: "sass-loader"},
],
}
]
},
plugins,
}
There is a makefile but I dont think this is required for this problem.
I have tried
webpack -p , webpack -w , and webpack .
webpack -p is giving an error : ERROR in bundle.min.js from UglifyJs Unexpected token: punc ({) [bundle.min.js:1,976]
while webpack -w works fine I am unable to find any url for the website.
the last command runs and ends.

ERR_FILE_NOT_FOUND index.ff634a51.js and index.62f502b0 only after build my Electron app

Electron-Builder Version: 23.0.3
Node Version: 14.16.0
Electron Version:18.2.0
Electron Type (current, beta, nightly):current
Hi, Im new using Electron, my actual stack is Vite + React + Electron + Electron-builder
When I build my app it works correctly (in local)
I don't have any type of error or issue, but when im pass that file .dmg or .deb or .exe the electron app initialise in white screen and the console shows the next issues, Before, I also had another similar error, I was missing the preload.js error and I solved it by adding the following lines:
"files": [
...
"preload.js"
],
But as you can see I also agree ./dist/**/* line in files, that's should work.
My package.json is:
{
"name": "testeb",
"author": {
"name": "test",
},
"description": "Test app vite electron react",
"private": false,
"version": "0.0.1",
"homepage": "./",
"main": "main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"electron:start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"#types/react": "^18.0.0",
"#types/react-dom": "^18.0.0",
"#vitejs/plugin-react": "^1.3.0",
"vite": "^2.9.9",
"electron": "18.2.0"
},
"build": {
"appId": "test app",
"icon": ".dist/assets/favicon.17e50649.svg",
"directories": {
"output": "dist"
},
"extraFiles": [
"./dist/assets/**"
],
"files": [
"./dist/**/*",
"main.js",
"preload.js"
],
"linux": {
"target": [
"deb"
]
},
"mac": {
"target": [
{
"target": "dmg",
"arch": [
"x64"
]
}
]
},
"win": {
"target": [
"portable"
]
}
}
}
My main.js file for Electron is:
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
contextIsolation: true,
preload: path.join(__dirname, "preload.js"),
},
});
win.loadFile("./dist/index.html");
win.webContents.openDevTools();
}
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
and my preload.js is:
window.addEventListener("DOMContentLoaded", () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector);
if (element) element.innerText = text;
};
for (const type of ["chrome", "node", "electron"]) {
replaceText(`${type}-version`, process.versions[type]);
}
});
I hope someone can help me with my issue, regards.

Vue 3: TypeError: compiler.parseComponent is not a function

I can't seem to get rid of this error.
I've tried removing package-lock.json & node_modules followed by npm install, but, it's not working.
Node Version: 12.18.3
NPM Version: 6.14.8
Any help is appreciated!
Lovely Error
ERROR in ./src/scripts/Test.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: compiler.parseComponent is not a function
at parse (some path\node_modules\#vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (some path\node_modules\vue-loader\lib\index.js:67:22)
# ./src/scripts/app.js 8:0-30 10:10-14
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#vue/compiler-sfc": "^3.0.2",
"vue-loader": "^15.9.4",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"vue": "^3.0.2"
}
}
webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
entry: './src/scripts/app.js',
output: {
filename: 'scripts/app.js'
},
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
// Fixes the "vue-template-compiler" error.
compiler: require('#vue/compiler-sfc')
}
}
]
}
]
},
watch: true
};
src/scripts/app.js
import { createApp } from 'vue';
import Test from './Test.vue';
createApp(Test).mount('#app');
src/scripts/Test.vue
<template>
<p>{{ message }}</p>>
</template>
<script>
export default {
data() {
return {
message: "I'm giving up!"
}
}
}
</script>
Steps to fix the problem:
Upgrade vue-loader to ^16.0.0-beta.9.
Change const VueLoaderPlugin = require('vue-loader/lib/plugin');
to const { VueLoaderPlugin } = require('vue-loader');.

Grunt doesn't launch : ">> ReferenceError: grunt is not defined"

I'm new to NodeJS and Grunt and I'm struggling to make this work.
Here's what I get :
$> grunt
Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: grunt is not defined
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Here's my Gruntfile :
module.exports = function(grunt) {
grunt.initConfig({
compass: {
dist: {
options: {
config: 'config/config.rb'
}
}
}
});
};
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('default', 'compass');
And here's my package.json :
{
"name": "tests",
"version": "0.0.0",
"description": "Grunt Tests",
"main": "index.js",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-compass": "~0.6.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-cli": "~0.1.11"
},
"scripts": {
"test": "grunt compass"
},
"repository": {
"type": "git",
"url": "https://github.com/Bertrand31/grunttests.git"
},
"keywords": [
"Grunt",
"NodeJS",
"NPM",
"SASS",
"Compass"
],
"author": "Bertrand Junqua",
"license": "GPL",
"bugs": {
"url": "https://github.com/Bertrand31/grunttests/issues"
},
"homepage": "https://github.com/Bertrand31/grunttests"
}
Oh and I'm running this on a Debian Wheezy.
If you have any idea, let me know.
Thanks a lot guys !
You're calling grunt.loadNpmTasks and grunt.registerTask from a scope where grunt is not defined. You'll need to call them within the module.exports function:
module.exports = function(grunt) {
grunt.initConfig({
compass: {
dist: {
options: {
config: 'config/config.rb'
}
}
}
});
// Call these here instead, where the variable grunt is defined.
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('default', 'compass');
};

Resources