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
Related
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.
I'm using this tutorial to make a React app. I have the most updated webpack-CLI 4.2.0 in devDependencies. I looked in node_modules/webpack-cli/bin/config-yargs but its not there. It only goes as far as 'bin' and it has one file in it. It's also telling me about
`(/Users/danielengel/Desktop/Project portfolio/watches/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)`
It has
// webpack-cli#3.3 path : webpack-cli/bin/config/config-yargs
let configYargsPath;
try {
require.resolve('webpack-cli/bin/config/config-yargs');
configYargsPath = 'webpack-cli/bin/config/config-yargs';
} catch (e) {
configYargsPath = 'webpack-cli/bin/config-yargs';
}
// eslint-disable-next-line import/no-extraneous-dependencies
// eslint-disable-next-line import/no-dynamic-require
require(configYargsPath)(yargs);
, And at the top of the file it has
`const yargs = require('yargs');
I've tried commenting out some of the code, or uncommenting in the node_modules but I know that's a bad idea. I also tried uninstalling and reinstalling the webpacks with NPM. I tried changing it to a regular dependency instead of dev-dependency. I tried installing it globally too.
Try using webpack serves instead of webpack-dev-server in package.json
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.
I received error log like the following while the app crashed:
Fatal Exception: com.facebook.react.modules.core.JavascriptException:
onSelect index.android.bundle:20:7148 onPress
index.android.bundle:20:2435
But it's not really helpful for me to trouble shoot. How could I enable source map so that I could track down where the issue is ?
UPDATE 2018
https://docs.expo.io/versions/latest/guides/using-sentry.html Looks promising !
For source mapping here is the way I go about it:
In my bundle command for my production build I tell it to generate a source map:
iOS:
react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js
Android - I had to actually modify the android/app/react.gradle file to get source maps generating on release compile. There might be an easier way but basically you find where it builds up the bundle command in the bundleReleaseJsAndAssets method and add the source map bit to it:
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
} else {
commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
}
The output path looks a bit odd but that puts it at your root level (same spot as iOS. I wanted it that way. You can obviously put it anywhere).
Then once you have an error with the line number that means nothing you run it through the "source-map" NPM package. You could probably get very elaborate with your approach but I simply went with:
var sourceMap = require('source-map');
var fs = require('fs');
fs.readFile('./sourcemap.js', 'utf8', function (err, data) {
var smc = new sourceMap.SourceMapConsumer(data);
console.log(smc.originalPositionFor({
line: 16,
column: 29356
}));
});
Where line and column should be replaced withe line and column number from your example output above.
This obviously works best if you have the source maps stored somewhere as the line and column numbers change from build to build as your code changes. It should get pretty close though if you can use you source control setup of choice to go back to the commit that was used to build the app in question and re-generate the bundle with the additional bits to the command to generate the source map.
Android inspired by #chetstone's answer
Starting on v0.32 for android, you can modify your android/app/build.gradle to accomplish this.
Look for the line
apply from: "../../node_modules/react-native/react.gradle"
Just above this, you will see something like:
project.ext.react = [
entryFile: "index.js",
]
Modify it to match the following
project.ext.react = [
entryFile: "index.js",
extraPackagerArgs: ["--sourcemap-output", file("$buildDir/../../../sourcemap.android.js")]
]
On iOS
Go to your build phases in Xcode for the "Bundle React Native code and images" phase and add:
export EXTRA_PACKAGER_ARGS="--sourcemap-output sourcemap.ios.js"
As noted, there's no obvious way to generate the sourcemap file for React Native on iOS. The bundle command is called from react-native-xcode.sh, and there's no provision to add parameters to the bundle command line. But I found a clean way to do it.
react-native-xcode.sh uses the environment variable BUNDLE_CONFIG to specify a config file. If you create an empty config file it has no effect, and then you can add additional CLI parameters.
Create an empty config file.
touch null_config
Set BUNDLE_CONFIG with your config file, and piggyback the --sourcemap-output parameter.
export BUNDLE_CONFIG="null_config --sourcemap-output ./sourcemap.js.map"
When you build, the file sourcemap.js.map will be created.
This is only for iOS.
step 1: Generate sourcemap.js file by using following command.
add this line in package.json file
"bundle:ios": "mkdir -p ios/{Bundle,source-map}; react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ios/Bundle/main.jsbundle --assets-dest ios/Bundle --sourcemap-output ios/source-map/sourcemap.js"
Run this command, it will create sourcemap.js file under $PROJECT_DIR/ios/source-map/ folder
$ yarn bundle:ios
Step 2: Create a file sourcemap-decoder.js under $PROJECT_DIR/ios/source-map/
$ cd ios/source-map/
$ touch sourcemap-decoder.js
Content of sourcemap-decoder.js is
const sourceMap = require('source-map'); //(install- npm i source-map)
const fs = require('fs');
const path = require('path');
fs.readFile(path.resolve(__dirname, 'sourcemap.js'), 'utf8', async (err, data) => {
if (err) {
console.log('err', err,);
}
const consumer = await new sourceMap.SourceMapConsumer(JSON.parse(data));
console.log(consumer.originalPositionFor({
line: 1408,
column: 7762
}));
});
Step 3: execute the script for decoding
$ node ios/source-map/sourcemap-decoder.js
I'm trying to take React 0.14 for a spin before I upgrade it in my project. However, with a simple "hello world" prototype, Webpack is throwing an error:
ERROR in ./~/react/lib/ReactElement.js
Module parse failed: /home/dan/Demos/reactiflux/node_modules/babel-loader/index.js!/home/dan/Demos/reactiflux/node_modules/react/lib/ReactElement.js Line 25: Unexpected string
You may need an appropriate loader to handle this file type.
| // The Symbol used to tag the ReactElement type. If there is no native Symbol
| // nor polyfill, then a plain number is used for performance.
| var REACT_ELEMENT_TYPE = typeof _Symbol === 'function' && _Symbol.'for' && _Symbol.'for'('react.element') || 0xeac7;
|
| var RESERVED_PROPS = {
# ./~/react/lib/ReactMount.js 18:19-44
I do have babel-loader configured, and when I downgrade to React 0.13, everything works. What really stands out to me, is _Symbol.'for', in the middle of the error message.
In react/lib/ReactElement.js on line 21 (not 25), that line looks much more correct, with square brackets around the 'for' key:
var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7;
I assume that the code shown in the error message is either in an intermediate state during compilation, or is the final compiled output. Does anyone know what could cause Webpack to produce something that looks so wrong? Has anyone successfully used Webpack, Babel and React ~0.14.1 together yet?
update
There is an issue for this: https://github.com/babel/babel/issues/2377
It's closed, but it looks like it came back for me. This was fixed in 5.8.25, but I have 5.8.29 and I still hit the bug.
It appears that the problem has something to do with me including babel runtime. My .babelrc was copied from an older project:
{
"optional": "runtime",
"stage": 0
}
In this little hello-world demo, there is nothing that requires bundling the runtime, so I just removed it, after noticing that https://github.com/DominicTobias/universal-react/, which also uses the same build tools, does not need it. That was the only change I needed to make to get this to build.
My webpack config is super simple:
var path = require("path");
module.exports = {
entry: "./index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index.min.js"
},
module: {
loaders: [{
test: /\.js$/,
loader: "babel"
}]
}
};
I guess that's what I get for copying a config file from a more complex project into what was supposed to be a simplest possible demo.
I see that there is a babel-plugin-runtime as well as a babel-runtime on NPM, but when I tried out BPR for the sake of completeness, Babel complains: Module build failed: ReferenceError: The plugin "runtime" collides with another of the same name. Since I don't actually need the runtime, the linked GH repo is a 404, and since this really belongs in the issue trackers after all, this is as far as I am going to take this for now.
No, that is not valid code. That was an issue in Babel project, but it has been fixed in the 6.0 version which was released recently.
I was run into this issue too, and now I have checked this with latest version, and it is works fine. Here is my test steps:
# install Babel and plugins
npm install babel-cli babel-preset-es2015 babel-plugin-transform-runtime
# install React
npm install react
# run babel against problem react file
./node_modules/.bin/babel node_modules/react/lib/ReactElement.js --plugins transform-runtime --presets es2015
It is provides valid output, so the issue seems to be resolved.
And there is good news for you, babel-loader for webpack already supports 6 version of Babel. Check out its docs for details