Run an NPM script inside every package in an NX project's library - npm

I'm using NX to manage a React design system mono-repo. I want to create my components within an NX Library and am currently looking into creating a Node package which will run the CSS for each component through PostCSS to get it production ready.
I've tested my PostCSS Node package in isolation and I know it's doing what I need it to to the files, however I'm having trouble working out how to configure the NX repo to run an NPM script in each component's package.json. A component such as my Button component has a package.json like so:
{
"name": "css-components-button",
"version": "0.1.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"prepack": "tools-postcss 'lib/**/*.css' dist/"
},
"dependencies": {
"tools-postcss": "file:.yalc/tools-postcss"
}
}
In the CSS Components Library the project.json file looks like this:
{
"name": "css-components",
"sourceRoot": "libs/css-components/src",
"projectType": "library",
"tags": [],
"targets": {
"lint": {
"executor": "#nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["libs/css-components/**/*.{ts,tsx,js,jsx}"]
}
},
"build": {
"executor": "#nrwl/rollup:rollup",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/libs/css-components",
"tsConfig": "libs/css-components/tsconfig.lib.json",
"project": "libs/css-components/package.json",
"entryFile": "libs/css-components/src/index.ts",
"external": ["react/jsx-runtime"],
"rollupConfig": "#nrwl/react/plugins/bundle-rollup",
"compiler": "babel",
"assets": [
{
"glob": "libs/css-components/README.md",
"input": ".",
"output": "."
}
]
}
},
"test": {
"executor": "#nrwl/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "libs/css-components/jest.config.ts",
"passWithNoTests": true
}
},
"prepack": {
"executor": "#nrwl/workspace:run-script",
"options": {
"script": "prepack"
}
}
}
}
In particular I've added a "prepack" custom target which I'm trying to use to run a "prepack" NPM script in each component's package.json. Currently when I run nx run css-components:prepack in the Terminal I get **error Command "prepack" not found.**
Would really appreciate some help with this. Any ideas?

Related

Express server is not deploying properly in Vercel

This is the first time, I tried to deploy my express server on Vercel. But, there are some issues probably. It didn't deploy correctly, I'm not sure why. However, localhost is running successfully. Getting 500: INTERNAL_SERVER_ERROR everytime.
I don't have any .envfiles as it's a practice project.
What I have tried:
package.json
"name": "assignment-1",
"version": "1.0.0",
"description": "In this project, I have written the first assignment of Programming Hero.",
"main": "index.js",
"engines": {
"node": "14.x"
},
"scripts": {
"start": "node index.js"
},
"keywords": [
"server",
"javaScript",
"node",
"express"
],
"author": "Riyad Hossain",
"license": "ISC",
"dependencies": {
"express": "^4.18.1"
}
}
vercel.json
"version": 2,
"builds": [
{
"src": "./index.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
Here is the response I found:

npm install #uiw/react-codemirror --save doesn't add the correct files to node_modules

I'm following a tutorial for how to set up Codemirror with react. I download the package with - npm install #uiw/react-codemirror
This works, as it allows me to:
import CodeMirror from "#uiw/react-codemirror"
When I try to import themes or keymaps, however, I'm given an error:
Module not found: Error: Package path ./theme/monokai.css is not exported from package path/to/node_modules/codemirror
import "codemirror/theme/monokai.css"
Both #codemirror and codemirror are available in node_modules, however codemirror doesn't contain a themes directory.
The package.json for the codemirror directory:
{
"name": "codemirror",
"version": "6.0.1",
"description": "Basic configuration for the CodeMirror code editor",
"scripts": {
"test": "cm-runtests",
"prepare": "cm-buildhelper src/codemirror.ts"
},
"keywords": [
"editor",
"code"
],
"author": {
"name": "Marijn Haverbeke",
"email": "marijnh#gmail.com",
"url": "http://marijnhaverbeke.nl"
},
"type": "module",
"main": "dist/index.cjs",
"exports": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
"types": "dist/index.d.ts",
"module": "dist/index.js",
"sideEffects": false,
"license": "MIT",
"dependencies": {
"#codemirror/autocomplete": "^6.0.0",
"#codemirror/commands": "^6.0.0",
"#codemirror/language": "^6.0.0",
"#codemirror/lint": "^6.0.0",
"#codemirror/search": "^6.0.0",
"#codemirror/state": "^6.0.0",
"#codemirror/view": "^6.0.0"
},
"devDependencies": {
"#codemirror/buildhelper": "^0.1.5"
},
"repository": {
"type": "git",
"url": "https://github.com/codemirror/basic-setup.git"
}
}
Would be thankful for any ideas as to why I'm getting this error. I've tried uninstalling codemirror and downloading it again, however the error persists.
I switched to a version of react-codemirror that downloads codemirror: 5.x and it works now
You might want to use theme doc, and doc

NPM CLI returns command not found

I have created a simple CLI to bootstrap projects with inquirer and have successfully published it to NPM. However, when installing it with
npm i -g noobject
it's successfully loading and installing.
When running
noobject
in the cmd line, it does return "command not found" and when running
npx noobject its returning the following.
npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Me\AppData\Local\npm-cache\_logs\2022-02-13T17_28_00_374Z-debug-0.log
I have tried it both on windows 10 and linux ubuntu 20.4.
Here is my index.js: https://sourceb.in/ZGZMWKU8tb
#! /usr/bin/env node
const inquirer = require("inquirer");
const fs = require("fs");
// FULL SOURCE TREE: https://github.com/vKxni/noobject
const CURR_DIR = process.cwd();
const CHOICES = fs.readdirSync(`${__dirname}/templates`);
// Questions asked to the User
const QUESTIONS = [
{
name: "project-choice",
type: "list",
message: "What project would you like to generate?",
choices: CHOICES,
},
{
name: "project-name",
type: "input",
message: "Project name:",
validate: (input) => {
if (/^([A-Za-z\-\_\d])+$/.test(input)) return true;
else
return "Project name may only include letters, numbers, underscores and hashes.";
},
},
];
// Send a prompt to choose a template
inquirer.prompt(QUESTIONS).then((answers) => {
const projectChoice = answers["project-choice"];
const projectName = answers["project-name"];
const templatePath = `${__dirname}/templates/${projectChoice}`;
// Create the folder with the project name choosed by the user
fs.mkdirSync(`${CURR_DIR}/${projectName}`);
createDirectoryContents(templatePath, projectName);
console.log(`✅ Successfully created ${projectName}`);
});
const createDirectoryContents = (templatePath, newProjectPath) => {
const filesToCreate = fs.readdirSync(templatePath);
filesToCreate.forEach((file) => {
const origFilePath = `${templatePath}/${file}`;
const stats = fs.statSync(origFilePath);
if (stats.isFile()) {
const contents = fs.readFileSync(origFilePath, "utf8");
if (file === ".npmignore") file = ".gitignore";
const writePath = `${CURR_DIR}/${newProjectPath}/${file}`;
fs.writeFileSync(writePath, contents, "utf8");
console.log(`⚠️ Created ${writePath}`);
} else if (stats.isDirectory()) {
fs.mkdirSync(`${CURR_DIR}/${newProjectPath}/${file}`);
createDirectoryContents(
`${templatePath}/${file}`,
`${newProjectPath}/${file}`
);
}
});
};
Here is my package.json:
{
"name": "noobject",
"version": "1.2.8",
"description": "Project generator written in NodeJS",
"main": "index.js",
"scripts": {
"noobject": "node index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vKxni/noobject.git",
"keywords": [
"node",
"generator",
"project",
"noobject"
],
"author": "vKxni",
"license": "ISC",
"dependencies": {
"inquirer": "^8.2.0"
},
"bin": {
"noobject": "index.js"
}
}
}
(As a pastebin: https://sourceb.in/CF4ydtNccG).
I hope anyone can help me so I can bootstrap projects and config files easier and faster.
Your problem is that you're missing a } for repository, so bin is actually inside repository. You can see there's a doubled } in the second to last line.
{
"name": "noobject",
"version": "1.2.8",
"description": "Project generator written in NodeJS",
"main": "index.js",
"scripts": {
"noobject": "node index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vKxni/noobject.git",
/* <----- should be here */
"keywords": [
"node",
"generator",
"project",
"noobject"
],
"author": "vKxni",
"license": "ISC",
"dependencies": {
"inquirer": "^8.2.0"
},
"bin": {
"noobject": "index.js"
}
} /* <----- wrong place! */
}
If you fix that, it works:
{
"name": "noobject",
"version": "1.2.8",
"description": "Project generator written in NodeJS",
"main": "index.js",
"scripts": {
"noobject": "node index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vKxni/noobject.git",
},
"keywords": [
"node",
"generator",
"project",
"noobject"
],
"author": "vKxni",
"license": "ISC",
"dependencies": {
"inquirer": "^8.2.0"
},
"bin": {
"noobject": "index.js"
}
}

How to publish React-Native component to NPM?

What are the steps to follow publish React-native component to npm?
Am trying to publish sample component in NPM.
Do we need to build that before?
if yes, how?
Please can any one tell in detail along with the commands?
No you no need to build, just put android native code in android and ios directory and a index.js in root to refreance them, then
Add readme
give proper versioning
give proper name
Like this in package.json
{
"_from": "package-name#0.1.3",
"_id": "package-name#0.1.3",
"_inBundle": false,
"_location": "/package-name",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "package-name#0.1.3",
"name": "package-name",
"escapedName": "package-name",
"rawSpec": "0.1.3",
"saveSpec": null,
"fetchSpec": "0.1.3"
},
"_requiredBy": [
"/"
],
"_spec": "0.1.3",
"author": {
"name": "Your name",
"email": "your#gmail.com"
},
"bugs": {
"url": "https://github.com/bug/issues"
},
"dependencies": {
"prop-types": "^15.6.0"
},
"description": "description about pacakge",
"homepage": "https://github.com/#readme",
"keywords": [
"react-native",
"react",
"dnd"
],
"license": "MIT",
"main": "index.js",
"name": "package-name",
"peerDependencies": {},
"repository": {
"type": "git",
"url": "git+https://github.com/package-name.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"version": "0.1.3"
}

how to run 2 watch tasks in VS code?

I want to run 2 npm scripts in parallel, but this VS Code only runs the first task and stops there. How can I solve it?
My tasks.json is as below:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"suppressTaskName": true,
"args": [
"run"
],
"tasks": [
{
"args": [
"gulp"
],
"taskName": "gulp",
"isBuildCommand": true
},
{
"args": [
"babel"
],
"taskName": "babel",
"isBuildCommand": true
}
]
}
On Windows, the NPM package "concurrently" may help you.
In the package.json:
"scripts": {
"gulpbabel": "concurrently \"npm run gulp\" \"npm run babel\""
},
Then in tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "gulpbabel",
"isBackground": true,
"problemMatcher": [
"create_one_for_gulp",
"create_another_for_babel",
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Ideally (but not required), you also need to create two problem matchers: one for the gulp task and one for babel. They should be able to extract error details from the merged output and to detect when the respective task's watcher fires/stops (so that VS Code can display the rotating '\' in the status bar).
I don't believe you can do both tasks at once. Instead you can do this from npm.
In the tasks.json file:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"suppressTaskName": true,
"args": [
"run"
],
"tasks": [
{
"args": [
"gulpbabel"
],
"taskName": "gulpbabel",
"isBuildCommand": true
}
]
}
In the package.json file if you are on windows:
{
"name": "stacktest",
"version": "1.0.0",
"description": "",
"scripts": {
"gulpbabel": "gulp & babel"
},
"author": "",
"license": "ISC"
}
In the package.json file if you are on unix/linux/mac:
{
"name": "stacktest",
"version": "1.0.0",
"description": "",
"scripts": {
"gulpbabel": "gulp && babel"
},
"author": "",
"license": "ISC"
}