Модуль не найден: Ошибка: не удается разрешить модуль 'components / app'. проблема с webpack reactjs

#javascript #node.js #reactjs #webpack #babeljs

Вопрос:

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

Я столкнулся с проблемой и не могу найти никакого рабочего решения в Интернете. Когда я пытаюсь запустить webpack-dev-serverI, получающий сообщение «Модуль не найден: Ошибка: не удается разрешить ошибку модуля ‘components / app'» постоянно.

Вот структура моих файлов.

root / 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()
    ]
};

root / .babelrc

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

root/src/index.js

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

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

root/src/components/app.js

 import React from 'react';

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

Ответ №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,
  },

};

1. Большое спасибо @KeshShan за ваш webpack.config.js пример и корень: path.resolve совет

2. @AntonArtemev нет проблем, рад, что мой ответ помог вам !! 🙂

3. Хороший ответ, хотя, если кто-то в проекте отправил запрос на извлечение с подобным взломом webpack, я бы посоветовал им просто следовать соглашению об импорте модуля es6.

Ответ №2:

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

 import App from './components/app'

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

Ответ №3:

Вы ищете псевдоним модуля. resolve Раздел вашей конфигурации должен выглядеть примерно так:

 const path = require('path');

resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['', '.js'],
    alias: {
      components: path.resolve(__dirname, 'src/components/')
    }
}

Это эквивалентно paths опции в файлах конфигурации TypeScript.