react-native-material-ui
react-native-material-ui copied to clipboard
Webpack Issue w/ React-Native-Web
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!
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?
Anyone with a working solution for this error?
+1