react-native-web can not supported

[DodoSpringLove]

Is your feature request related to a problem? Please describe. when i use react-native-web to transf my react-native code it use react-native-modalize ,I have some error , May i know react-native-modalize can run on web ?like PWA(https://web.dev/progressive-web-apps/) or if i want to run may react-native code to web,how i do,Thank you very mach Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

[mariomurrent-softwaresolutions]

I don't think that web is currently supported

[chrisedington]

I would love to see this, unfortunately I'm not good enough to port it though :)

Does anyone have any advice on how this could be achieved?

[mariomurrent-softwaresolutions]

This is a lot of work I guess. Maybe I'll have a look at it in the near future

[chrisedington]

I actually got it working quite easily - at least it builds ok -- haven't tested the UI just yet. Will post what I did to get it to build at least a bit later today.

[mariomurrent-softwaresolutions]

That would be awesome

[mariomurrent-softwaresolutions]

I actually got it working quite easily - at least it builds ok -- haven't tested the UI just yet. Will post what I did to get it to build at least a bit later today.

Hi, any hints on this? 😊

[chrisedington]

Yeah works nicely on my side! I didn't do anything to the RN code, and now when I look back, I didn't do anything special in my webpack.config.js or my babel.config.js, but yeah most importantly I didn't change the application code.

Here's my webpack and babel files -- something in here made it work but I cant explicitly remember what anymore :)

I think it could have been using the appropriate resolves and including the react-native-modalize and babel-polyfill module in the compileNodeModules?

const compileNodeModules = ['react-native-modalize', 'babel-polyfill']

resolve: {
    extensions: ['.web.js', '.web.ts', '.web.tsx', '.web.jsx', '.js', '.ios.js', 'native.js', '.jsx', '.ts'],

Working configuration files below:

webpack.config.js

const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const appDirectory = path.resolve(__dirname);
const { presets, plugins } = require(`${appDirectory}/babel.config.web.js`);
const compileNodeModules = [
  // Add every react-native package that needs compiling
  // 'react-native-gesture-handler',
  '@react-native-firebase/app',
  '@react-native-firebase/auth',
  '@react-native-firebase/crashlytics',
  '@react-native-firebase/dynamic-links',
  '@react-native-google-signin/google-signin',
  'react-native-fbsdk-next',
  'react-native-modalize',
  'babel-polyfill',
  'react-native-reanimated',
  'react-native-skeleton-placeholder',
  'react-native-masked-view',
  'react-native-web-linear-gradient',
  'react-native-dropdown-picker',
  'react-phone-number-input',
  'react-native-payment-icons',
  'react-native-google-places-autocomplete',
  'react-native-input-spinner',
  '@react-native-community/datetimepicker',
  'react-native-switch',
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));
const babelLoaderConfiguration = {
  test: /\.(js|mjs|jsx|ts|tsx|ios.js)$/,
  // 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, 'App.web.js'), // Change this to your main App file
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'component'),
    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets,
      plugins,
    },
  },
};
const svgLoaderConfiguration = {
  test: /\.svg$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: 'react-svg-loader',
      options: {
        jsx: true, // true outputs JSX tags
      },
    },
  ],
};
const imageLoaderConfiguration = {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        query: {
          name: 'assets/[name].[ext]',
        },
      },
    },
    {
      loader: 'image-webpack-loader',
      options: {
        query: {
          mozjpeg: {
            progressive: true,
          },
          gifsicle: {
            interlaced: true,
          },
          optipng: {
            optimizationLevel: 7,
          },
        },
      },
    }],
};

const cssLoaderConfiguration = {
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
  ],
};

const webViewRule = {
  test: /postMock.html$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

module.exports = {
  devServer: {
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('./webpack/cert/dev.local.key'),
        cert: fs.readFileSync('./webpack/cert/dev.local.crt'),
      },
    },
    host: 'dev.local',
    port: 8080,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Methods': 'GET,HEAD,OPTIONS,POST,PUT',
      'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
    },
  },
  entry:
    ['babel-polyfill',
      path.join(__dirname, 'index.web.js'),
    ],
  output: {
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '/',
    filename: 'rnw.bundle.js',
  },
  resolve: {
    extensions: ['.web.js', '.web.ts', '.web.tsx', '.web.jsx', '.js', '.ios.js', 'native.js', '.jsx', '.ts'],
    alias: {
      'react-native$': 'react-native-web',
      'react-native-linear-gradient': 'react-native-web-linear-gradient',
      'react-native-vector-icons': '@ovaeasy/react-native-vector-icons',
      'react-native-webview': 'react-native-web-webview',
      'react-native-fast-image': 'react-native-web-fast-image',
      '@sentry/react-native': '@sentry/react',
      '@invertase/react-native-apple-authentication$': path.resolve(
        __dirname,
        'src/shims/react-native-apple-authentication-web.ts',
      ),
      '@react-native-firebase/app$': path.resolve(__dirname, 'src/shims/firebase-app-web.ts'),
      '@react-native-firebase/analytics$': path.resolve(__dirname, 'src/shims/firebase-analytics-web.ts'),
      '@react-native-firebase/auth$': path.resolve(__dirname, 'src/shims/firebase-auth-web.ts'),
      '@react-native-firebase/crashlytics$': path.resolve(__dirname, 'src/shims/firebase-crashlytics-web.ts'),
      '@react-native-firebase/dynamic-links$': path.resolve(__dirname, 'src/shims/firebase-dynamic-links-web.ts'),
      '@react-native-google-signin/google-signin$': path.resolve(__dirname, 'src/shims/google-signin-web.ts'),
      'react-native-fbsdk-next$': path.resolve(__dirname, 'src/shims/react-native-fbsdk-next-web.ts'),
      '@react-native-masked-view/masked-view': path.resolve(__dirname, 'src/shims/react-native-masked-view-web'),
    },
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      svgLoaderConfiguration,
      cssLoaderConfiguration,
      webViewRule,
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      // See: <https://github.com/necolas/react-native-web/issues/349>
      __DEV__: JSON.stringify(true),
      process: { env: {} },
    }),
    new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
  ],
};

babel.config.web.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['inline-react-svg', '@babel/plugin-proposal-export-namespace-from', 'react-native-reanimated/plugin'],
  ignore: ['./aws-sdk/dist/aws-sdk-react-native.js'],
};

[mariomurrent-softwaresolutions]

Hmm, still getting the error "export 'Modalize' was not found in 'react-native-modalize' :(