I'm trying to render a react native app for web using react-native-web, babel, and webpack. When I start webpack, I get the error below. As you can see from my web.config.js, I'm included the react native modules I need for rendering the custom react native code. The react-native-screens module is installed, as you can see from the package.json.
My question why the compiler is complaining about the react-native-screens dependency in the node_modules/react-navigation-stack/dist/views/StackView/StackViewCard.js if that module is installed?
Any pointers appreciated.
error: ERROR in ./node_modules/react-navigation-stack/dist/views/StackView/StackViewCard.js Module not found: Error: Can't resolve 'react-native-screens' in '~/ReactNative/RNProto1/node_modules/react-navigation-stack/dist/views/StackView' @ ./node_modules/react-navigation-stack/dist/views/StackView/StackViewCard.js 1:931-962 @ ./node_modules/react-navigation-stack/dist/index.js @ ./node_modules/react-navigation/src/react-navigation.js @ ./mydemo/demo.js @ ./index.web.js
babel.config.js:
module.exports = {
presets: ["@babel/env", "module:metro-react-native-babel-preset"],
plugins: []
};
package.json:
{
"name": "react-native-demo",
"dependencies": {
"babel-cli": "^6.26.0",
"dayjs": "^1.8.5",
"lodash": "^4",
"prop-types": "^15.6.0",
"react-native-linear-gradient": "2.5.6",
"react-native-screens": "^1.0.0-alpha.23",
"react-native-svg": "9.8.4"
},
"devDependencies": {
"@babel/cli": "^7.8.3",
"@babel/core": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/preset-react": "^7.8.0",
"@babel/runtime": "^7.4.3",
"@commitlint/cli": "^7.1.1",
"@commitlint/config-conventional": "^7.1.1",
"@semantic-release/changelog": "^2.0.2",
"@semantic-release/git": "^5.0.0",
"acorn": "6.3.0",
"babel-core": "^6.26.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"babel-loader": "^8.0.6",
"babel-plugin-react-docgen": "^3.2.0",
"babel-preset-env": "^1.6.1",
"css-loader": "0.28.11",
"eslint-plugin-flowtype": "^2.50.3",
"file-loader": "^4.2.0",
"flow-bin": "^0.92.0",
"glob": "^7.1.2",
"html-webpack-plugin": "^3.2.0",
"husky": "^0.14.3",
"image-size": "^0.6.2",
"imagemin": "^5.3.1",
"jest": "^24.7.1",
"metro-react-native-babel-preset": "^0.56.4",
"mkdirp": "^0.5.1",
"npm-run-all": "^4.1.2",
"react": "16.8.3",
"react-art": "^16.12.0",
"react-dom": "^16.12.0",
"react-native": "^0.59.4",
"react-native-web": "^0.11.7",
"react-navigation": "^2.18.3",
"react-styleguidist": "^10.2.1",
"react-test-renderer": "16.8.3",
"semantic-release": "^15.4.1",
"standard": "^12.0.1",
"style-loader": "0.23.1",
"svgexport": "^0.3.2",
"url-loader": "^1.0.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-node-externals": "^1.7.2"
},
"peerDependencies": {
"react": "16.3.1 || 16.4.1 || 16.8.3 || 16.8.6",
"react-native": "^0.55.4 || ^0.56.0 || ^0.59.0 || ^0.60.5"
}
}
web.config.js:
const fs = require('fs');
const isDev = true;
const path = require('path');
const webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './index.web.js',
output: {
path: path.join(__dirname, '/web'),
filename: "bundle.js",
publicPath: '/'
},
devServer: {
inline: false,
contentBase: path.join(__dirname, '/web'),
},
resolve: {
alias: {
'react-native': 'react-native-web'
},
// Resolve to iOS-specific components
extensions: ['.ios.js', '.android.js', '.js', '.json']
},
target: 'node', // in order to ignore built-in modules like path, fs, etc.
module: {
rules: [
// Babel loader config
{
test: /\.js$/,
loader: 'babel-loader',
include: [
path.join(__dirname, '/index.web.js'),
path.join(__dirname, '/app'),
path.join(__dirname, '/demo'),
path.join(__dirname, '/src'),
path.join(__dirname, '/node_modules/react-native-dismiss-keyboard'),
path.join(__dirname, '/node_modules/react-native-drawer-layout'),
path.join(__dirname, '/node_modules/react-native-drawer-layout-polyfill'),
path.join(__dirname, '/node_modules/react-native-linear-gradient'),
path.join(__dirname, '/node_modules/react-native-safe-area-view'),
path.join(__dirname, '/node_modules/react-native-screens'),
path.join(__dirname, '/node_modules/react-native-svg'),
path.join(__dirname, '/node_modules/react-native-tab-view'),
path.join(__dirname, '/node_modules/react-navigation'),
path.join(__dirname, '/node_modules/react-navigation-deprecated-tab-navigator'),
path.join(__dirname, '/node_modules/react-navigation-drawer'),
path.join(__dirname, '/node_modules/react-navigation-stack'),
path.join(__dirname, '/node_modules/react-navigation-tabs')
],
options: {
plugins: [
],
presets: ['@babel/env', 'module:metro-react-native-babel-preset'],
babelrc: false
}
},
// Image loader config
{
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]'
}
}
},
// CSS loader config
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
