We Keep Coding

yarn (v1.22.19) on node 16.18.1 is not installing all package dependencies from #umijs/fabric dependency list

I have a project where I am using:
yarn 1.22.19
node 16.18.1
eslint ^8.33.0
My .eslint.js configuration file looks like this (where you can see I am using the #umijs/fabric package - and am importing it as recommended on their GitHub page - link):
module.exports = {
extends: [
require.resolve('#umijs/fabric/dist/eslint'),
'plugin:react-hooks/recommended',
'prettier',
],
plugins: ['prettier'],
rules: {
'no-bitwise': ['error', { allow: ['^'] }],
'prettier/prettier': 'error',
'sort-imports': 'off',
'react/prop-types': 'warn',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
},
globals: {
ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
page: true,
},
};
My stylelintrc.js:
module.exports = {
extends: [require.resolve('#umijs/fabric/dist/stylelint')],
};
My prettierrc.js:
const fabric = require('#umijs/fabric');
module.exports = {
...fabric.prettier,
tabWidth: 2,
};
The #umijs/fabric package has the following dependencies listed in its package.json dependencies field:
"dependencies": {
"#babel/core": "^7.12.10",
"#babel/eslint-parser": "^7.12.1",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-decorators": "^7.13.5",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"#babel/preset-typescript": "^7.12.7",
"#typescript-eslint/eslint-plugin": "^5.8.1",
"#typescript-eslint/parser": "^5.9.0",
"chalk": "^4.1.1",
"eslint": "^7.11.0",
"eslint-config-prettier": "^8.3.0",
"eslint-formatter-pretty": "^4.0.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-jest": "^24.0.1",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.1.2",
"eslint-plugin-unicorn": "^20.0.0",
"fast-glob": "^3.2.4",
"os-locale": "^5.0.0",
"prettier": "^2.3.2",
"prettier-plugin-packagejson": "2.3.0",
"prettier-plugin-two-style-order": "^1.0.0",
"stylelint": "^13.0.0",
"stylelint-config-css-modules": "^2.2.0",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-standard": "^20.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.1.0",
"typescript": "^4.5.4"
},
When I run yarn (or yarn install), I expect all of my project dependencies (and their dependencies) to be downloaded, however, when I run my lint script, I get the following eslint error:
yarn lint
yarn run v1.22.19
$ npm run lint:js && npm run lint:style && npm run lint:prettier
> ant-design-pro#1.0.0 lint:js
> eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src
Oops! Something went wrong! :(
ESLint: 8.33.0
ESLint couldn't find the plugin "eslint-plugin-react".
(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/Users/<my-user>/projects/<project-name>".)
It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
npm install eslint-plugin-react#latest --save-dev
The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /Users/<my-user>/projects/<project-name>/node_modules/#umijs/fabric/dist/eslint.js".
If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
这是一个 TypeScript 项目，如果不是请删除 tsconfig.json
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Here is my lint script:
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
When I inspect my node_modules folder, I can see that this package is indeed not installed, even though it is listed as a dependency for #umijs/fabric:
My question is, why is yarn not installing this dependency in my node_modules folder when it is listed as a dependency in the package.json for #umijs/fabric?
What I have tried:
Running rm -rf node_modules/ && yarn to see if there was an unresolved dependency conflict when I first ran yarn.

unable to use scss in storybook in monorepo vue app - module build error lang="scss"

I am adding storybook in an existing monorepo and keep getting error when trying to add scss via <style lang="scss">:
ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
This is the outline of monorepo structure:
package.json
.storybook
|_ main.js
|_ preview.js
client
|_package.json
|_ src
|_components
|_styles
|_stories
The relevant root package.json looks like:
"scripts": {
"build": "yarn workspaces foreach run build",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"#mdx-js/react": "^1.6.22",
"#storybook/addon-actions": "^6.3.7",
"#storybook/addon-docs": "^6.3.7",
"#storybook/addon-essentials": "^6.3.7",
"#storybook/addon-links": "^6.3.7",
"#storybook/addon-postcss": "^2.0.0",
"#storybook/preset-scss": "^1.0.3",
"#storybook/vue3": "^6.3.7",
"#types/mdx-js__react": "^1",
"css-loader": "^6.2.0",
"node-sass": "^6.0.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"vue-loader": "^16.5.0"
}
Here is my .storybook/main.js
const path = require('path');
module.exports = {
"stories": [
"../client/src/stories/**/*.stories.mdx",
"../client/src/stories/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-scss"
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push(
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
}
);
return config;
},
}
In my vue components, trying to use <style lang="scss"> throws the above error. I thought scss would be handled by the changes made in .storybook/main.js, but it's not working, and I'm wondering if it has something to do with the monorepo and two package.json, or if it is something else.

Based on the package.json you've provided, you may be encountering this bug:
https://github.com/webpack-contrib/sass-loader/issues/923
In short, using Vue 3 with sass-loader v11.0.0 or higher without Webpack v5 leads to this error. An interim solution may be to install a known-compatible version of sass-loader:
npm install --save-dev sass-loader#10.1.1
Or, if using yarn:
yarn add --save-dev sass-loader#10.1.1

Updating the storybook's webpack to version 5 as shown here solved the issue:
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade

"TypeError: Invalid value used in weak set" while build using webpack

I'm trying to add scss to the project. I want to build css files from scss ones, but I get an error that says "TypeError: Invalid value used in weak set" since I added MiniCssExtractPlugin.
Here's my webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
// TODO: Add common Configuration
module: {},
};
const js = Object.assign({}, config, {
name: 'js',
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname, '../some/path/here'),
filename: 'main.js',
},
});
const scss = Object.assign({}, config, {
name: 'scss',
entry: path.resolve(__dirname, './scss/styles.scss'),
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
},
],
},
output: {
path: path.resolve(__dirname, '../some/path/here'),
filename: 'styles.css',
},
});
module.exports = [js, scss];
I googled a lot but didn't find any answers.
I use Node.js v 8.4.0.
Console output (There is more, but I think this is enough):
TypeError: Invalid value used in weak set
at WeakSet.add (native)
at MiniCssExtractPlugin.apply (/path/path/path/path/path/path/path/node_modules/mini-css-extract-plugin/dist/index.js:362:18)
PS: I'm new to webpack, so I'll be glad if you help me to make this code better. The main idea is to keep js compilation the same and add scss compilation. I also want to compile included scss files as separated ones.
PSS: If you need more information, I'll provide some, coz idk what else can be useful.

Maybe the latest mini-css-extract-plugin version has bugs. And I tried to use another version of this package. And its Worked!!!
Remove your last package version:
npm uninstall mini-css-extract-plugin
Download this version 0.9.0 (its worked for me):
npm i --save-dev mini-css-extract-plugin#0.9.0
*optionally (--save-dev)
checkout all versions:
mini-css-extract-plugin/all-versions

This is most likely due to either a bug or an incompatible version of webpack, e.g. upgrading to the current major v2.0.0 releases on webpack 4.
For more information, please check the changelog for breaking changes and fixes.

I think you'll need to downgrade some other plugins as well. I was following a tutorial when I had the same error. This is what worked for me:
{
"name": "recipe-blocks",
"scripts": {
"dev": "cross-env BABEL_ENV=default webpack --watch",
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack -p"
},
"main": "index.js",
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.2.0",
"#wordpress/babel-preset-default": "^3.0.1",
"babel-loader": "^8.0.4",
"classnames": "^2.2.6",
"cross-env": "^5.1.5",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"raw-loader": "^2.0.0",
"sass-loader": "^7.1.0",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
},
"version": "1.0.0",
"license": "MIT"
}
Then Run:
npm install
npm run dev

husky pre-commit hook not working after adding it to package.json

I am working on a project and I want that every time I try to commit a new change, my tests are run and based on that it is decided whether the commit would happen. For this to happen I researched and found I can use husky's pre-commit hook.
I first installed husky in my project with
npm i husky --save-dev
which installed "husky": "^6.0.0" in my package.json.
Then I followed the tutorial and added the following object in package.json
"husky": {
"hooks": {
"applypatch-msg": "echo \"[Husky] applypatch-msg\"",
"pre-applypatch": "echo \"[Husky] pre-applypatch\"",
"post-applypatch": "echo \"[Husky] post-applypatch\"",
"pre-commit": "echo \"[Husky] pre-commit\""
}
}
As you can see, running git commit -m "some message!" should echo bunch of stuff which would mean that husky's pre-commit hook is working but instead nothing of the sort gets echoed. Now I have just no clue why is that not working. If it had worked I would have went on to add script in pre-commit hook to run my tests.
Here is the package.json file by the way:
{
"name": "test app",
"version": "1.0.1",
"description": "test app",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev": nodemon index.js",
"test": "find ./plugins -name '*test.js' | xargs mocha -R spec"
},
"dependencies": {
"#hapi/boom": "^9.0.0",
"#hapi/glue": "^7.0.0",
"#hapi/good": "^9.0.0",
"#hapi/good-console": "^9.0.0",
"#hapi/good-squeeze": "^6.0.0",
"#hapi/hapi": "^19.1.1",
"#hapi/joi": "^17.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"base-64": "0.1.0",
"confit": "2.3.0",
"hapi-auth-jwt2": "^8.8.1",
"hapi-mongodb": "^9.0.0",
"jws": "4.0.0",
"mongodb": "^3.5.7",
"pad-left": "2.1.0",
"pino": "^5.16.0",
"query-string": "^6.13.1",
"redis": "^2.8.0",
"selectn": "^1.1.2",
"superagent": "3.8.2",
"utf8": "^3.0.0",
"uuid": "^3.4.0",
},
"devDependencies": {
"chai": "^4.1.2",
"chai-datetime": "^1.6.0",
"chai-http": "^4.0.0",
"husky": "^6.0.0",
"mocha": "^5.1.1",
"nodemon": "^2.0.4",
"proxyquire": "^2.0.1",
"sinon": "^5.0.10",
"sinon-test": "^2.2.0"
},
"husky": {
"hooks": {
"applypatch-msg": "echo \"[Husky] applypatch-msg\"",
"pre-applypatch": "echo \"[Husky] pre-applypatch\"",
"post-applypatch": "echo \"[Husky] post-applypatch\"",
"pre-commit": "echo \"[Husky] pre-commit\""
}
}
}

This is a bit old but maybe my solution will help someone.
It didn't work for me either to use this technique. The cleanest I found is
add script to package json:
"prepare": ""chmod ug+x ./installHooks.sh && ./installHooks.sh""
with installHooks.sh containing:
#!/bin/zsh
FILE=.husky
if test -d "$FILE"; then
echo "$FILE folder already exists, deleting it before new husky installation";
rm -rf "./$FILE"
# else echo "$FILE doesn't exist yet";
fi
cd ../ && husky install ./sub-project/.husky
cd sub-project && npx husky add .husky/pre-commit 'cd sub-project && npm test'
chmod ug+x ./.husky/*
echo "hooks correctly installed. you may find them in `.husky/pre-commit`"
echo "they will be triggered each time you commit"
Explanation:
The prepare script will be ran automatically when running npm install or can be ran with npm run prepare
It will change the mode of installHooks.sh to executable then run it.
installHooks will check if the .husky folder already exists, delete it if it's the case, then install husky (note that going up one folder then down in sub-project is because my git repo contains several sub projects and I want to install this in the front-end one, here called sub-project. husky requires that you install it from the root so this is a workaround). Then adding pre-commit hook (npm test) Finally make husky hooks executable with chmod
Let me know if you have questions. I'm just starting writing scripts so this might not be the optimal way of doing this but it works

How to use "import" in Node.js?

I tried to deploy my project developed using React and Node.js to Heroku, but after issuing git push heroku master, I got an error:
2020-06-05T02:12:18.092681+00:00 app[web.1]: import express from "express";
2020-06-05T02:12:18.092682+00:00 app[web.1]: ^^^^^^^
2020-06-05T02:12:18.092682+00:00 app[web.1]:
2020-06-05T02:12:18.092683+00:00 app[web.1]: SyntaxError: Unexpected identifier
2020-06-05T02:12:18.092683+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:718:23)
I googled and it is said that Node.js doesn't support ES6 syntax, and I can solve it by using babel.
But I don't know how to configure it.
Below are my files:
.babelrc.json:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
package.json:
{
"name": "react_e-commerce",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js",
"build": "rimraf dist && babel backend -d dist",
"heroku-postbuild": "npm run build && cd e-commerce && npm install && npm run build"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.9.16"
},
"devDependencies": {
"#babel/cli": "^7.10.1",
"#babel/core": "^7.10.1",
"#babel/node": "^7.10.1",
"#babel/preset-env": "^7.10.1",
"babel-cli": "^6.26.0",
"mkdirp": "^1.0.4",
"nodemon": "^2.0.4",
"rimraf": "^3.0.2"
},
"engines": {
"node": "12.4.0",
"npm": "6.9.0"
}
}
And my whole project is on https://github.com/powerseed/e-commerce-React
The e-commerce folder is for frontend.
Thanks in advance!

You can just use require if you want. Here are the details on why there are two ways to bring in files. The difference between "require(x)" and "import x"

per the Nodejs docs I was able to use the following to run node node-module.js and similar may work in your situation--I'm unfamiliar with the specific node version you're working with currently, but the "type":"module" option would likely allow it--I'm using Nodejs v15 at the moment.
package.json
{
"type": "module"
}
node-module.js
import * as os from 'os';
import defaultstuff, { stuff } from './node-import-stuff.js';
console.log(123 === stuff, defaultstuff, Object.keys(os));
node-import-stuff.js
export const stuff = 123;
export default stuff;