I use react-native-web to have components that can be used not only mobile but also in web browsers. My understanding of the idea is simple: Provide an HTML-based implementation for the regular react-native components.
If I understand the library correct, it works by overwriting the package with webpack:
// webpack.config.js
module.exports = {
...
resolve: {
alias: {
'react-native': 'react-native-web'
}
}
};
But what if I want to provide implementations for components that are not implemented by react-native-web? And how could I provide an implementation for external packages like react-native-button.
A package like react-native-button is just a collection of code that uses React Native's API. If you load react-native-web as a stand-in for the original implementation, the third-party package might "just work". How well it works depends on how complete react-native-web's implementation of the API is.
Note that some third-party React Native packages include specific non-Javascript code (iOS/Android native code) that react-native-web does not aim to implement. If the package documentation says that you need to run react-native link or change your Xcode/Android Studio project configuration, it's probably not readily usable with react-native-web.
Related
Background
I often use "React Developer Tools" to understand the component structure of various website that I like and take inspiration from. Though, lot of websites have random names for the components, few websites have distinguishable names which can be helpful for aspiring React Developers or hobbyists. One such website is https://www.joshwcomeau.com. Below is a screenshot from one of the pages in his website. The name of few of the components explains itself what it is going to render. And since this is his blog, where he talks about various tips and tricks for React Development, it becomes helpful to have a look at this.
Question
Now when I develop a website using create-react-app(CRA), all my component names are minified to a couple of random letters by Webpack. How can I control this behavior?
Note: My main question is - How to control this behavior in any React application (not just CRA). I know that Josh uses Next.js for his blog, so does any framework like Gatsby, Next etc... provide control over this?.
Note:
I'm aware that the component names are visible in development mode, but I would like it to be visible in production too (for the reason explained above in "Background").
I'm aware that webpack can generate "sourcemap" but doing that would expose my entire code structure. So I prefer not to use sourcemaps
Screenshot of Josh's Website
Screenshot of My Website
You can achieve this with a third party library:
From webpack-react-component-name documentation:
Normally React component names are minified during compilation. This plugin makes these component names available in production bundles by hooking into Webpack's compilation process, traversing the AST looking for React component definitions and updating the emitted source code to populate the displayName property. This is the property that, when populated, is used by the React Dev Tools extension to determine the name of a component.
So you can install this webpack plugin with:
npm install webpack-react-component-name -save-dev
once it is installed, add the plugin to the plugins list in webpack configs:
plugins: [
new WebpackReactComponentNamePlugin()
],
I have a task.
To have Micro Frontends with single-spa framework.
portal/main application (which load all other js code by url)
Micro Frontend 1 (react based)
Micro Frontend 2 (react based)
So my problem just one: I don't want to duplicate vendor libraries like react, react-dom (any others). And I want to make them shared among other Micro Frontends (which is bundled with webpack)
I know what is the bad practice to have some global stuff (it's violate the whole idea of bundeling with webpack). But how to solve the problem of duplication of vendor libraries?
I found one solution just load decencies with SystemJs like separated tags in html, but I just wonder maybe there is another solutuion for that.
Thank you.
SystemJs approach to load dependencies by demand but from CDN, I just want do the same but load all dependencies from "shared" webpack bundle with react and other stuff.
window.SystemJS = window.System
function insertNewImportMap(newMapJSON) {
const newScript = document.createElement('script')
newScript.type = 'systemjs-importmap'
newScript.text = JSON.stringify(newMapJSON)
const allMaps = document.querySelectorAll('script[type="systemjs-importmap"]')
allMaps[allMaps.length - 1].insertAdjacentElement(
'afterEnd',
newScript
)
}
const devDependencies = {
imports: {
react: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js',
'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js',
'react-dom/server': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom-server.browser.development.js',
'single-spa': 'https://unpkg.com/single-spa#4.3.2/lib/umd/single-spa.min.js',
lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js',
rxjs: 'https://unpkg.com/rxjs#6.4.0/bundles/rxjs.umd.js',
}
}
const prodDependencies = {
imports: {
react: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js',
'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js',
'react-dom/server': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom-server.browser.production.min.js',
'single-spa': 'https://unpkg.com/single-spa#4.3.2/lib/umd/single-spa.min.js',
lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js',
rxjs: 'https://unpkg.com/rxjs#6.4.0/bundles/rxjs.umd.min.js',
}
}
const devMode = true // you will need to figure out a way to use a set of production dependencies instead
if (devMode) {
insertNewImportMap(devDependencies)
} else {
insertNewImportMap(prodDependencies)
}
Update:
Just realized, that your question is directed at Micro Frontends (not only micro services) and therefore is not about sharing libraries with Webpack in general. Added Micro Frontend to your tags/title and updated the answer to be more focused on this topic.
So my problem just one: I don't want to duplicate vendor libraries like react, react-dom (any others). And I want to make them shared among other [Micro Frontends] (which is bundled with webpack)
What you can do is exclude dependencies from the output bundle of your Micro Frontends by adding a Webpack externals property to the config.
webpack config of your Micro Frontends:
module.exports = {
...
externals = {
react: 'React',
'react-dom': 'ReactDOM'
}
}
Above config would exclude react and react-dom and expect them in the global variables React and ReactDOM. You can then share those dependencies by including the libraries in a script inside index.html of your root applicationn aka stitching layer:
<html>
...
<body>
...
<script src="<your-host>/react.prod-16.9.0.min.js"></script>
<script src="<your-host>/react-dom.prod-16.9.0.min.js"></script>
</body>
</html>
If you have other common components to share, you can also integrate the library scripts in a component library.
The reason for the include as script is: We do not want that our container has to require/import the Micro Frontends at build time in order to avoid a coupling of build/release/version management between all apps. Instead one purpose of Micro Frontends is to achieve fully independent deployment of the parts, which include continuous delivery steps from build, test to release.
I know what is the bad practice to have some global stuff (it's violate the whole idea of bundeling with webpack).
Of course, you create some form of coupling between the apps. But if you have a mature, stable and common library shared by all parts, it is a reasonable decision.
Hope, it helps (now)!
The best way to achieve this today is using Webpack's new Module Federation technology released in v5. This approach does not use SystemJS but rather the internals of Webpack. We tried several different micro frontend approaches, but this one outshines them all & is currently running successfully for us in production. There are definitely some challenges to setting it up but it was worth the developer productivity gains.
Here is the info site produced by the creator Zack Jackson which should provide all the resources you need: https://module-federation.github.io/
Here is the link to webpack docs which deal more with technicalities rather than how to practically set up a full micro frontend architecture: https://webpack.js.org/concepts/module-federation/
I built a small React application that ultimately will be in a section on a page with other small apps. The way the system is architected requires that each app be a require module that exports an init function that when called will render the app into a div by id. I have already tweaked my React build so that I have a single js file. Now I'm trying to figure out if I can make this final build be somehow loadable with requirejs. I have found a lot of information about using requirejs as part of the build but I would rather be able to stay with the create-react-app way and maybe somehow add in the ability to do the output in an AMD way. I know this must seem silly but I can't otherwise get around the AMD architecture of this platform.
You can achieve this by tweaking the configuration of webpack.config.js file, you need to check out webpack's output.library options (library, libraryExport, and libraryTarget):
https://webpack.js.org/configuration/output#module-definition-systems
module.exports = {
//...
output: {
library: 'MyReactAppLibrary',
libraryTarget: 'amd'
}
}
I am following the React-router docs, but I have encountered an obstacle that is not really related to the router itself: Babel transpiles the {import} as require, which would be used by Express or Node.js on the server, but from what I understand from the docs, it is actually intended for client-side rendering.
Of course, the JSX file with the router transpiled using Babel and included into a HTML browser page does not work, since require is only used by express/node server-side.
May I ask how is it actually supposed to work in the browser?
Thank you
Babel's transpile of import produces code relying on CommonJS require, you're correct.
You're also correct that node offers a natire require implementation, whereas browsers do not.
There are tools - such as webpack, browserify, and requirejs (among others,) which each do at least two things:
to package up source into a single bundle
to expose that source in a way that satisfies require to match node, allowing you to use the same code at either side.
To that end, what you need to do is to pair babel with one of the packaging tools.
Webpack is more powerful; browserify is easier to use.
Here's a tiny gulpfile where I've automated the process. The relevant source clip is this:
gulp.task('browserify', ['babel'], function() {
var browserifyConfig = {},
bpack = browserify(browserifyConfig, { 'debug' : !production });
return bpack
.require('./dist/pbar.es5.js', { 'expose' : 'pbar' })
.bundle()
.on('error', errorHandler)
.pipe(source('pbar.es5.js'))
.pipe(gulp.dest('./dist'));
});
In order for commonjs like require statement to work in a browser environment. You will need to look into a bundling solution like:
https://webpack.github.io/
http://browserify.org/
A bundler will statically parse your commonjs files and their dependencies to create a bundle which can be used in the browser.
Internet is full of great examples on how they work.
Browserify is easier to get started than Webpack, however I would suggest you learn Webpack over Browserify. Webpack provides you much much more than just loading JS files with its extensive loaders, for example you can do something like:
const imgSrc = require('images/test.svg')
magical right?
I'm writing a simple Twitter app using react-native. Using twit module to get twitter feeds and stream. Below is the code, it works fine node. However, when included into my react-native app, seeing error "Requiring unknown module "crypto"". Dependency seems to be myapp->twit->oauth->crypto (thats part of node v0.12.2). Any suggestions to get this working inside react-native environment?
var Twit = require('twit')
var T = new Twit({
consumer_key:''
, consumer_secret:''
, access_token:''
, access_token_secret:''
})
var filtered_tweets=[];
var error;
var isSuccess=false;
function getTweets(searchString){
T.get('search/tweets',{q:searchString, count:100}, getResponse);
}
function getResponse(err,data,response){
if(err) {
handleGetErr(err);
}
handleGetData(data.statuses);
}
function handleGetErr(err){
enter code here
error = err;
}
function handleGetData(data){
data.map(function(tweet){
var twit={
twit:tweet.id,
created_at:tweet.created_at,
text:tweet.text,
retweet_count:tweet.retweet_count,
favorite_count:tweet.favorite_count
};
filtered_tweets.push(twit);
});
console.log(filtered_tweets);
isSuccess=true;
}
getTweets("#sahaswaranamam");
module.exports = getTweets;
![attached][2]
The crypto module is a built-in Node module; React Native runs JS on JavaScriptCore (when on the device or simulator) and on Chrome itself (when using Chrome debugging), so modules that depend on built-in Node.js modules won't work. See the JavaScript Runtime section of the React Native docs for more info.
I'm not sure how hard it would be to integrate into a React Native app, but browser module bundlers like Browserify often have browser versions of core Node.js modules, like this one for crypto.
If you are using rn-nodeify as #emmby suggests, then you can use react-native-crypto. Instructions from the README:
Install
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev mvayngrib/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native"
# field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
rn-nodeify will create a shim.js in the project root directory
// index.ios.js or index.android.js
// make sure you use `import` and not require!
import './shim.js'
// ...the rest of your code
But rn-nodeify also states:
If you're looking for a saner approach, check out ReactNativify. I haven't tested it myself, but I think philikon will be happy to help
With ReactNativify you create a rn-cli.config.js and then in a transformer.js you let Babel transform bundle dependencies using babel-plugin-rewrite-require:
// The following plugin will rewrite imports. Reimplementations of node
// libraries such as `assert`, `buffer`, etc. will be picked up
// automatically by the React Native packager. All other built-in node
// libraries get rewritten to their browserify counterpart.
[require('babel-plugin-rewrite-require'), {
aliases: {
crypto: 'crypto-browserify',
// ...
},
throwForNonStringLiteral: true,
}]
(Note: You can also do this in without these 2 js files directly in .babelrc)
(Note2: Though ReactNativify is the cleaner way, it is still giving me issues wiring up crypto.getRandomValues for production-use in RN. See this question)
You can use the rn-nodeify module to get crypto on react-native.
Add rn-nodeify to your devDependencies in package.json:
"devDependencies": {
"rn-nodeify": "^6.0.1"
}
Add the following to the scripts section of the same file:
"scripts": {
…
"postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack"
}
Be aware that rn-nodeify will modify your package.json.
More information available here: https://www.npmjs.com/package/rn-nodeify
React Native packager uses Babel under the hood. This means that you can use babel-plugin-rewrite-require Babel plugin to rewrite all require('crypto') calls to require('crypto-browserify'), assuming that the latter is installed in your node_modules.
As of January 2016, you can use .babelrc file to define optional configuration, so this becomes really easy. First, install the dependencies:
npm install --save crypto-browserify
npm install --save-dev babel-plugin-rewrite-require
Then add plugins config to your .babelrc file:
{
"presets": ["react-native"],
"plugins": [
["babel-plugin-rewrite-require", {
"aliases": {
"crypto": "crypto-browserify"
}
}]
]
}
Restart the packager and that should be it.
This is the same approach that ReactNativify uses, except that here we use .babelrc instead of defining custom transformer. When ReactNativify was written, it was not supported, so they had to go with more complex solution. See this file from ReactNativify for almost complete list of node polyfills.
I was having the same issue when implementing the Twilio package in my React Native app, and having React Native break over the crypto dependency.
As a work around I ended up creating a separate, stand alone Node/Express app to act as my server and take care of the Twilio logic I had. That way I removed all Twilio logic from my React Native app and moved it to Node. I then just called my Express route in React Native using fetch, which triggered the functionality I wanted to happen with Twilio. If you're unfamiliar with fetch here's a good starting point -
Making AJAX calls with Fetch in React Native
In addition, here's my question on the crypto dependency breaking my app:
twilio-react-native-unable-to-resolve-module-crypto
As far I can see amazon-cognito-identity-js uses crypto-js 3.3.0 without any additional magic... If that version of the package works then perhaps try that.
After having tried a bunch of these solutions and never really having been satisfied with any of them (some didn't even work), I managed to stumble upon react-native-quick-crypto, which honestly worked much more effortlessly than trying to lift the existing crypto library to the front-end