Модуль не найден: Ошибка: не удается разрешить компоненты модуля/приложение. webpack + reactjs issue

Question

Я новичок в webpack и реагирую. надеюсь, вы можете мне помочь.

У меня возникла проблема и вы не можете найти какое-либо рабочее решение в Интернете. Когда я пытаюсь запустить webpack-dev-serverI geting «Module not found: Ошибка: не удается разрешить модульные компоненты/приложение» ошибка все время.

Здесь моя структура файлов.

корень/webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
     'webpack-dev-server/client?http://127.0.0.1:8080/', 
     'webpack/hot/only-dev-server', 
     './src' 
    ], 
    output: { 
     path: path.join(__dirname, 'public'), 
     filename: 'bundle.js' 
    }, 
    resolve: { 
     moduleDirectories: ['node_modules', 'src'], 
     extensions: ['', '.js'] 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin() 
    ] 
}; 

корень/.babelrc

{ 
    presets: ["react", "es2015"], 
    plugins: ["react-hot-loader/babel"] 
} 

корень/SRC/index.js

import React from 'react'; 
import { render } from 'react-dom'; 
import App from 'components/app'; 

render(<App />, document.getElementById('app')); 

корень/SRC/компоненты/приложение .js

import React from 'react'; 

export default class App extends React.component { 
    render() { 
     return (
      <div> 
       <h1>Hello There</h1> 
      </div> 
     ); 
    } 
} 

Answer 1

Я согласен с Роберт Москаля ответ, используйте относительный путь для импорта, в то же время, если вы действительно хотите абсолютный путь к работе вы, возможно, придется добавить еще одну строку в вашем webpack.config.js внутри вашей решимостью секции из его добавить это ниже линии

root: path.resolve('./src'), 

это поможет решить корень, и вы можете легко импортировать, используя абсолютный путь из папок внутри папки Src. Я покажу вам мой образец webpack.config.js ниже

'use strict'; 

const path = require('path'); 
const loaders = require('./webpack/loaders'); 
const plugins = require('./webpack/plugins'); 

const applicationEntries = process.env.NODE_ENV === 'development' 
    ? ['webpack-hot-middleware/client?reload=true'] 
    : []; 

const mainEntry = process.env.NODE_ENV === 'development' 
    ? './src/sample/index.tsx' 
    : './src/lib/index.tsx'; 

module.exports = { 
    entry: [mainEntry].concat(applicationEntries), 

    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: '[name].js', 
    publicPath: '/', 
    sourceMapFilename: '[name].js.map', 
    chunkFilename: '[id].chunk.js', 
    }, 

    devtool: process.env.NODE_ENV === 'production' ? 
    'source-map' : 
    'inline-source-map', 

    resolve: { 
    root: path.resolve('./src'), 
    extensions: [ 
     '', 
     '.webpack.js', 
     '.web.js', 
     '.tsx', 
     '.ts', 
     '.js', 
     '.json', 
    ], 
    }, 

    plugins: plugins, 

    devServer: { 
    historyApiFallback: { index: '/' }, 
    }, 

    module: { 
    preLoaders: [ 
     loaders.tslint, 
    ], 
    loaders: [ 
     loaders.tsx, 
     loaders.html, 
     loaders.css, 
     loaders.scss, 
     loaders.eot, 
     loaders.svg, 
     loaders.ttf, 
     loaders.woff, 
     loaders.json, 
     { 
     test: /\.png$/, 
     loader: 'url-loader', 
     query: { mimetype: 'image/png' }, 
     }, 
    ], 
    }, 

    externals: { 
    'react/lib/ReactContext': 'window', 
    'react/lib/ExecutionEnvironment': true, 
    'react/addons': true, 
    }, 

}; 

Answer 2

Вам нужно указать относительный путь к приложению в файле index.js. Таким образом,

import App from './components/app' 

Без относительной записи пути система импорта модулей просматривает каталог node_modules.