webpack错误-找不到模块：错误：无法解析“ ImageFile”

Question

I am using react-native-simple-login component in my reactjs native 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 , password_icon.png belong to react-native-simple-login . Why webpack is complaining?

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

Try running webpack --display-error-details . The error may not be related to file resolution.

more detial here: https://github.com/webpack/webpack/issues/981

Answer 2

Maybe it's a directory problem? I don't know your project folder setup but i'm saying try to change the code to ../../Images/email_icon.png , the same goes for the second error.