Поле "браузер" не содержит правильной конфигурации псевдонимов
Я начал использовать webpack2 (если быть точным, v2.3.2
), и после пересоздания моей конфигурации я продолжаю сталкиваться с проблемой, которую, похоже, не могу решить (заранее прошу прощения за уродливый дамп):
ERROR in ./src/main.js
Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
Parsed request is a module
using description file: [absolute path to my repo]/package.json (relative path: ./src)
Field 'browser' does not contain a valid alias configuration
aliased with mapping 'components': '[absolute path to my repo]/src/components' to '[absolute path to my repo]/src/components/DoISuportIt'
using description file: [absolute path to my repo]/package.json (relative path: ./src)
Field 'browser' does not contain a valid alias configuration
after using description file: [absolute path to my repo]/package.json (relative path: ./src)
using description file: [absolute path to my repo]/package.json (relative path: ./src/components/DoISuportIt)
as directory
[absolute path to my repo]/src/components/DoISuportIt does not exist
no extension
Field 'browser' does not contain a valid alias configuration
[absolute path to my repo]/src/components/DoISuportIt does not exist
.js
Field 'browser' does not contain a valid alias configuration
[absolute path to my repo]/src/components/DoISuportIt.js does not exist
.jsx
Field 'browser' does not contain a valid alias configuration
[absolute path to my repo]/src/components/DoISuportIt.jsx does not exist
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt.js]
[[absolute path to my repo]/src/components/DoISuportIt.jsx]
package.json
{
"version": "1.0.0",
"main": "./src/main.js",
"scripts": {
"build": "webpack --progress --display-error-details"
},
"devDependencies": {
...
},
"dependencies": {
...
}
}
С точки зрения поля browser
, на которое он жалуется, я смог найти следующую документацию: package-browser-field-spec
. Для него также есть документация по веб-пакетам, но, кажется, он включен по умолчанию: aliasFields: ["browser"]
. Я попытался добавить поле browser
в свой package.json
, но это не принесло пользы.
webpack.config.js
import path from 'path';
const source = path.resolve(__dirname, 'src');
export default {
context: __dirname,
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
resolve: {
alias: {
components: path.resolve(__dirname, 'src/components'),
},
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: source,
use: {
loader: 'babel-loader',
query: {
cacheDirectory: true,
},
},
},
{
test: /\.css$/,
include: source,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
query: {
importLoader: 1,
localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
modules: true,
},
},
],
},
],
},
};
SRC/main.js
import DoISuportIt from 'components/DoISuportIt';
SRC/компоненты/DoISuportIt/index.jsx
export default function() { ... }
Для полноты, .babelrc
{
"presets": [
"latest",
"react"
],
"plugins": [
"react-css-modules"
],
"env": {
"production": {
"compact": true,
"comments": false,
"minified": true
}
},
"sourceMaps": true
}
Что я делаю неправильно/отсутствует?
Ответы
Ответ 1
Оказалось, что проблема в том, что Webpack просто не разрешает импорт - говорить о ужасных ужасных сообщениях об ошибках: (
// Had to change
import DoISuportIt from 'components/DoISuportIt';
// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
Ответ 2
Я создаю ретранслятор на стороне сервера React и обнаружил, что это также может возникать при создании отдельной конфигурации сервера с нуля. Если вы видите эту ошибку, попробуйте следующее:
- Убедитесь, что ваше значение "entry" правильно исправлено относительно вашего "контекстного" значения. У меня не хватало предшествующее "./" перед именем файла записи.
- Удостоверьтесь, что у вас включено ваше решение. Ваш импорт на что-либо в node_modules по умолчанию будет искать в вашей папке "context", в противном случае.
Пример:
const serverConfig = {
name: 'server',
context: path.join(__dirname, 'src'),
entry: {serverEntry: ['./server-entry.js']},
output: {
path: path.join(__dirname, 'public'),
filename: 'server.js',
publicPath: 'public/',
libraryTarget: 'commonjs2'
},
module: {
rules: [/*...*/]
},
resolveLoader: {
modules: [
path.join(__dirname, 'node_modules')
]
},
resolve: {
modules: [
path.join(__dirname, 'node_modules')
]
}
};
Ответ 3
У меня была такая же проблема, но моя была из-за неправильной оболочки в пути:
// Wrong - uppercase C in /pathCoordinate/
./path/pathCoordinate/pathCoordinateForm.component
// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component
Ответ 4
Изменил мою запись на
entry: path.resolve(__dirname, './src/js/index.js'),
и это сработало.
Ответ 5
В моем случае, до самого конца webpack.config.js
, куда я должен был exports
webpack.config.js
, была опечатка: export
(должен быть exports
), что привело к webpack.config.js
при загрузке webpack.config.js
.
const path = require('path');
const config = {
mode: 'development',
entry: "./lib/components/Index.js",
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, "node_modules")
}
]
}
}
// pay attention to "export!s!" here
module.exports = config;
Ответ 6
Для тех, кто строит ионное приложение и пытается его загрузить. Убедитесь, что вы добавили хотя бы одну платформу в приложение. В противном случае вы получите эту ошибку.
Ответ 7
В моем случае это был пакет, который был установлен как зависимость в package.json
с относительным путем следующим образом:
"dependencies": {
...
"phoenix_html": "file:../deps/phoenix_html"
},
и импортируется в js/app.js
с помощью import "phoenix_html"
Это сработало, но после обновления node, npm и т.д.... с этим сообщением об ошибке не удалось.
Изменение строки импорта на import "../../deps/phoenix_html"
исправлено.
Ответ 8
По моему опыту, эта ошибка была результатом неправильного именования псевдонимов в Webpack. В том, что у меня был псевдоним по имени redux
и WebPack попытался ищет redux
, который поставляется с пакетом Redux в мой псевдоним пути.
Чтобы это исправить, мне пришлось переименовать псевдоним во что-то другое, например, в Redux
.
Ответ 9
Для всех с Ionic: обновление до последней версии @ionic/app-scripts дало лучшее сообщение об ошибке.
npm install @ionic/[email protected] --save-dev
Это был неправильный путь для styleUrls в компоненте к несуществующему файлу. Странно это не дало ошибок в разработке.
Ответ 10
В моей ситуации у меня не было экспорта в нижней части моего файла webpack.config.js. Просто добавив
export default Config;
решил это.
Ответ 11
В моем случае это связано с опечаткой с учетом регистра в пути импорта. Например,
Должно быть:
import Dashboard from './Dashboard/dashboard';
Вместо:
import Dashboard from './Dashboard/Dashboard';