1

Helo,

I have a project for web using react and for native using react-native and share some code.

The react-native is working, but the web version is not working in the same code base, if i remove the react-native code and libraries the web version is working.

I think the problem is on webpack configuration, i have tryed a lot o version but in snot working.

For the web to start the server i use:

"webpack-dev-server --content-base dist/ --config webpack/web.dev.config.js --port 3000 --inline --hot --colors --historyApiFallback",

My webpack config file:

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const autoprefixer = require('autoprefixer')

const extractLess = new ExtractTextPlugin('css/style_webpack.css')

module.exports = {
  devtool: 'eval',
  entry: [path.resolve(__dirname, '../src/web/index')],
  cache: true,
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          plugins: [
            'transform-object-rest-spread',
            'transform-class-properties',
          ],
          presets: ['es2015', 'react', 'stage-0'],
        },
        include: path.resolve(__dirname, '../src')
      },
      {
        test: /\.less$/i,
        loader: extractLess.extract([
          {
            loader: 'raw-loader',
            options: {
              minimize: false,
              sourceMap: false,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function() {
                return [autoprefixer('>1%', 'ie 10')]
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              strictMath: false,
              noIeCompat: true,
            },
          },
        ]),
      },
    ],
  },
  plugins: [
    extractLess,
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        PLATFORM_ENV: JSON.stringify('web'),
      },
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
}

And the errors, a few of them:


        ERROR in ./~/react-native/Libraries/react-native/react-native-implementation.js
        Module not found: Error: Can't resolve 'AppRegistry' in 'E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native\Libraries\react-native'
         @ ./~/react-native/Libraries/react-native/react-native-implementation.js 69:29-51
         @ ./src/native/routes/appNavigator.js
         @ ./src/reducers/nav/nav.js
         @ ./src/reducers/index.js
         @ ./src/configureStore.js
         @ ./src/web/index.js
         @ multi ./src/web/index

        ERROR in ./~/react-native/Libraries/react-native/react-native-implementation.js
        Module not found: Error: Can't resolve 'AppState' in 'E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native\Libraries\react-native'
         @ ./~/react-native/Libraries/react-native/react-native-implementation.js 70:26-45
         @ ./src/native/routes/appNavigator.js
         @ ./src/reducers/nav/nav.js
         @ ./src/reducers/index.js
         @ ./src/configureStore.js
         @ ./src/web/index.js
         @ multi ./src/web/index

    ERROR in ./~/react-native-elements/src/searchbar/SearchBar.js
    Module parse failed: E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native-elements\src\searchbar\SearchBar.js Unexpected token (14:8)
    You may need an appropriate loader to handle this file type.
    |
    | class SearchBar extends Component {
    |   focus = () => {
    |     this.searchbar.focus();
    |   };
     @ ./~/react-native-elements/src/index.js 16:0-46
     @ ./src/native/routes/appNavigator.js
     @ ./src/reducers/nav/nav.js
     @ ./src/reducers/index.js
     @ ./src/configureStore.js
     @ ./src/web/index.js
     @ multi ./src/web/index

    ERROR in ./~/react-native-elements/src/card/Card.js
    Module parse failed: E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native-elements\src\card\Card.js Unexpected token (37:4)
    You may need an appropriate loader to handle this file type.
    |     fontFamily,
    |     imageProps,
    |     ...attributes
    |   } = props;
    |
     @ ./~/react-native-elements/src/index.js 24:0-31
     @ ./src/native/routes/appNavigator.js
     @ ./src/reducers/nav/nav.js
     @ ./src/reducers/index.js
     @ ./src/configureStore.js
     @ ./src/web/index.js
     @ multi ./src/web/index

    ERROR in ./~/react-native-elements/src/checkbox/CheckBox.js
    Module parse failed: E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native-elements\src\checkbox\CheckBox.js Unexpected token (29:4)
    You may need an appropriate loader to handle this file type.
    |     checkedTitle,
    |     fontFamily,
    |     ...attributes
    |   } = props;
    |
     @ ./~/react-native-elements/src/index.js 18:0-43
     @ ./src/native/routes/appNavigator.js
     @ ./src/reducers/nav/nav.js
     @ ./src/reducers/index.js
     @ ./src/configureStore.js
     @ ./src/web/index.js
     @ multi ./src/web/index

3
  • Consider using github.com/necolas/react-native-web May 10, 2018 at 9:25
  • @Cherniv tanks for suggestion, for this project is not suitable because the web part is 99% finished, if i will not find a solution, i will break them apart.
    – aciobanita
    May 10, 2018 at 9:29
  • I would recommend braking them apart. I will assume the code you are sharing had to do with logic rather then rendering, it that correct? If it is, why not extract it into a library? That way, you can reuse it in multiple projects.
    – mayk93
    May 10, 2018 at 9:35

2 Answers 2

0

You can't simply mix React and React Native (read here why that is). Either use React Native Web as Cherniv suggested, or split the code apart completely.

If you want to do the former, see this repo for an example of 95% code re-use.

0

If you're sharing the same code between the two projects, then the connective is you're using ReactJS in both. This means that you can take the code and create common Modular Service/Util classes which you can import to both.

Consider the following:

I have a user api call to make in both a ReactJS and React Native applications. I create a User Service module which handles that for me (written in JavaScript) with only core imports I need. Then I'll import this service into both my react and react native apps.

Why would you break apart your application? You have shared code, break away common code and modularise it. Without seeing your code, it's hard to tell.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.