0

私は create-react-app を使用して React を独学しています。しかし、私には意味をなさないエラーに遭遇しました。

エラーは次のとおりです。

Error: Child compilation failed: Module not found: Error: Cannot resolve 'file' or 'directory' ./src/name-icon. png in C:\Users\Jacob\college-canoe: Error: Cannot resolve 'file' or 'directory' ./src/name-icon.png in C:\Users\Ja cob\college-canoe

WebPack が問題を「考えている」ことはわかりますが、私のコードは実際には name-icon をどこにも呼び出していません。以前はありましたが、名前を nameIcon に変更しました。実際にその画像を使用している唯一のコード スニペットは次のとおりです。

import React, { Component } from 'react';

import nameIcon from './photos/nameIcon.png';

export default class NavBar extends Component {
  render() {
    return (
  <div className="navbar-container">
    <ul className="navbar-top-right">
      <img className="icon" src={nameIcon} />
      <li><a className="navbar" href="#">Search</a></li>
      <li><a className="navbar" href="#contact">Contact</a></li>
      <li><a className="navbar" href="#">Compare</a></li>
      <li><a className="navbar" href="#">Home</a></li>
    </ul>
  </div>
    )
  }
}

nameIcon を使用してコードをコメントアウトしても、問題は解決しません。私はここで完全に迷っており、どんな助けも素晴らしいでしょう。

編集: webpack.config.js に追加

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('../index.js'); // use inside the npm package

// We use the NODE_ENV in our automation commands to differentiate environments
var production =
  process.env.NODE_ENV === 'production' ||
  process.env.NODE_ENV === 'preprod';

// Setup our plugins.
var plugins = [
  // attaches the webpack-generated JS to our main HTML file
  new HtmlWebpackPlugin({template: './src/index.html'}),
  // create global access to the NODE_ENV within our Webpacked code:
  new webpack.DefinePlugin({
    __ENV__: JSON.stringify(process.env.NODE_ENV)
  }),
  // http://gaearon.github.io/react-hot-loader/getstarted/
  new webpack.HotModuleReplacementPlugin(),
  // Mac doesn't care about case, but linux servers do, so enforce...
  new CaseSensitivePathsPlugin()
];

// In production we do a bit more...
if (production) {
  plugins.concat(
    [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]);
}

const devEntry = [
    'webpack-dev-server/client?http://0.0.0.0:3000', // tells client where to get hot reloads
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    'babel-polyfill', // for full ES6 compatibility on older devices
    './src/init.js'
  ];
const prodEntry = [
    'babel-polyfill', // for full ES6 compatibility on older devices
    './src/init.js'
];

const theEntry = (production) ? prodEntry : devEntry;

module.exports = {

  // Bundle to our dist folder as a main.js file.
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js',
    publicPath: '/'
  },

  devtool: 'sourcemap',

  // Our master entry point.
  entry: theEntry,

  // Extra helpers to make require or include easier.
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },

  module: {
    loaders: [{
      test: /\.(js|jsx)$/,
      // in dev only, hotload
      loader: production ? 'babel' : 'react-hot!babel',
      // other babel options are specified in .babelrc
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      loader: 'json'
    }]
  },

  plugins: plugins
};

編集 2: プロジェクト構造を追加しました。

プロジェクトの構造

編集 3: 問題が何であるかはまだわかりませんが、nameIcon の名前を name-icon に変更して /src/ に戻し、/photos/ フォルダーに 2 つ目のコピーを作成すると、何とか修正されました。これについては、いずれまた戻ってくる必要があります。

4

1 に答える 1

0

ファイルローダーをインストールする必要があります

npm install --save-dev file-loader

そしてモジュール設定-

 module: {
    loaders: [{
        test: /\.(js|jsx)$/,
        // in dev only, hotload
        loader: production ? 'babel' : 'react-hot!babel',
        // other babel options are specified in .babelrc
        exclude: /node_modules/
      }, {
        test: /\.json$/,
        loader: 'json'
      },
      {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}
    ]
  },
于 2016-09-24T04:50:49.363 に答える