May be a basic question but I've been struggling with it for over a week.
I just added React Native Web to my existing React Native Application but when I try to run in:
Run Docker
Run Metro (
npx react native start
)
- Run Web (
npm run web
)
I get this error:
> [email protected] web
> webpack serve -d source-map --mode development --config "./web/webpack.config.js" --color --hot
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://145.93.124.189:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/ondrahruby/Documents/Fontys/Semester4Part3/SOFA/Smart-Bumper-Dashboard/Implementation/dashborad/public' directory
asset bundle.web.js 1.62 MiB [emitted] (name: main) 1 related asset
runtime modules 27.5 KiB 13 modules
orphan modules 234 bytes [orphan] 1 module
modules by path ./node_modules/ 1.46 MiB 135 modules
./index.web.js 507 bytes [built] [code generated]
./App.jsx 5.85 KiB [built] [code generated] [1 error]
./app.json 56 bytes [built] [code generated]
ERROR in ./App.jsx 105:8
Module parse failed: Unexpected token (105:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // List wrapper
| return (
> <SafeAreaView style={styles.container}>
| <View style={styles.listTab}>
| {listTab.map(e => (
@ ./index.web.js 1:261-277
webpack 5.85.1 compiled with 1 error in 709 ms
My webpack,config.js file:
const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, '../');
// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// \node_module\.`
const babelLoaderConfiguration = {test: /.(js|jsx)$/,
exclude: /node_modules/,
// Add every directory that needs to be compiled by Babel during the build.
include: [path.resolve(appDirectory, 'index.web.js'),
//path.resolve(appDirectory, 'src'),
path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),],
use: {loader: 'babel-loader',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', '@babel/preset-react'],
// 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,},},};
module.exports = {entry: [// load any web API polyfills
// path.resolve(appDirectory, 'polyfills-web.js'),
// your web-specific entry filepath.resolve(appDirectory, 'index.web.js'),],
// configures where the build ends up
output: {
filename: 'bundle.web.js',
path: path.resolve(appDirectory, 'dist'),},
// ...the rest of your config
module: {rules: [babelLoaderConfiguration, imageLoaderConfiguration],},
resolve: {
// This will only alias the exact import "react-native"
alias: {'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'],},};``
Does anyone know how to solve this?
The whole project can be found here.
I expect the App to run in the browser and the page that should be opened should show available and occupied docks. I tried modifying the webpack.config.js file to be able to take js and jsx files but the problem perisists