You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am building react-native-web app by using react-native-cli.
As I mentioned in the discussion title, I've got a strange issue with the Windows system.
I've followed this article and successfully run out in macOS.
Because my target is to build both desktop Apps by using electron, I tried to build setup.exe in mac but failed (mac web and dmg are fine).
So, I tried to copy the source code to the windows system and retried it.
But I've got an error that I mentioned in stackoverflow.
Let me attach my webpack, babel and package.json configuration here again.
const _ = require('underscore')
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const platformIndex = _.findIndex(process.argv, arg => arg === '--platform');
const platform = (platformIndex > 0) ? process.argv[platformIndex + 1] : 'web';
// const platformExclude = platform === 'web' ? new RegExp(/\.web\.js$/) : new RegExp(/\.js$/);
// const platformExclude = new RegExp(/\.web\.js$/);
const appDirectory = path.resolve(__dirname, '../');
const includeModules = [
'react-native-animatable',
'react-native-reanimated',
'react-native-picker-select',
'react-native-web',
'@react-native-picker',
'react-native-modal',
'react-native-gesture-handler',
'react-native-flipper',
'react-native-indicators',
'react-native-vector-icons',
'react-native/Libraries',
].join('|');
// This is needed for webpack to compile JavaScript.
const babelLoaderConfiguration = {
test: /\.js$/,
loader: 'babel-loader',
/**
* Exclude node_modules except any packages we need to convert for rendering HTML because they import
* "react-native" internally and use JSX which we need to convert to JS for the browser.
*
* You'll need to add anything in here that needs the alias for "react-native" -> "react-native-web"
* You can remove something from this list if it doesn't use "react-native" as an import and it doesn't
* use JSX/JS that needs to be transformed by babel.
*/
exclude: [
new RegExp(`node_modules/(?!(${includeModules})/).*|.native.js$`),
],
options: {
cacheDirectory: true,
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: ['module:metro-react-native-babel-preset'],
// Re-write paths to import only the modules needed by the app
plugins: [
'react-native-web',
[
'module-resolver',
{
alias: {
'^react-native$': 'react-native-web',
},
},
],
],
}
}
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
esModule: false,
},
},
};
// react-native-vector-icon.
const reactNativeVectorIconConfig = {
test: /\.ttf$/,
loader: "url-loader", // or directly file-loader
include: path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
};
const webpackConfig = {
entry: [
// load any web API polyfills
// path.resolve(appDirectory, 'polyfills-web.js'),
// your web-specific entry file
path.resolve(appDirectory, 'index.web.js'),
],
// configures where the build ends up
output: {
filename: 'bundle.web.js',
path: path.resolve(appDirectory, 'dist'),
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'web/index.html',
filename: 'index.html',
usePolyfillIO: true,
})
],
// ...the rest of your config
module: {
rules: [babelLoaderConfiguration, imageLoaderConfiguration, reactNativeVectorIconConfig],
},
resolve: {
// This will only alias the exact import "react-native"
alias: {
'react-native-config': 'react-web-config',
'react-native$': 'react-native-web',
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
extensions: ['.web.js', '.js', '.jsx'],
},
devServer: {
historyApiFallback: true,
},
};
if(process.env.NODE_ENV === 'desktop') {
webpackConfig.target = 'electron-renderer'
}
module.exports = webpackConfig
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I am building
react-native-web
app by usingreact-native-cli
.As I mentioned in the discussion title, I've got a strange issue with the Windows system.
I've followed this article and successfully run out in macOS.
Because my target is to build both desktop Apps by using electron, I tried to build setup.exe in mac but failed (mac web and dmg are fine).
So, I tried to copy the source code to the windows system and retried it.
But I've got an error that I mentioned in stackoverflow.
Let me attach my
webpack
,babel
andpackage.json
configuration here again.Finally, it compiled successfully, but I can't open the correct page because of the below error:
Is someone able to help me to resolve this issue?
Beta Was this translation helpful? Give feedback.
All reactions