2017-07-12 36 views
0

私はreactjsネイティブアプリでreact-native-simple-loginコンポーネントを使用しています。webpackエラー - モジュールが見つかりません:エラー: 'ImageFile'を解決できません

npm install --save react-native-simple-login

enter image description here

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.pngpassword_icon.pngreact-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' 
    } 
    } 
}; 

答えて

0

webpack --display-error-detailsを実行してみてください。エラーは、ファイル解決に関連していない可能性があります。

ここにもっとdetial:https://github.com/webpack/webpack/issues/981

+0

私は糸を使用しています。あなたはwebpackからの出力を表示するように糸を設定する方法を知っていますか? webpack --display-error-details – user1

+0

これをチェックすることができます:https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel –

+0

チュートリアルではあまり言いません。 – user1

0

多分それは、ディレクトリの問題ですか?私はあなたのプロジェクトフォルダの設定を知らないが、私は../../Images/email_icon.pngにコードを変更しようとしていると言って、同じ2番目のエラーになります。

関連する問題