We have a react-native project implemented using typescript, react-navigation, react-native-gesture-handler, redux/toolkit as the main packages
recently we integrated react-native-web into our project, but it is not running correctly.
there are several problems with our project:
we cannot load custom modules when we import them. for example:
import MyCustomComponent from './components/MyCustomComponent'
<View style={{flex: 1, backgroundColor: 'green'}}>
<MyCustomComponent/> <--- does not show up, event when it contains a simple View component, we will see a blank screen
</View>
but when I define MyCustomComponent inside the current file, it shows up with no problem:
function MyCustomComponent() {
return(
<View style={{flex:1, backgroundColor: 'yellow'}}></View>
)
}
export default function MyMainComponent() {
return (
<View style={{flex:1, backgroundColor: 'green'}}>
<MyCustomComponent/> <---- this shows up
</View>
)
}
anything that goes inside the redux Provider will not show up any more.
I think our webpack configuration is wrong, but since I'm not expert in web development, I need some help to figure out what's wrong. here is our webpack configuration:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const appDirectory = path.resolve(__dirname);
const {presets} = require(`${appDirectory}/../babel.config.js`);
const compileNodeModules = [
// Add every react-native package that needs compiling
'react-native-gesture-handler',
'react-redux',
'react-native-reanimated',
'react-native-confirmation-code-field',
'react-native-calendars',
'#react-native-google-signin/google-signin',
'react-native-compressor',
'react-native-swipe-gestures',
'#react-native-async-storage',
'react-native-shared-element',
'#react-navigation',
'react-native-material-menu',
'#reduxjs/toolkit',
'react-navigation-shared-element',
'react-native-collapsible-tab-view',
'react-native-image-crop-picker',
'#react-native-community',
'react-nativbe-safe-area-context/lib',
'react-native-screens',
].map(moduleName =>
path.resolve(appDirectory, `../node_modules/${moduleName}`),
);
const babelLoaderConfiguration = {
test: /\.js$|tsx?$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(__dirname, '../index.web.js'), // Entry to your application
path.resolve(__dirname, '../src/index.web.tsx'), // Change this to your main App file
path.resolve(__dirname, '../src'),
...compileNodeModules,
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets,
plugins: ['react-native-web'],
},
},
};
const svgLoaderConfiguration = {
test: /\.svg$/,
use: [
{
loader: '#svgr/webpack',
},
],
};
const tsLoaderConfiguration = {
test: /\.(ts|tsx|web.ts|web.tsx)?$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
],
};
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
esModule: false,
},
},
};
module.exports = {
entry: {
app: path.join(__dirname, '../index.web.js'),
},
output: {
path: path.resolve(appDirectory, 'dist'),
publicPath: '/',
filename: 'arcelor.bundle.js',
},
resolve: {
extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
alias: {
'react-native$': 'react-native-web',
},
},
module: {
rules: [
babelLoaderConfiguration,
imageLoaderConfiguration,
svgLoaderConfiguration,
tsLoaderConfiguration,
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, './index.html'),
filename: 'index.html',
inject: 'body',
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
// See: https://github.com/necolas/react-native-web/issues/349
// __DEV__: JSON.stringify(true),
__DEV__: process.env.NODE_ENV !== 'production',
process: {env: {}},
}),
],
};
I'm using webpack#^5.65.0
could anyone help me figure out what is the problem and how can I make react-native-web work with our project? thanks
getting Webpack up and running from scratch is not an easy task. I suggest you start with a ready to use an approach like cra or expo. then work your way up to customization.
Create-React-App
firstly, install the dependencies:
yarn add react-native-web react-scripts react-dom
create an HTML file in public/index.html and put the following content inside: gh:facebook/create-react-app/cra-template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Your App Title</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
rename the index.js in project root to index.native.js. see
create a js file in src/index.js and put the following content inside:
import { AppRegistry } from "react-native";
import { App } from "./App";
AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication("App", {
rootTag: document.getElementById("root"),
});
run the app by running react-scripts start
Customization
you may need to integrate preprocessors like react-native-reanimated/plugin to your babel config or edit your WebPack to add global variables like process.env. In order to do that you can either use react-scripts eject to have access to said configs or use tools like customize-cra.
Expo (Recommened)
In my opinion Expo is the best way to do it. Expo basically is create-react-app but for react-native that supports the react-native-web.
You can set up the expo for the web for your project by following the official guide.
install dependencies:
yarn add --global expo-cli
expo install react-native-web react-dom
yarn add expo
modify your root index.js to something like this:
import { registerRootComponent } from 'expo';
import App from './App';
registerRootComponent(App);
at this point you are ready to go. just rust expo start:web.
Customization
By running expo customize:web, you have access to Babel and Webpack config files.
Typescript basePath
If you are using "baseUrl": "src" in your tsconfig.json. you may need to set up the Babel too. because it may not necessarily follow your tsconfig.
// babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
'react-native-reanimated/plugin',
[
'module-resolver',
{
root: ['src'],
extensions: ['.tsx', 'json', '.ts', '.js'],
},
],
],
};
};
My question is simple. I have a basic react-native project, generated from Expo as a Bare WOrkflow app.
Expo Managed Workflow gives a web version of the app.
How can this be implemented in a bare React Native app? I can't find decent documentation anywhere. I have tried react-native-web docs, but I haven't been able to implement them.
So starting from a basic installation of react-native app with the command
npx react-native init newProject
installation of dependencies
i use yarn but for npm is npm i -D myLib instead of yarn add -D myLib
For react we need:
yarn add react react-dom react-native-web
For Webpack we need:
yarn add -D webpack webpack-cli babel-loader webpack-dev-server
Webpack configuration
in the root folder create a file with name webpack.config.js
And a folder with name public is the output folder
//webpack.config.js
const path = require("path");
module.exports = {
entry: {
main: "./index.web.js",
},
mode: "development",
devtool: "inline-source-map",
devServer: {
writeToDisk: true,
liveReload: true,
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
],
},
resolve: {
alias: {
"react-native": "react-native-web",
},
},
output: {
path: path.resolve(__dirname, "public"),
},
};
And a index.html in a root folder
<!DOCTYPE html>
<html>
<head>
<title>Testing on the Web!</title>
<meta charset="utf-8" />
<meta content="initial-scale=1,width=device-width" name="viewport" />
</head>
<body>
<div id="react-native-app"></div>
<script type="text/javascript" src="/public/main.js"></script>
</body>
</html>
The index.web.js for test in the root folder
import React, {Component} from "react";
import {AppRegistry, StyleSheet, Text, View} from "react-native";
class ReactNativeWeb extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#142a3d",
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10,
color: "#ffffff",
},
});
AppRegistry.registerComponent("ReactNativeWeb", () => ReactNativeWeb);
AppRegistry.runApplication("ReactNativeWeb", {
rootTag: document.getElementById("react-native-app"),
});
Script package.json
we add a command in package.json for launch the build and the webpack server
{
...
"scripts": {
...
"web": "webpack serve --progress --config webpack.config.js"
}
...
}
And now, launch the command
yarn web
Open from a browser http://localhost:8080/
Note that the webpack configuration only serves javascript files, you will have to add rules for other file types
I am able to transpile the jsx code but in browser its not loading anything. I am using babel and webpack too.
app.jsx
const ReactDom = require('react-dom');
const React = require('react');
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById("root")
);
index.html
<html>
<head>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./js/bundle.js">
</script>
</body>
</html>
webpack.config.js
module.exports = {
entry: './jsx/app.jsx',
output: {
path: __dirname + '/js/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loaders: ['babel-loader']
}
]
}
}
bundle.js
------
------
(function(module, exports, __webpack_require__) {
const ReactDom = __webpack_require__(15);
const React = __webpack_require__(4);
ReactDOM.render(React.createElement(
'h1',
{ htmlFor: 'yes' },
'Hello World'
), document.getElementById("root"));
}),
------
------
When I looked into html page source it showing linked to bundle.js in script tag but page is blank.
You can check my complete project on Github complete code
Steps I am following to run
npm run build
static (I am using node-static)
then loading index.html in browser but page is blank.
You have a typo - ReactDOM should be ReactDom. The error that is shown in the console is Uncaught ReferenceError: ReactDOM is not defined.
I see code online for a very simple react app like this:
index.html:
<!doctype html>
<html>
<head>
...
</head>
<body>
<div id="root"></div>
</body>
</html>
And then index.jsx:
import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
But how does the index.jsx javascript file even get run if there is no script tag in the index.html? Something similar to this: <script type="text/babel" src="./index.jsx">?
Expanding on my comment, this is an example of a webpack configuration you might use. This will auto generate an index.html file inside dist folder with the index_bundle.js embedded. HtmlWebpackPlugin has options you can pass, but as I said, this is a basic example.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpackConfig = {
entry: 'index.jsx',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
module: {
loaders: {
test: /.jsx?$/,
loader: ['babel-loader'],
exclude: path.join(__dirname, 'node_modules'),
}
},
plugins: [new HtmlWebpackPlugin()]
};
Packages you'll need:
npm install --save-dev webpack babel-loader html-webpack-plugin
To use run webpack.
EDIT
You will also need a .babelrc file. Basic example:
{
"presets": {
"es5"
}
}
So I was trying to set up the React/Babel/Webpack environment but I had some trouble doing so. I started creating a new folder, did the npm init and then I followed everything in this tutorial: https://facebook.github.io/react/docs/package-management.html
First, I've installed webpack globally
I've created a index.js with the same content on the tutorial
I've created a .babelrc file with { "presets": ["react"] }
Ran the npm install --save react react-dom babel-preset-react babel-loader babel-core
Then, when I run the command webpack main.js bundle.js --module-bind 'js=babel-loader' it gives me an error: "Module parse failed ~ You may need an appropriate loader to handle this file type.
Any idea guys? I've literally copy and pasted every step from the tutorial and I am sure all the files are correct. Thanks in advice!
Create file webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './main.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
}]
},
};
Run
webpack
and it will generate bundle.js for you.
Now make sure you have added index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>
Looks like you accessing webpack from global. You might have installed webpack by doing
npm install -g webpack
Now,
Install webpack locally,
npm install webpack
and run.
./node_modules/webpack/bin/webpack.js main.js bundle.js --module-bind 'js=babel-loader'