Webpack-Fehler - Modul nicht gefunden: Fehler: ImageFile kann nicht aufgelöst werden

Question

Ich verwende die react-native-simple-login-Komponente in meiner nativen rectjs-App.

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 gehören password_icon.png zu react-native-simple-login. Warum beschwert sich 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' 
    } 
    } 
}; 

Answer 1

Versuchen webpack --display-error-details läuft. Der Fehler hängt möglicherweise nicht mit der Dateiauflösung zusammen.

detial hier: https://github.com/webpack/webpack/issues/981

Answer 2

Vielleicht ist es ein Verzeichnis Problem? Ich kenne Ihr Projektordner-Setup nicht, aber ich sage, versuchen Sie, den Code zu ../../Images/email_icon.png zu ändern, das gleiche gilt für den zweiten Fehler.