`pnpm add` within a workspace does not add projects from workspace - monorepo

I am working with a very simple monorepo with the following structure:
.npmrc
package.json
pnpm-workspaces.yml
packages/
package-1/
package-2/
When I cd into package-1, I am trying to add a reference to package-2 by doing the following:
pnpm add #myorg/package-2
But I get the error #myorg/package-2 is not in the npm registry, or you have no permission to fetch it.. I expect that pnpm add would detect that I'm inside a workspace and automatically link workspace packages. Am I missing something here?
Here is the relevant information you should need:
My packages use the #myorg/[package-name] convention inside of package.json "name" field.
The pnpm-workspaces.yml file is as follows:
packages:
- 'packages/**'
My .npmrc file is as follows:
link-workspace-packages = true
prefer-workspace-packages = true
recursive-install = true

Ugh, I'm leaving this in case anybody else wants to feel embarrassed for themselves.
The pnpm-workspaces.yml should be named pnpm-workspace.yaml - I'm not sure where I got the other invalid name... but hopefully this helps you waste less time than I did.

Related

Uncaught TypeError: Cannot read properties of undefined (reading 'call') at Hash.CipherBase

I am using create-hash package (https://github.com/crypto-browserify/createHash) in my code of ionic react application.
I have installed the package using npm install create-hash
I am using the function as following:
const hash = createHash('sha256')
.update("entropyBuffer")
.digest();
However, it throws the following error in the browser:
When I change the algorithm to the following: 'md5', 'rmd160' and 'ripemd160', it works fine. I don't understand what is the problem?
I have looked at the similar queries online but nothing was helpful.
https://github.com/crypto-browserify/cipher-base/issues/11
How to generate a Mnemonic in Angular (with npm package bip39 for Solana)
Referring to the original answer here - Link
patch-package helped me:
npm i patch-package
in the package.json add this line:
"scripts": {
"postinstall": "patch-package",
}
opend the problem file and correct it. In my case:
node_modules/cipher-base/index.js
var Buffer = require('safe-buffer').Buffer
var Transform = require('readable-stream').Transform // replacing instead of "stream"
var StringDecoder = require('string_decoder').StringDecoder
var inherits = require('inherits')
function CipherBase (hashMode) {
...
run the command from a root dir of your project:
npx patch-package cipher-base
it'll create a new folder patches in the root dir and add there this fix. That's all. Commit changes. It'll automaticaly replace code in the node_modules after reinstalling packages

How to add pre-built package to image in Yocto?

I would like to add pre-built ipk package to the final image using Yocto at build time. What should be the correct workflow for this?
What I have tried:
1) As suggested here I used bin_package class and added ipk package to the SRC_URI
inherit bin_package
...
SRC_URI = "file://test.ipk;subdir=test-1.0"
This unpacks the package and repack it again. Unfortunately it omitted some control scripts, etc. when unpacking to work directory. Don't know why? With additional small modifications I got some usable solution, but I doubt that this is correct approach.
2) Use the package in original form and install it directly to rootfs
I tried something like this
inherit deploy
SRC_URI = "file://test.ipk;unpack=0"
do_deploy() {
install -D ${WORKDIR}/test.ipk ${DEPLOY_DIR_IPK}/test.ipk
}
addtask deploy after do_compile
I don't know if I can just copy package to e.g. "${DEPLOY_DIR_IPK}" and how to let Yocto know that the package is available and that I could use "IMAGE_INSTALL_append += "test"" to have it installed in the image.
Thanks for inputs!
To be honest I don't understand the first solution, secondly according to the documentation about do_deploy task : https://www.yoctoproject.org/docs/current/mega-manual/mega-manual.html#ref-tasks-deploy Why don't you use do_install ?
I'm not an expert but I think you should maybe try something like that:
SUMMARY = "sample recipe"
LICENSE = "CLOSED"
SRC_URI = "file://test.ipk;unpack=0"
do_install () {
install -d ${D}${foobar}
install -m 0755 ${WORKDIR}/test.ipk ${D}${foobar}
}

TypeScript with Relay: Can't resolve generated module

In my MessageItem.tsx component I have the following code:
const data = useFragment(
graphql`
fragment MessageItem_message on Message {
date
body
}
`,
message as any
);
After running relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__, a module named MessageItem_message.graphql.ts gets generated.
But when I run the app it gives me an error:
Failed to compile.
./src/components/MessageItem.tsx
Module not found: Can't resolve
'./__generated__/MessageItem_message.graphql'
The reason is only components at the src root can refer to the right path (./__generated__), whereas components in a folder actually need to refer to the path (../__generated__) but it's not doing so.
How can I configure the path?
Edit .babelrc to point to the artifactDirectory
// .babelrc
{
"plugins": [
[
"relay",
{
"artifactDirectory": "./src/ui/graphql/types"
}
]
]
}
Remove "--artifactDirectory ./src/__generated__" from the relay-compiler options.
By default it seems the Relay compiler puts a "__generated__" directory in the directory with any source code containing GraphQL.
As a result any "./__generated__" references anywhere and at any level in the source code hierarchy now work as they should.
Thanks to #ThibaultBoursier for the pointer.
PS I wonder if the --artifcactDirectory option is just meant to be used to change the name of the artifact directory, rather than its location?
Just moments ago I ran into the same issue. The reason is that the relay-compiler is using the artifactDirectory setting to decide where to put the generated files, but the babel-plugin-relay exposing the graphql tag needs to get the very same argument otherwise it just attempts to include a colocated relative file.
I fixed it in my case by configuring the plugin with a babel-plugin-macros.config.js file as follows (where the artifactDirectory is the same as the one supplied to the relay-compiler):
module.exports = {
relay: {
artifactDirectory: "./src/ui/graphql/types",
},
};
This solution assumes you are using the macro via babel-plugin-macros, otherwise you might need to supply that argument via the .babelrc file but I have no experience with that unfortunately.

Reactnative - 'React/RCTBridgeModule.h' file not found

I am trying to use react-native-linea in my react native app and during build I am getting React/RCTBridgeModule.h' file not found error.
Steps I tried -
1. react-native init ScannerApp
2. cd ScannerApp/
3. npm i react-native-linea --save
4. react-native link react-native-linea
5.Drag and drop the InfineaSDK Framework into the General > Embedded Binaries section of your Project. The framework will also display the Linked Frameworks and Libraries.
a. Verify that Copy Items if needed is checked.
6.Add the following to General > Linked Frameworks and Libraries:
• CoreLocation.framework
• ExternalAccessory.framework
• Foundation.framework
7.Add a new Run Script phase.
At the end of your project’s Build phase(s), add new running scripts to set up InfineaSDK.
FRAMEWORKS="${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}" "${FRAMEWORKS}/InfineaSDK.framework/SDKSetup"
8.react-native run-ios
****Error*****
simulator/react-native-linea.build/Objects-normal/x86_64/RCTLinea.o
In file included from /Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.m:9:
/Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.h:9:9: fatal error: 'React/RCTBridgeModule.h' file not found
#import <React/RCTBridgeModule.h>
^~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.
** BUILD FAILED **
Solution 1: Adding podspec
Prerequisite: You will need to setup React as cocoapod dependency for this to work. Also, before you try this make sure you have package react-native-linea available in node_modules.
In this solution you need to create a podspec file for the linea. You can choose to keep it in your ScannerApp project or fork the original repo and add the podspec file to it. If you fork, please modify the git urls in the podspec to your repo url and add the react-native-linea package from your repo. Here's the podspec that worked for me,
require 'json'
package = JSON.parse(File.read(File.join(__dir__, '../node_modules/react-native-linea/package.json')))
Pod::Spec.new do |s|
s.name = 'LineaPro'
s.version = package['version']
s.summary = package['description']
s.license = package['license']
s.homepage = 'https://github.com/pablo-coco/react-native-linea'
s.authors = 'pablo-coco'
s.source = { :git => 'https://github.com/pablo-coco/react-native-linea.git', :tag => s.version }
s.source_files = '*.{h,m}','react-native-linea/*.{h,m}'
s.requires_arc = true
s.platforms = { :ios => "9.0" }
s.vendored_libraries = 'libdtdev.a'
s.frameworks = 'ExternalAccessory', 'CoreLocation'
s.dependency 'React'
end
Now you need to add this as cocoapod dependency in your ScannerApp podfile. If you add podspec file locally, make sure to specify its path as below,
pod 'LineaPro', :path => '../node_modules/react-native-linea', :podspec => '../ios/LineaPro.podspec'
If you created fork and added podspec to repo then skip the :podspec part.
Solution 2: Add source files directly
This is fairly simple solution and i'd recommend this. You can clone the react-native-linea repo locally on your machine.
Copy DTDevices.h, RCTLinea.h, RCTLinea.m source files to ios project
Copy LineaPro.js, NativeBridges.js to js project
Copy libdtdev.a static lib to project
Link ExternalAccessory, CoreLocation frameworks and libdtdev.a to your target
Compile and write js code to initialize LineaPro module.

How to not show warnings in Create React App

I'm using create-react-app from Facebook, when it starts via 'npm start' it shows me a list of warnings, such as:
'Bla' is defined but never used
Expected '===' and instead saw '=='
I don't want to see any of these warnings, is there a way to supress them?
For local Eslint, add a file to your project named .eslintignore and add any directories or files you want to ignore:
build/
src/
*.js
Though you might as well remove it entirely at this point.
This doesn't work with building or starting the code however, if you are using create-react-app. There is no way to disable Eslint without ejecting because it's built into react-scripts. Anytime any you build or start the server, it will run eslint using its internal configs aside from special cases defined in package.json. The only way around that is to eject or prepend each file with the disable comment as mentioned elsewhere. See this issue on Github for more information.
Those warnings come from eslint. To disable them add /* eslint-disable */ at the top of the file you don't want to follow the eslint rules.
For specific eslint warning supression insert the following code at the beginning of the file.
/* eslint-disable react/no-direct-mutation-state */
My rep is not high enough to comment on #fly's excellent answer, so I'll C+P it to add this instead:
For anyone looking for a temporary but quick and effective workaround for disabling console warnings from DevTools, this might do the trick.
Disclaimer - this might not work on versions that are not mine(react-scripts v3.0.1, react-dev-utils#^9.0.1), so use it at your own risk.
enter this directory
node_modules/react-dev-utils/webpackHotDevClient.js
look for this function(should be around line 114)
function handleWarnings(warnings) {
either add the return at the start of function printWarnings() (line 124), or comment out the call to printWarnings() in line 145.
restart, eg with npm run start, for change to take effect.
This way, the hot reloader continues to work, but the annoying warnings which have already been caught in my editor are not output in the browser.
Recently the ability to add your own editor configurations was added, this can be used to "partially" disable the functionality of ESLint. You just need to create a configuration file in the root directory.
.eslintrc:
{
"parser": "babel-eslint"
}
.env
SKIP_PREFLIGHT_CHECK=true
If you create a new application, it will by default come with a pre-filled eslintConfig object in the package.json
To Completely Remove eslint warnings, what you can do is create a file named .eslintignore add * and save it. You wont see any more warning.
*
To Remove warnings from a particular folder means in the .eslintignore file add that folder name
/folder_name
/folder_name/file_name.js
You can also do this in the file level also. Add the following in the beginning of the file
/* eslint-disable */
To ignore the next line warning in a file
// eslint-disable-next-line
If you want to disable warnings in DevTools
Open the Console Tab.
Default levels/Custom levels -> uncheck Warnings
Set the DISABLE_ESLINT_PLUGIN environment variable:
DISABLE_ESLINT_PLUGIN=true npm start
For anyone looking for a temporary but quick and effective workaround for disabling console warnings from DevTools,
this might do the trick.
Disclaimer - this might not work on versions that are not mine(react-scripts v3.0.1, react-dev-utils#^9.0.1),
so use it at your own risk.
enter this directory
node_modules/react-dev-utils/webpackHotDevClient.js
look for this function(should be around line 114)
function handleWarnings(warnings) {
and add a return statement right after it.
Your code should end up looking like this(if you're using webstorm)
That should shut the webpackHotDevClient.js:{whateverLineIdontCare} right up.
Cheers.
If you're using create-react-app, then you can go into the package.json and edit the eslintConfig value. I just wanted to disable the "eqeqeq" and "no-unused-vars" rules, so mine looks like this:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"eqeqeq": "off",
"no-unused-vars": "off"
}
},
You'll have to re-run npm start for it to take effect.
Add a .eslintignore file and add
src/*
You can read more about this at
https://eslint.org/docs/user-guide/configuring/ignoring-code
https://eslint.org/docs/user-guide/configuring/rules
You can use craco and configure craco.config.js for example
module.exports = {
webpack: {
configure: (webpackConfig) => {
const ignoreWarnings = [{ module: /some module/, message: /some message/ }]
return { ...webpackConfig, ignoreWarnings }
}
}
}
more details here
You can disable the typescript and/or linting errors with setting the environment variables in .env
TSC_COMPILE_ON_ERROR,
ESLINT_NO_DEV_ERRORS, to true
more information on advanced configuration for create react app on
https://create-react-app.dev/docs/advanced-configuration/
This is a simple way I avoid seeing unused variable warnings when debugging:
import someVariable from "./wherever"
// Prevent unused variable warnings
while (false) {
console.log(someVariable)
}

Resources