Resolve error unable to load resolver alias

Содержание

1. Eslint: no-duplicates Resolve error: unable to load resolver “node” #684
2. Comments
3. webpack resolver import/no-unresolved issue with npm@2 #664
4. Comments
5. Footer
6. Resolve error unable to load resolver alias
7. Webpack: resolve.alias не работает
8. Все 100 Комментарий

Какое значение имеет config.compile.entry ? Вы уверены, что окончательный путь верен?

@trusktr Вы можете найти его в файле config/index.js

const config = {
  compile: {
    entry: path.resolve(__dirname, '../src')
  }
}

Да сомневаюсь и много раз проверял, ничего страшного

У меня такая же проблема. resolve.alias, кажется, абсолютно ничего не делает

Тоже самое! Я пинал шины на простом образце с использованием 2.2.1, и я столкнулся с той же проблемой.

Не могли бы вы обновить enhanced-resolve и снова проверить?

@sokra Есть хорошие новости?

У меня такое бывает:

1. настроить псевдоним: OurComponents: path.resolve(__dirname, '../app/components/index.js'),
2. используйте его в одном файле, например import {App} from 'OurComponents';
3. запустить webpack (сервер разработки)

Работает нормально 🥇

1. Добавьте его в другой файл, например import {Hamburger} from 'OurComponents';
2. Обновите страницу

Работает отлично

1. Перезапустите веб-пакет (не внося _ каких-либо изменений в код_)

Я получаю Error: Cannot find module 'OurComponents'

Так что для меня, по крайней мере, это кажется чем-то, когда он используется более чем в одном файле и когда webpack впервые начинает вызывать эту ошибку, этого не происходит, когда webpack повторно компилируется или когда он используется только в одном файле.

Полная вещь:

Error: Cannot find module 'OurComponents'
    at Function.Module._resolveFilename (module.js:472:15)
    at Function.Module._load (module.js:420:25)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:/web/davidg-site/app/components/App/App.jsx:12:1)
    at Module._compile (module.js:573:32)
    at loader (C:webdavidg-sitenode_modulesbabel-registerlibnode.js:144:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (C:webdavidg-sitenode_modulesbabel-registerlibnode.js:154:7)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)

Я установил resolve.alias = path.resolve(__dirname, './src/styles/')
и когда я использую import "styles/common.css" это не удается,
ошибка getiing: Cannot find module 'styles/common.css'

но когда я использую require('styles/common.css') это просто сработало
что случилось?

Я успешно делаю это в новом проекте, и, похоже, он хорошо работает. Что я делаю:

base-ui / клиент / package.json

"devDependencies": {
    ...
    "webpack": "^2.2.0"
}

webpack.dev.config.js

resolve: {
            modules: [path.resolve('./node_modules')],
            alias: {
                Common: path.resolve(__dirname, '../../../../base-ui/client')
            },
            extensions: ['.js', '.jsx', '.json', '.scss']
        },

У нас есть разные приложения, которые используют компоненты внутри «base-ui», и эти приложения находятся в том же родительском каталоге, что и base-ui.

базовый пользовательский интерфейс / клиент / компоненты / index.js

export { default as Button } from './button/Button';
export { default as SingleInput } from './singleInput/SingleInput';

базовый пользовательский интерфейс / клиент / компоненты / кнопка / Button.jsx

...
export default Button

В этих приложениях мы можем делать такие вещи, как:

аккаунт-ui / клиент / страница / ForgotPassword.jsx

import { Button, SingleInput } from 'Common/components';

Этот метод, похоже, работает повсеместно. У него есть проблемы, когда дело доходит до тестирования Jest и использования таких вещей, как wallabyjs, которые я все еще пытаюсь понять, но что касается webpack и resolve.alias он отлично работает.

Надеюсь, это поможет.

В моем случае я не получаю никаких ошибок, но один и тот же импорт в двух разных файлах дает разные значения:

// file 1:
import { StatusBar } from 'Components' // works great!

// file 2:
import { StatusBar } from 'Components' // undefined :(

Кроме того, как дружеское напоминание, если вы используете Babel, убедитесь, что вы отключили модули,

{
  "presets": [["env", {"modules": false}], "react"],
}

@epitaphmike какая ОС? Я использую Windows, делал что-то очень похожее, но не работало. alias.modules у меня тоже не работает.

@davidgilbertson Я использую OS X El Capitan.

Интересно, тогда это проблема Windows. Я только что попробовал resolve.modules вместо resolve.alias и это тоже не работает.

Надеюсь, я просто делаю что-то глупое. Должно ли приведенное ниже работать в теории?

У меня есть файл my-site/buildTools/dev.js с моей конфигурацией разработчика, который частично выглядит так:

    resolve: {
        modules: [
            path.resolve(__dirname, '../app'),
            'node_modules',
        ],
    },

(Я пробовал пятьдесят различных комбинаций относительных путей и абсолютных путей)

Тогда у меня есть my-site/app/components/index.js :

export { default as Home } from './pages/Home/Home';

(Я также пробовал сделать это как my-site/app/components.js )

Затем я импортирую свой компонент вот так

import { Home } from 'components'; // "cannot find modules 'components'"

Но два нижеприведенных метода работают, поэтому я знаю, по крайней мере, правильные пути:

import Home from '../pages/Home/Home'; // works
import { Home } from '../../components/index.js'; // works

Может быть, это еще одна часть моей установки? Интересно, вызывает ли проблему использование babel-register .

Я нигде не использую babel-register.

Мой основной импорт Babel включает

base-ui / клиент / package.json

"devDependencies": {
    "babel-jest": "^18.0.0",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.22.0",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "enzyme": "^2.7.1",
    "enzyme-to-json": "^1.4.5",
    "fetch-mock": "^5.9.3",
    "jest": "^18.1.0",
    "jest-fetch-mock": "1.0.5",
    "nock": "^9.0.2",
    "react": "^15.4.2",
    "react-addons-test-utils": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-test-renderer": "^15.4.2"
  },

также я внес несколько изменений в нашу структуру каталогов, которые вы, возможно, захотите попробовать.

базовый интерфейс / клиент / компоненты / кнопка /

button----
    Button.jsx
    index.js
    propTypes.js

базовый пользовательский интерфейс / клиент / компоненты / кнопка / Button.jsx

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { buttonProps } from './propTypes';

const Button = ({ label, style = {}, href, onClick }) => (
    <RaisedButton
        label={ label }
        style={ style }
        href={ href }
        onMouseUp={ onClick }/>
);

Button.PropTypes = buttonProps;

export default Button;

базовый пользовательский интерфейс / клиент / компоненты / кнопка / index.js

import Button from './Button';
export default Button;

базовый пользовательский интерфейс / клиент / компоненты / index.js

export { default as Button } from './button';

аккаунт-ui / клиент / страница / ForgotPassword.jsx

Это без изменений.

import { Button, SingleInput } from 'Common/views/components';

У меня была аналогичная проблема с неработающими псевдонимами. Я исправил это, удалив папку node_modules и снова установив пакеты (запустив yarn ).

@filmic У меня была такая же проблема, даже если я использую пряжу, и проблема все еще

Здесь та же проблема.
Версия узла: v6.10.1
Версия Webpack: 2.2.1
ОС: OSX El Capitan

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': resolve('src')
  }
},

import App from '@/App.vue'

ОШИБКА в ./src/js/dashboard.js
Модуль не найден: ошибка: не удается разрешить «@ / App.vue»

Я не уверен, что это та же проблема, однако я создал проект, который показывает, что порядок псевдонимов имеет значение, и, вероятно, не должен (поскольку хеш не гарантирует порядок). Я могу открыть отдельный отчет об ошибке, если он будет отличаться от этого. С помощью webpack 2.4.1.

См. Образец репо:
https://github.com/jspears/webpack-alias-bug

Но может быть полезно получить другой образец проблемы.

Та же проблема. Это все еще расследуется?

Я вообще не могу заставить его работать.

Я искал тестовые примеры, я не могу найти тест для alias . Кто-нибудь знает об одном?

@jspears , возможно отдельная тема для заказа. У @raminious оригинального выпуска есть только один псевдоним.

Это безумие. Кажется, я вообще ничего не могу заставить работать с resolve.alias (в Windows 7 x64 с webpack 2.4.1 и node 6.10.1). Я попытаюсь найти несколько шаблонных репозиториев, используя alias чтобы посмотреть, смогу ли я заставить их скомпилировать. Я просто хотел начать очистку проекта, в котором есть множество относительных путей, и наткнулся на эту проблему после того, как в течение часа бился головой о стену. Это единичная проблема или есть люди, у которых нет никаких проблем?

@ dlong500 попробуйте использовать этот шаблон , просто введите resolve: {} например, и я смогу воспроизвести эту проблему.

Я отказался от этого сейчас и только начал использовать babel-plugin-module-resolver потому что я уже использую babel. Это позволяет мне создавать псевдонимы того же типа с помощью вавилонского преобразования.

То же самое для меня в Mac OS Sierra 10.12.3, node v.6.10.2 и webpack 2.2.1. Он работает с использованием require, как указано выше.

@sokra есть обновления? Это ошибка или … особенность?

У меня такая же проблема. Я назначаю несколько модулей каталогам файловой системы, и все они работают … кроме одного. В этом случае он выглядит относительно каталога src приложения с псевдонимами … то есть, как если бы я сказал import ‘./mymodule’ вместо ‘mymodule’.

использование require('module') работает, и я также обнаружил, что переименование модуля в операторе импорта и в псевдониме заставляет его работать. возможно какая то проблема с кешированием?

Когда я использую такой псевдоним:

alias{
   H:path.resolve(__dirname,'resources/assets/handlebars')
}

и есть погрузчик для ручек

{ test: /.hbs$/, loader: "handlebars-loader" }

Я тестировал, чтобы требовать тот же файл, но с другим префиксом, с расширением .js, этот псевдоним работает, но когда я меняю расширение на hbs, я тоже получаю ошибку

РЕДАКТИРОВАТЬ:
Оказалось, что руля и руля-загрузчика у меня не установлены. Эта ошибка несколько вводит в заблуждение, по крайней мере, для меня.

Имея такую ​​же проблему.
В итоге я пока использовал конфигурацию resolve.modules.


resolve : { modules: [path.resolve(__dirname, "app"), "node_modules"] }


Поэтому вместо ссылки на файл импорта по относительному пути вы можете ссылаться на него из каталога проекта.

@kemhwd Почему вы добавили "node_modules" в список resolve.modules ? Есть ли для этого одна особая причина?

возникла моя проблема, я неправильно использовал path.resolve(__dirname, "app/some/path")

правильно path.resolve(__dirname, "app", "some", "path") и это работает …

довольно много комментариев по этому поводу xD

@kemhwd Хорошо, кажется, это проясняет ситуацию

Если вы хотите добавить каталог для поиска, который имеет приоритет над node_modules /:
модули: [path.resolve (__ dirname, «src»), «node_modules»]

Благодаря @MartanLV мне удалось исправить мою проблему. В моем случае проблема усугубилась глупой опечаткой. Если честно, webpack мог бы лучше выдавать полезные сообщения об ошибках. Сказать, что псевдоним не может быть найден, так же полезно, как сказать «что-то не так»

Недавно я наткнулся на решение, которое мне подходит. Если вы используете Typescript 2.0+ (который у вас должен быть) и awesome-typescript-loader (который у вас должен быть), вы можете избежать необходимости в resolve.alias , используя параметры tsconfig baseUrl и paths внутри параметра верхнего уровня compilerOptions . Это здорово, потому что он работает независимо от того, как вы управляете своими модулями, и если вы используете линтер (который у вас должен быть), вас автоматически поймут. Вот пример из моего кода:

"compilerOptions": {
  ...
  "baseUrl": ".",
  "paths": {
    "@Client/*": ["client/*"],
    "@Components/*": ["client/src/components/*"],
    "@Containers/*": ["client/src/containers/*"],
    "@Repository/*": ["server/src/repository/*"],
    "@Server/*": ["server/*"],
    "@Shared/*": ["shared/*"]
  }
  ...
}

Чтобы разрешить webpack доступ к этим псевдонимам, добавьте следующий require а также добавьте следующую конфигурацию plugins конфигурацию вашего webpack resolve :

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
  ...
  plugins: [
    new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
  ],
  ...
},

Теперь, когда вы хотите импортировать что-то из каталога {projectDir}/shared вы можете ссылаться на него следующим образом:
import { MyType, MyInterface } from "@Shared/types";

🎉

Я только что столкнулся с проблемой, из-за которой все псевдонимы перестали разрешаться из-за добавления второго файла package.json в один из каталогов src.

Эта ошибка возникла в обратной связи eslint и, похоже, связана с использованием eslint-import-resolver-webpack для разрешения импорта в моих файлах src.

Довольно специфический вариант использования, но подумал, что он может помочь некоторым пролить свет на вещи.

В случае, если кто-то, использующий Rails с webpack, столкнется с этим, можно указать псевдоним для @ paths:

config/webpack/shared.js

Просто добавьте к хешу resolve: :

  alias: {
       '@': resolve(settings.source_path + '/packs'),
  },

не используйте eslint-loader и все будет хорошо

Я исправил это, удалив node_modules и запустив npm install

Такое случается со мной с Webpack 3

Та же проблема: я использовал последний веб-пакет с Angular4 и добавил несколько быстрых путей через resolve.alias и получил ошибки во время работы webpack-dev-server :

ERROR in [at-loader] ./src/app/app.module.ts:39:8 
    TS2307: Cannot find module 'core'.

ERROR in [at-loader] ./src/app/app.module.ts:47:8 
    TS2307: Cannot find module 'shared/layouts'.

ERROR in [at-loader] ./src/main.browser.aot.ts:10:36 
    TS2307: Cannot find module '../compiled/src/app/app.module.ngfactory'.
Child html-webpack-plugin for "index.html":

Но меня удивило, что, несмотря на ошибку, в конечном итоге он работает. Я отправил в лог полученные объекты на место, где были обнаружены эти ошибки:

import {
  RootErrorHandler,
  LoggerService
} from 'core';

import {
  APP_LAYOUTS_DECLARATIONS
} from 'shared/layouts';

console.log('>>> LoggerService:', LoggerService);
console.log('>>> APP_LAYOUTS_DECLARATIONS:', APP_LAYOUTS_DECLARATIONS);

И получил правильный вывод в моем браузере:

>>> LoggerService: ƒ LoggerService(http) {
        this.http = http;
    }
>>> APP_LAYOUTS_DECLARATIONS: (2) [ƒ, ƒ]

И приложение запускается и работает без ошибок. Что это значит? Ошибка в каком-то загрузчике или плагине?

Обновление: это был объем TypeScript, а не WebPack.

Для меня эта проблема возникла при изменении контекста Webpack. Установив контекст Webpack в каталог src, псевдонимы НЕ работают:

// webpack.config.js:
module.exports = {
  context: path.resolve(__dirname, './src'),
  entry: {
    app: ['./index.js']
  }
  // ...
}

При использовании корня проекта в качестве контекста Webpack псевдонимы ДЕЙСТВУЮТ :

// webpack.config.js:
module.exports = {
  context: path.resolve(__dirname, '.'),
  entry: {
    app: ['./src/index.js'],
  }
  // ...
}

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

Я решил проблему, используя path.join вместо path.resolve.

alias: {
    Ui: path.join(__dirname, '/resources/assets/js/ui/'),
}

и использование

import RadioButton from 'Ui/RadioButton.js'

@tugayilik Работает. Могу я попросить вас объяснить, почему это имеет значение? мне любопытно

@imam Согласно документации node.js;

Просто как работает решение ;

path.resolve('/foo', '/bar') _outputs / bar_

Если вам нужно несколько сегментов каталога, вы должны использовать его как:

path.resolve('/foo', './bar', './baz')

Это всегда будет приводить к абсолютному URL-адресу, просто передача __dirname в качестве первого аргумента в этом случае не имеет значения. Вызов path.resolve () без аргументов даст вам __dirname.

Согласно моему примеру, если я хочу использовать path.resolve, мне нужно использовать его как path.resolve('resources/assets/js/ui/') . Он выводит __dirname/resources/assets/js/ui

Принцип работы

path.join(__dirname, '/foo') _outputs_ ___ dirname / foo_

У меня такая же проблема

resolve: {
    alias: {
      'create-api': './create-api-client.js',
      'modules': path.resolve(__dirname, '../node_modules')
    }
  },

modules не работает ，
это сообщение об ошибке

// import pinyin from 'modules/pinyin/dist/bundle.js'

Module not found: Error: Can't resolve 'modules/pinyin/dist/bundle.js' in '/Corvette/src/lib'

Я прочитал и попробовал большинство опций: @tugayilik понял ….

  Containers: path.resolve('src/containers/'),
  Components: path.resolve('src/components/'),

Что здесь сработало.

У меня была эта проблема в течение последнего часа, пробуя всевозможные комбинации.

_ ПРИМЕЧАНИЕ. Это нормально работает при использовании modules , но я вижу проблему в alias _

Я нахожусь в Windows, и моя конфигурация Webpack находится в другом каталоге, чем корень моего проекта, и мой проект находится на моем дополнительном диске D: . Путь, который я отправляю, является абсолютным:

D:ProjectsCompanies[PROJECT_NAME]app

Конфигурация Webpack:

{
    resolve: {
        alias: {
            '~': 'D:ProjectsCompanies[PROJECT_NAME]app',
        },
        extensions: ['.js'],
        modules: ['node_modules'],
    },
}

В компоненте я импортирую вот так:

import Sample from '~/components/samples/Sample'

Я получаю такую ​​ошибку:

ОШИБКА в ./app/entrypoints/client/index.js
Модуль не найден: ошибка: не удается разрешить «~ / components / samples / Sample» в «D: Projects [PROJECT_NAME] appsamplesSample»

Да, то же самое, проблема все еще возникает. Кажется, совсем не работает

Я смог решить эту проблему со своей стороны.

Я объединял объекты конфигурации Webpack и случайно переопределял неопределенную опору псевдонима той, которая содержала данные.

В качестве работы я использовал плагины webpack.Define для получения конфигурации для конкретной среды. Кажется, это работает очень хорошо. Я передаю среду через параметр командной строки при запуске или сборке. Затем я использую это для импорта файла .json с определенными настройками среды. Надеюсь, кому-то это тоже пригодится …

`
module.exports = env => {

var config = require ( ../config/${env}.json )

вернуть {
…

plugins: [
  new webpack.DefinePlugin({
    'env': JSON.stringify(config)
  })
]

};
};
`

Здравствуйте все

У меня возникла проблема с разрешением файлов вне каталога моего проекта. Он работал с некоторыми файлами и не работал с другими, такими как @aryzing, упомянутым выше.

Мне удалось решить эту проблему простым редактированием: поставив символ @ перед псевдонимом …

Раньше это было
config.resolve.alias['global'] = path.join(__dirname, '../_global')

Теперь это
config.resolve.alias['<strong i="13">@global</strong>'] = path.join(__dirname, '../_global')

И это работает ..

Еще одно замечание (для пользователей Vue.js): если вы пытаетесь использовать этот псевдоним из шаблона, поместите символ ~ перед псевдонимом. Например

<img src="@global/static/icons/Footer_Mail.svg" class="contact-icon"/>

выше не работает, тогда как …

<img src="[email protected]/static/icons/Footer_Mail.svg" class="contact-icon"/>

…работает отлично

Надеюсь, это поможет другим

Всем привет,

Добавление @ перед псевдонимом также решает проблему разрешения файлов вне каталога моего проекта для меня.

'common': resolve('../common') не работал

'<strong i="9">@common</strong>': resolve('../common') работает

Удачи!

Добавление @ перед псевдонимом решает проблему

Зачем? Где это задокументировано?

@aryzing я не нашел никакой документации. просто провел случайный эксперимент, и он сработал 🥇

@ Cedric1994 Я думаю, твоя проблема заключалась в; ваш псевдоним common имеет то же имя, что и существующий каталог common . Решение не было @ в начале, это было другое имя, чем common .

Тоже не сработало. добавил алиасы в конфиг препроцессора, заработало!

Одна вещь, которая меня сбила с толку, — это то, что псевдонимы упорядочены .

неправильный порядок:

const aliases = {
  preact: require.resolve('preact'),
  'preact/devtools': require.resolve('preact/devtools'),
}

правильный порядок:

const aliases = {
  'preact/devtools': require.resolve('preact/devtools'),
  preact: require.resolve('preact')
}

Вы захотите, чтобы ваши более конкретные псевдонимы располагались перед более общими псевдонимами.

Из этого обсуждения не сработало ни одно решение для

Я еще не нашел решения, но это происходит во всех новых проектах Vue-CLI — работает в моих старых …

Это (по крайней мере, для меня) связано с добавлением использования @types в моих модулях узлов, я думаю, Vue использует это сейчас .. но я пытаюсь решить эту проблему, не вырывая волосы . Интересно знать, что @babel не препятствует использованию псевдонимов @ в путях …

Думал, что это одно или два из моих расширений VS-Code для путей intellisense, но это оказалось отвлекающим маневром.

Я раздвоил create-react-app чтобы добавить поддержку импорта некоторых ранее созданных компонентов беседки. Мы доказали, что это работает с минимальной конфигурацией веб-пакета, но мы хотим создать наше приложение с create-react-app чтобы мы могли получить все достоинства react-script .

Единственное, что проблематично, — это разрешить наши псевдонимы. Понятия не имею, почему это не работает. Есть единственный компонент bower, у которого есть директория vendor . Определение псевдонима выглядит следующим образом.

Псевдоним:

backbone: path.resolve(__dirname, 'glu/vendor/backbone/backbone')

Ошибка:

./bower_components/glu/model.js
Module not found: Can't resolve 'backbone' in '/Users/ralph.smith/Workspace/bfs/bower_components/glu'

Что интересно, если я удалю псевдоним и добавлю определение модуля:

 modules: ['node_modules', paths.appNodeModules, 'bower_components', 'glu/vendor']

Вышеупомянутая ошибка исчезла, но я получаю другие ошибки для вещей в каталоге vendor:

./bower_components/glu/appBus.js
Module not found: Can't resolve 'backbone.wreqr' in '/Users/ralph.smith/Workspace/bfs/bower_components/glu'

Я решил проблему с псевдонимом, используя утилиту resolveApp в react-scripts/config/path.js .

например

const appBowerModules = resolveApp('bower_components')
const gluVendor = resolveApp('bower_components/glu/vendor')

// put this in the webpack alias array
const alias = {
  backbone: path.resolve(appBowerModules, gluVendor, 'backbone/backbone'),
}

Поскольку эта проблема закрыта, я ожидаю, что у нас есть какое-либо рабочее решение для нее. Может кто-нибудь прокомментировать это в самой ветке?

@ milangupta511 Укажите проблему еще раз. Могло быть иначе, но да! Поскольку я знаю, что эта проблема решена.

Учитывая следующую структуру папок: ~/src/components/Button.js

Конфигурация Storybook Webpack
~/.storybook/webpack.config.js

module.exports = {
  resolve: {
    alias: {
      '<strong i="11">@components</strong>': path.resolve('src/components/')
    }
  }
};

Ваш компонент
~/src/components/Button.js

import React from 'react'

export default ({ children, ...rest }) => (
  <button {...rest}>{children}!!!</button>
)

Рассказы из сборников рассказов
~/stories/index.stories.js

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Button from '@components/Button'

storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ));

Он должен работать. 😎

На что обратить внимание
Экспорт / импорт
import { Button } from '@components/Button' ! = import Button from '@components/Button'

@Sawtaytoes, можешь подробнее объяснить, чем ты занимаешься? Я так сильно застрял в создании статического пути

@javadbat

В моей конфигурации Webpack у меня есть следующее:

  resolve: {
    alias: {
      '<strong i="8">@shared</strong>': path.dirname(require.resolve('app')),
      '~': path.join(fs.realpathSync(process.cwd()), 'app'),
    },
    extensions: ['.js'],
    modules: ['node_modules'],
  },

Весь код моего браузера находится в каталоге app/ . В этом конкретном проекте есть разница между папкой app/ пакета и папкой app/ текущего проекта.

В этом примере @shared — это пакет, ~ — это проект. Я бы не стал делать это в будущем, но я знаю, что эта конфигурация работает.

Псевдонимы — абсолютная ерунда для разрешения импорта. Если вы не хотите вводить ../ подумайте об использовании чего-нибудь вроде path.resolve(__dirname, '../src') чтобы вы могли сделать

import Stuff from 'client/components/stuff'; // relative to root of project

вместо того:

import Stuff from 'COMPONENTS/stuff'; // this is dumb

или:

import Stuff from './../stuff; // once upon a time highly paid web devs didn't complain about relative paths now they do

Я думаю, что alias работает или, может быть, документация должна объяснить это лучше.

resolve: {
      alias: {
        _self: path.join(__dirname, 'src/web'),
        _shared: path.join(__dirname, 'src/shared'),
        _components: path.join(__dirname, 'src/web/components'),
        _helpers: path.join(__dirname, 'src/web/helpers'),
        _layers: path.join(__dirname, 'src/web/layers'),
        _mutations: path.join(__dirname, 'src/web/mutations'),
        _routes: path.join(__dirname, 'src/web/routes')
      }
    }

import { something } from '_components';

РЕЗУЛЬТАТ:

"export 'something' was not found in '_components'

Но это в components/index.js , если я делаю нормальный относительный импорт, он работает нормально. Я тоже думаю не понимает export * from './module'; и export {default as something} from './module'; .

Ваша проблема может заключаться в том, что у вас есть конфигурация веб-пакета во вложенной папке, например:
project-name/configs/webpack/dev.js
Тогда вам понадобится что-то вроде этого:

const srcDir = path.resolve(__dirname, '../../src'); // resolve project src directory

module.exports = {
    resolve: {
        alias: {
            '<strong i="9">@components</strong>': path.join(srcDir, 'components'),
            '<strong i="10">@modules</strong>': path.join(srcDir, 'modules'),
            '<strong i="11">@store</strong>': path.join(srcDir, 'store')
        }
    }
       //...
}

Это сработало для меня.

@alexeychikk моя конфигурация

Мой каталог выглядит так:

/ root
| -- src
|     | -- web
|     |     | -- entry.js      <-- this is the entry file
|     ` -- shared            <-- this is where some of my imports are located
| -- webpack.prod.js

Но я предположил, что не имеет значения, где находится папка, поскольку псевдоним специально направлен в эту папку через _shared: path.join(__dirname, 'src/shared')

Итак, что-то вроде этого должно сработать:

import SomeModule from '_shared/someModuleDirectoryWithIndexJSinIt';
import { anotherModule } from '_shared/directory/anotherModuleDirectoryWithIndexJSinIt';

Если нет причины, по которой не должно быть. console.log s показывают, что с путями проблем нет. Я также могу проверить, просматриваются ли пути с псевдонимами, потому что, когда я удаляю alias es, я получаю другую ошибку. Если я приму совет

import MiniCssExtractPlugin from 'mini-css-extract-plugin';
       ^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)

РЕДАКТИРОВАТЬ:

РАБОТАЕТ СЕЙЧАС.

Не удалось добиться этого в проекте React.

@ asos-oliverwilson, как вы создали этот проект React? через приложение create-response-app? Потому что это не имеет никакого отношения к тому, какой фреймворк вы используете.

Если у меня возникла проблема с псевдонимом с tsx-файлами, оказалось, что path.resolve действительно был исправлением с моей стороны

что раньше было

'#': './src/'

сейчас

'#': path.resolve('src/')

Также для меня проблема заключалась в «./».
Удалив его из пути, Webpack наконец разрешит псевдоним !! 🎉
(На самом деле я использую Encore, но, в конце концов, он должен быть аналогичным и для чистой конфигурации Webpack)

let config = Encore.getWebpackConfig();
config.resolve.alias["~"] = path.resolve(__dirname, 'assets/js');
module.exports = config;

А потом вот так:

import Header from '~/components/Header.vue'

Больше информации здесь:
https://webpack.js.org/configuration/resolve/

module.exports = {
    mode: 'development',
    entry: [
        './src/app.js',
    ],
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'main.js',
        publicPath: '/',
    },

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            config: path.resolve(__dirname, '../config'),
            vue: 'vue/dist/vue.js',
            src: path.resolve(__dirname, '../src'),
            store: path.resolve(__dirname, '../src/store'),
            assets: path.resolve(__dirname, '../src/assets'),
            components: path.resolve(__dirname, '../src/components'),
            '@': path.resolve(__dirname, '../src'),
        },
    },

    "webpack-bundle-analyzer": "^3.4.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.8.0",
    "webpack-merge": "^4.1.4"



md5-a41215bc84fed5b9d7ffc1d2041ce320



    // import {GET_ITEMS} from '@store/modules/lists/getters';
    // import {GET_ITEMS} from 'store/modules/lists/getters';
    // import {GET_ITEMS} from './store/modules/lists/getters';
    // import {GET_ITEMS} from '/store/modules/lists/getters';
    // import {GET_ITEMS} from 'store/modules/lists/getters';


Module not found: Error: Can't resolve '@/store/modules/lists/getters' in


Ничего не помогло.

У меня все еще есть эта проблема, когда у меня есть вложенный псевдоним, например:

 '@graphql-schema/order': path.resolve('src/graphql-schemas/order/'), // doesn't work
 '@graphql-schema': path.resolve('src/graphql-schemas/'), // works

Я думал, что второй строки будет достаточно, чтобы разрешить импорт типа import orderResolvers from '@graphql-schemas/order/resolvers'; но я получаю Module not found: Error: Can't resolve '@graphql-schemas/order/resolvers' in '/my-app/src/graphql'

@renatoagds можете ли вы создать минимально воспроизводимое тестовое репо?

Мне очень жаль, что @evilebottnawi только что понял, что это проблема с моей стороны, пожалуйста, не обращайте внимания.

Проблема должна быть решена, но некоторые загрузчики не могут поддерживать alias поэтому необходимо их улучшить. Я закрываю эту проблему из-за большого количества комментариев со спамом, например :+1 , Same issue и и т. д., это не помогает решить проблему, поэтому не стесняйтесь открывать новую проблему с воспроизводимым тестовым репозиторием, если у вас есть проблемы

Я отказался от этого сейчас и только начал использовать babel-plugin-module-resolver потому что я уже использую babel. Это позволяет мне создавать псевдонимы того же типа с помощью вавилонского преобразования.

Мне не удалось заставить resolve.alias работать. На момент написания я использую "webpack": "4.19.1" .

Вместо этого я решил использовать babel-plugin-module-resolver и, похоже, это отлично работает. Определенно альтернатива, если вы, как и я, слишком долго бились головой об стену!

Псевдонимы — абсолютная ерунда для разрешения импорта. Если вы не хотите вводить ../ подумайте об использовании чего-нибудь вроде path.resolve(__dirname, '../src') чтобы вы могли сделать

import Stuff from 'client/components/stuff'; // relative to root of project

вместо того:

import Stuff from 'COMPONENTS/stuff'; // this is dumb

или:

import Stuff from './../stuff; // once upon a time highly paid web devs didn't complain about relative paths now they do

Это вовсе не глупо. Использование псевдонимов чрезвычайно распространено. Дело не в лени, а в написании переносимого кода.

Сказать, что веб-разработчики привыкли к относительному импорту, все равно что сказать, что люди привыкли жить без холодильников. Конечно, сделали. Но было ли это лучше, чем сейчас? Нет. Нет, не было.

У меня все еще возникает эта проблема в версии 4.29.6.

Настало новое десятилетие — все еще не работает. Последний Webpack4.

+1 ничего не работает, друзья

Возникла эта проблема при попытке использовать вариант 3 при настройке node-env для Webpack (https://github.com/lorenwest/node-config/wiki/Webpack-Usage)

Только для сопровождающих:

• [] webpack-4
• [] webpack-5
• [] ошибка
• [] критическая ошибка
• [] улучшение
• [ ] документация
• [ ] спектакль
• [] зависимости
• [] вопрос

spoiler

{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:jsx-a11y/recommended",
    "airbnb",
    "airbnb/hooks",
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "plugins": [
    "react",
    "jsx-a11y"
  ],
  "parser": "babel-eslint",
  "rules": {
    "import/no-unresolved": [
      1,
      {
        "commonjs": false,
        "amd": false
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "path": ["src"]
      }
    }
  }
}

spoiler

{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true, /* Enable incremental compilation */
    "target": "ES2018"
    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
    "module": "commonjs"
    /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "lib": [
      "es2018",
      "dom"
    ]
    /* Specify library files to be included in the compilation. */,
    "allowJs": true
    /* Allow javascript files to be compiled. */,
    "checkJs": false,
    /* Report errors in .js files. */
    "jsx": "react"
    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
    // "declaration": true, /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true, /* Generates corresponding '.map' file. */
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./build",
    /* Redirect output structure to the directory. */
    // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true, /* Enable project compilation */
    // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
    // "removeComments": true, /* Do not emit comments to output. */
    // "noEmit": true, /* Do not emit outputs. */
    "importHelpers": true
    /* Import emit helpers from 'tslib'. */,
    "downlevelIteration": true
    /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
    // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true
    /* Enable all strict type-checking options. */,
    "noImplicitAny": false,
    /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true, /* Enable strict null checks. */
    // "strictFunctionTypes": true, /* Enable strict checking of function types. */
    // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
    // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    "noUnusedLocals": true
    /* Report errors on unused locals. */,
    "noUnusedParameters": true
    /* Report errors on unused parameters. */,
    // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node",
    /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */

    "baseUrl": "./src",
    /* Base directory to resolve non-absolute module names. */
    "paths": {
      "Components/*": ["components/*"],
      "Modals/*": ["components/modals/*"],
      "Panels/*": ["components/panels/*"],
      "Services/*": ["services/*"],
      "Actions/*": ["actions/*"],
      "Reducers/*": ["reducers/*"],
      "Widgets/*": ["widgets/*"],
      "Assets/*": ["assets/*"],
      "Containers/*": ["containers/*"],
      "Config/*": ["config/*"]
    },
    /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [], /* List of folders to include type definitions from. */
    "types": [
      "jest","node"
    ],
    /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true
    /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
    "esModuleInterop": true
    /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    "sourceRoot": "/src",
    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    "experimentalDecorators": true
    /* Enables experimental support for ES7 decorators. */
    /* Experimental Options */
    // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
  },
  "exclude": [
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "node_modules",
    "obj"
  ],
  "include": [
    "src",
    "src/**/*.ts",
    "src/**/*.tsx",
    "@types/**/*.d.ts",
    "node_modules/axios",
    "node_modules/redux-thunk"
  ]
}

spoiler

extensions: paths.moduleFileExtensions
      .map(ext => `.${ext}`)
      .filter(ext => useTypeScript || !ext.includes('ts')),
    alias: {
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      // 'react-native': 'react-native-web',
      Config: path.resolve(__dirname, paths.appSrc, 'config'),
      Components: path.resolve(__dirname, paths.appSrc, 'components'),
      Panels: path.resolve(__dirname, paths.appSrc, 'components', 'panels'),
      Modals: path.resolve(__dirname, paths.appSrc, 'components', 'modals'),
      Services: path.resolve(__dirname, paths.appSrc, 'services'),
      Actions: path.resolve(__dirname, paths.appSrc, 'actions'),
      Reducers: path.resolve(__dirname, paths.appSrc, 'reducers'),
      Widgets: path.resolve(__dirname, paths.appSrc, 'widgets'),
      Assets: path.resolve(__dirname, paths.appSrc, 'assets'),
      Containers: path.resolve(__dirname, paths.appSrc, 'containers')
    }

spoiler

"eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-config-react-app": "^3.0.8",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-node": "^0.3.4",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
"@babel/core": "^7.12.7",
    "@gmr-fms/react-swipeable-tabs": "^2.4.2",
    "@svgr/webpack": "2.4.1",
    "@types/jest": "^26.0.15",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.6",
    "@typescript-eslint/parser": "^4.18.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "8.0.4",
    "webpack": "^4.41.4",
    "webpack-dev-server": "^3.11.0",
     "prettier": "^2.2.1",