react-native-material-ui icon indicating copy to clipboard operation
react-native-material-ui copied to clipboard

Webpack Issue w/ React-Native-Web

Open maxmatthews opened this issue 6 years ago • 3 comments

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!

maxmatthews avatar Jun 18 '18 21:06 maxmatthews

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?

MillerGregor avatar Jun 27 '18 17:06 MillerGregor

Anyone with a working solution for this error?

axhamre avatar Aug 20 '18 20:08 axhamre

+1

mayconmesquita avatar May 14 '19 20:05 mayconmesquita