私はreactjsネイティブアプリでreact-native-simple-loginコンポーネントを使用しています。webpackエラー - モジュールが見つかりません:エラー: 'ImageFile'を解決できません
npm install --save react-native-simple-login
ERROR in ./~/react-native-simple-login/Login/index.js
Module not found: Error: Can't resolve './Images/email_icon.png' in '/home/xxx/projects/react-native-web-boilerplate/node_modules/react-native-simple-login/Login'
@ ./~/react-native-simple-login/Login/index.js 107:28-62
@ ./~/react-native-simple-login/index.js
@ ./src/navigation.js
@ ./index.web.js
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server react-hot-loader/patch ./index.web.js
ERROR in ./~/react-native-simple-login/Login/index.js
Module not found: Error: Can't resolve './Images/password_icon.png' in '/home/xxx/projects/react-native-web-boilerplate/node_modules/react-native-simple-login/Login'
@ ./~/react-native-simple-login/Login/index.js 108:18-55
@ ./~/react-native-simple-login/index.js
@ ./src/navigation.js
@ ./index.web.js
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server react-hot-loader/patch ./index.web.js
email_icon.png
、password_icon.png
react-native-simple-login
に属します。なぜwebpackが不平を言っているのですか?
webpack.config.js
const webpack = require('webpack');
const path = require('path');
module.exports = {
devServer: {
contentBase: path.join(__dirname, 'build'),
// enable HMR
hot: true,
// embed the webpack-dev-server runtime into the bundle
inline: true,
// serve index.html in place of 404 responses to allow HTML5 history
historyApiFallback: true,
port: 3000
},
devtool: 'source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
path.join(__dirname, '../index.web.js')
],
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, '..', 'index.web.js'),
path.resolve(__dirname, '..', 'src'),
path.resolve(__dirname, '..', 'src/components'),
path.resolve(__dirname, '..', 'src/images'),
path.resolve(__dirname, '../node_modules/react-native-vector-icons'),
path.resolve(__dirname, '../node_modules/react-native-tab-view'),
path.resolve(__dirname, '../node_modules/react-native-simple-login')
],
loader: 'babel-loader',
query: {
presets: ["react-native","es2015", "stage-0", "react"]
}
},
{
test: /\.(gif|jpe?g|png|svg)$/,
loader: 'url-loader',
query: { name: '[name].[hash:16].[ext]' }
},
]
},
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
},
})
],
resolve: {
modules: [
path.join(__dirname, '..', 'node_modules')
],
alias: {
'react-native': 'react-native-web',
'react-navigation': 'react-navigation/lib/react-navigation.js',
'react-native-simple-login': 'react-native-simple-login'
}
}
};
私は糸を使用しています。あなたはwebpackからの出力を表示するように糸を設定する方法を知っていますか? webpack --display-error-details – user1
これをチェックすることができます:https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel –
チュートリアルではあまり言いません。 – user1