Webpack Issue w/ React-Native-Web

[maxmatthews]

Trying to get this running with react-native-web but getting the following error:

ERROR in ./node_modules/react-native-material-ui/src/utils/index.js
Module not found: Error: Can't resolve 'react-native-web/dist/exports/BackAndroid' in '/Users/maxmatthews/Desktop/Projects/react-native-app/node_modules/react-native-material-ui/src/utils'
 @ ./node_modules/react-native-material-ui/src/utils/index.js 1:481-533
 @ ./node_modules/react-native-material-ui/src/Dialog/DialogStackedActions.react.js
 @ ./node_modules/react-native-material-ui/src/index.js
 @ ./node_modules/react-native-material-ui/index.js
 @ ./src/Login.js
 @ ./src/App.js
 @ ./src/App.web.js
 @ ./src/indexWeb.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/indexWeb.js

ERROR in ./node_modules/react-native-material-ui/src/ActionButton/ActionButton.react.js
Module not found: Error: Can't resolve 'react-native-web/dist/exports/LayoutAnimation' in '/Users/maxmatthews/Desktop/Projects/react-native-app/node_modules/react-native-material-ui/src/ActionButton'
 @ ./node_modules/react-native-material-ui/src/ActionButton/ActionButton.react.js 3:286-342
 @ ./node_modules/react-native-material-ui/src/ActionButton/index.js
 @ ./node_modules/react-native-material-ui/src/index.js
 @ ./node_modules/react-native-material-ui/index.js
 @ ./src/Login.js
 @ ./src/App.js
 @ ./src/App.web.js
 @ ./src/indexWeb.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/indexWeb.js

Looks like there's an issue where it's resolving the path two levels too deep.

Here's my webpack.config.js:

const path = require("path");
const webpack = require("webpack");

const appDirectory = path.resolve(__dirname, "./");

// 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$/,
    // Add every directory that needs to be compiled by Babel during the build.
    include: [
        path.resolve(appDirectory, "src"),
        path.resolve(appDirectory, "node_modules/react-navigation"),
        path.resolve(appDirectory, "node_modules/react-native-tab-view"),
        path.resolve(appDirectory, "node_modules/react-native-paper"),
        path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
        path.resolve(appDirectory, "node_modules/react-native-safe-area-view"),
        path.resolve(appDirectory, "node_modules/@expo/samples"),
        path.resolve(appDirectory, "node_modules/@expo/vector-icons"),
        path.resolve(appDirectory, "node_modules/react-native-platform-touchable"),
        path.resolve(appDirectory, "node_modules/react-native-material-ui")
    ],
    use: {
        loader: "babel-loader",
        options: {
            // cacheDirectory: false,
            babelrc: false,
            // Babel configuration (or use .babelrc)
            // This aliases 'react-native' to 'react-native-web' and includes only
            // the modules needed by the app.
            plugins: [
                "expo-web",
                "react-native-web",
                "transform-decorators-legacy",
                [
                    "transform-runtime",
                    { helpers: false, polyfill: false, regenerator: true }
                ]
            ],
            // The 'react-native' preset is recommended to match React Native's packager
            presets: ["react-native"]
        }
    }
};

// This is needed for loading css
const cssLoaderConfiguration = {
    test: /\.css$/,
    use: ["style-loader", "css-loader"]
};

const imageLoaderConfiguration = {
    test: /\.(gif|jpe?g|png|svg)$/,
    use: {
        loader: "file-loader",
        options: {
            name: "[name].[ext]"
        }
    }
};

const ttfLoaderConfiguration = {
    test: /\.ttf$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "./fonts/[hash].[ext]"
            }
        }
    ],
    include: [
        path.resolve(appDirectory, "./src/assets/fonts"),
        path.resolve(appDirectory, "node_modules/react-native-vector-icons")
    ]
};

module.exports = {
    // your web-specific entry file
    entry: path.resolve(appDirectory, "./src/indexWeb.js"),
    devtool: "eval",

    // configures where the build ends up
    output: {
        filename: "bundle.js",
        publicPath: "/assets/",
        path: path.resolve(appDirectory, "./public/assets")
    },

    module: {
        rules: [
            babelLoaderConfiguration,
            cssLoaderConfiguration,
            imageLoaderConfiguration,
            ttfLoaderConfiguration
        ]
    },

    plugins: [
        // process.env.NODE_ENV === 'production' must be true for production
        // builds to eliminate development checks and reduce build size. You may
        // wish to include additional optimizations.
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify(
                process.env.NODE_ENV || "development"
            ),
            __DEV__: process.env.NODE_ENV === "production" || true
        })
    ],

    resolve: {
        // 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'.
        symlinks: false,
        extensions: [".web.js", ".js", ".web.jsx", ".jsx"],
        alias: {
            "react-native": "react-native-web"
        }
    }
};

Thanks in advance for the help!

[MillerGregor]

BackAndroid was depricated

rnw polyfills for the replacement, BackHandler

The long-term solution would be to update this repo to use BackHandler. In the short-term, maybe try a webpack alias?

[axhamre]

Anyone with a working solution for this error?

[mayconmesquita]

+1