So I've just upgraded my project to Parcel 2 and I encountered some issues with react-pdf (https://github.com/wojtekmaj/react-pdf) which I've fixed. My question is actually what's the "right" way to have done.
So what I did was the following...
In entry.parcel.js I changed from:
if (typeof window !== 'undefined' && 'Worker' in window) {
pdfjs.GlobalWorkerOptions.workerPort = new Worker('./pdf.worker.entry.js');
}
to Parcel 2's new Worker syntax
if (typeof window !== 'undefined' && 'Worker' in window) {
pdfjs.GlobalWorkerOptions.workerPort = new Worker(
new URL('./pdf.worker.entry.js', import.meta.url),
{ type: 'module' },
);
}
For the moment that change is in my own fork of react-pdf which I pull in via tarball from github.
Additionally certain imports expected that the /dist folder in ./node_modules/react-pdf would exist and it didn't. I added a script in my package.json:
"react-pdf-build": "cd ./node_modules/react-pdf && yarn && yarn build && cd ../../"
and added it to my yarn build command.
So my question remains: is the the "right" way to have done this? if not, please advise what is. Thanks so much!
Related
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
I tried to upgrade my react native project to the newest version (0.59.2). Unfortunately, now when trying to run react-native run-android im getting this error:
Could not determine the dependencies of task ':app:preDebugBuild'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
> Could not resolve project :react-native-camera.
Required by:
project :app
> Cannot choose between the following variants of project :react-native-camera:
- generalDebugRuntimeElements
- mlkitDebugRuntimeElements
All of them match the consumer attributes:
- Variant 'generalDebugRuntimeElements':
- Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'.
- Found com.android.build.api.attributes.VariantAttr 'generalDebug' but wasn't required.
- Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'.
- Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'.
- Found react-native-camera 'general' but wasn't required.
- Variant 'mlkitDebugRuntimeElements':
- Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'.
- Found com.android.build.api.attributes.VariantAttr 'mlkitDebug' but wasn't required.
- Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'.
- Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'.
- Found react-native-camera 'mlkit' but wasn't required.
I have already tried to create a new project however this results in the same error.
Reinstalling the node modules didn't help either.
On iOS it works fine.
Insert the following lines in android/app/build.gradle
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
}
}
Please insert the following line in android/app/build.gradle inside defaultConfig block either
missingDimensionStrategy 'react-native-camera', 'general'
or
missingDimensionStrategy 'react-native-camera', 'mlkit'
Add jitpack to android/build.gradle
allprojects {
repositories {
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
}
}
Complete guide
Could not resolve project :react-native-camera. on Android
Hope this helps.
Step 1:
Change the class path in android/build.gradle in dependencies tag to this:
classpath 'com.android.tools.build:gradle:3.3.0'
Step:2:
Change the gradle version in android/gradle/wrapper/gradle-wrapper.properties to this:
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
Step 3:
In the android/app/build.gradle add this at the top:
defaultConfig {
missingDimensionStrategy 'react-native-camera', 'general'
}
}
Step 4:
Also add these two lines:
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
Camera works now.
It is simple to resolve by adding missingDimensionStrategy attribute in defaultConfig tag in android/app/build.gradle.
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general'
}
}
If you are still having the same issue then you have to do the following steps.
Ensure that your gradle build tool version is greater than 3.3.0. You can use 3.4.1 for this purpose. Change the gradle build tool version from android/build.gradle file buildscript dependencies attributes.
buildscript {
...
dependencies {
classpath("com.android.tools.build:gradle:3.4.1")
}
}
Also have to change the gradle wrapper to 4.4 or later. You can change the gradle version in android/gradle/wrapper/gradle-wrapper.properties to this
distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
Finally add the following lines in repositories tag of android/build.gradle
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
I used creat-react-app to initialize some code which I want to share between native and web. In my package.json I have two separate commands for starting for each platform using react-scripts-ts and react-native-scripts-ts:
package.json
...,
"scripts": {
"tsc": "tsc",
"clean": "rimraf artifacts",
"build": "npm run clean && npm run tsc --",
"start-web": "npm run build && react-scripts-ts start",
"start-native": "npm run build && react-native-scripts start",
},
...
(a detailed description on how to do this can be found here https://medium.com/#yannickdot/write-once-run-anywhere-with-create-react-native-app-and-react-native-web-ad40db63eed0)
This great and I can use react-native components on both platforms. The problem I have is when I try to use external packages such as react-routing.
I include both react-router-native and react-router-dom in my package.json. I am trying to achieve what is described in this article (https://medium.com/#yannickdot/hi-jared-2650fbb2eda1) but using typescript not JS, giving me:
routing.native.tsx
export {
NativeRouter as Router, // Rename
Switch,
Route,
Link
} from 'react-router-native'
routing.web.tsx
export {
BrowserRouter as Router,
Switch,
Route,
Link
} from 'react-router-dom'
However, contrary as described in the article, when using typescript, it is not automatically recognized which file should be included. I get the simple error:
src/App.tsx:10:26 - error TS2307: Cannot find module './routing'.
10 import Router from "./routing";
Which makes sense because when I look at the output of the compiler, no module routing exists:
artifacts
| App.js
| routing
| routing.native.js
| routing.web.js
How can I tell the typescript compiler to include all *.native.tsx files when running the start-native command and all *.web.tsx files when running the start-web commmand?
Ideally, this should be possible at compile-time, passing additional parameters into the typescript compiler, which override the tsconfig.json. Example:
tsc --exclude="./**/*.native.tsx"
I know this can be done with a hacked solution, e.g. by writing a script to copy the entire source, deleting all unwanted files, keeping the correct ones, and compiling that copied source folder, but I want to know if there is a more neat way to do this.
Thanks in advance!
A possible solution without using external tools :
1. Create a function to check the platform running
see this question on Stackoverflow
export default function getPlatform(): string {
if (typeof document != 'undefined') {
// I'm on the web!
return 'web';
}
else if (typeof navigator != 'undefined' && navigator.product == 'ReactNative') {
// I'm in react-native
return 'native';
}
else {
// I'm in node js
return 'node';
}
}
2. Create routing/index.ts
import getPlatfrom from '../getPlatform';
const platform = getPlatfrom();
const routing = platform === 'web' ? require('./routing.web') : require('./routing.native');
export const {Router, Switch, Route, Link} = routing;
3. Use the routing
import { Route } from './routing/index';
You may add an interface IRouting and some type casting in routing/index, so that you don't lose type safety and autocompletion ...
I followed this tutorial to install the Wiris plugin on a new installation of Drupal.
Once the installation was complete and I clicked on the Wiris icon to begin adding a formula, the popup window does NOT load and I get the following error in the console area:
Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '/DrupalQuiz/sites/all/libraries/ckeditor/plugins/ckeditor_wiris/' in a call to 'postMessage'.
at http://*.*.*.*/DrupalQuiz/sites/all/libraries/ckeditor/plugins/ckeditor_wiris/core/core.js:19:22
The code causing the problem is as follows:
e.source.postMessage(postVariable, _wrs_conf_path);
I'm at a loss how to deal with this issue.
I don't have a complete fix but I was able to get it working locally by replacing _wrs_conf_path with the base path of my dev box. _wrs_conf_path was evaluating to a relative path to the plugins folder.
if (typeof(e.source) != 'undefined') {
e.source.postMessage(postVariable, _wrs_conf_path);
}
with
if (typeof(e.source) != 'undefined') {
e.source.postMessage(postVariable, _wrs_currentPath);
}
in the /sites/all/libraries/ckeditor/plugins/ckeditor_wiris/core/core.js file.
Edit: I replaced _wrs_conf_path with one of their internal variables _wrs_currentPath and that seemed to fix the issue.
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