Я начинаю создавать свое приложение, поэтому я реализовал конфигурацию проекта с помощью веб-пакета. Структура проекта:

node_modules
public
|----bundle.js
|----index.html
src
|----app.jsx
|----index.jsx
|----components
     |-----appBar.jsx

Webpack.config.jsx :

const path = require('path');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.jsx'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        compress: true,
        port: 9000
    }
}

App.jsx :

import ButtonAppBar  from './components/appBar';
import React from 'react';


class App extends React.Component {
    render(){
        return (
            <div>
                <ButtonAppBar />
            </div>
        )
    }
};

export default App;

Index.html:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'


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

Package.json:

    "dependencies": {
    "@material-ui/core": "^1.5.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.17.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

Я запускаю эту инструкцию:

webpack --display-error-details

У меня такая ошибка:

ERROR in ./src/index.jsx
Module not found: Error: Can't resolve './app' in '/home/user/Desktop/my_app/src'
resolve './app' in '/home/user/Desktop/my_app/src'
  using description file: /home/user/Desktop/my_app/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/user/Desktop/my_app/package.json (relative path: ./src/app)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.json doesn't exist
      as directory
        /home/user/Desktop/my_app/src/app doesn't exist
[/home/user/Desktop/my_app/src/app]
[/home/user/Desktop/my_app/src/app.wasm]
[/home/user/Desktop/my_app/src/app.mjs]
[/home/user/Desktop/my_app/src/app.js]
[/home/user/Desktop/my_app/src/app.json]
 @ ./src/index.jsx 11:11-27

Я нашел похожие вопросы, такие как webpack: модуль не найден: Ошибка: невозможно разрешить (с относительным путем) и Webpack 4: ОШИБКА в модуле ввода не найдена: ошибка: не удается разрешить './src'

5
Slim 21 Авг 2018 в 15:47

4 ответа

Лучший ответ

Чтобы решить вашу проблему, добавьте расширения к своему webpack.config.js.

    module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Для получения дополнительной информации посетите resol.extensions.

6
Slim 21 Авг 2018 в 13:27

У меня была похожая проблема, и я смог решить ее, используя шаги ниже;

  1. Чтобы получить более подробную информацию об ошибке, введите webpack --display-error-details

Это выводит что-то вроде: «браузер поля не содержит допустимой конфигурации псевдонима»

  1. я редактирую свой package.json

main: "./js/script.js" это путь к моему файлу js

3. я редактирую мой settings.js

exports.themeLocation = './wp-content/themes/fictional-university-theme'

  1. я редактирую свой webpack.config.js - я добавил эту строку в module.exports
resolve: {
extensions:['.js', '.jsx']
},
0
Daniel M 23 Дек 2019 в 14:18

Убедитесь, что импорт из той же папки начинается с './'

Пример: импорт компонента из ./component;

0
user7023664user7023664 21 Авг 2018 в 13:19

В index.js добавьте расширение файла к app.

import App from './app.jsx'

Это необходимо, потому что вы не добавили параметр resovle.extensions в конфигурацию веб-пакета, поэтому он ищет папку с именем «app», в которой index.js.

Webpack Resolve Docs

2
yotke 21 Авг 2018 в 13:11
51949041