Pole „browser” nie zawiera prawidłowej konfiguracji aliasu

133

Zacząłem używać webpack2 (żeby być precyzyjnym v2.3.2) i po ponownym utworzeniu konfiguracji wciąż napotykam problem, którego nie mogę rozwiązać, otrzymuję (z góry przepraszam za brzydki zrzut):

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' doesn't 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' doesn't 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 doesn't exist
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            [absolute path to my repo]/src/components/DoISuportIt doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            [absolute path to my repo]/src/components/DoISuportIt.js doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            [absolute path to my repo]/src/components/DoISuportIt.jsx doesn't 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": {
    ...
  }
}

Pod względem browserpola to narzekają, dokumentacja udało mi się znaleźć na to: package-browser-field-spec. Istnieje również WebPack dokumentacji dla niego, ale wydaje się, że jest włączona domyślnie: aliasFields: ["browser"]. Próbowałem dodać browserpole do mojego, package.jsonale to nie przyniosło żadnego efektu.

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 / components / DoISuportIt / index.jsx

export default function() { ... }

Dla pełności, .babelrc

{
  "presets": [
    "latest",
    "react"
  ],
  "plugins": [
    "react-css-modules"
  ],
  "env": {
    "production": {
      "compact": true,
      "comments": false,
      "minified": true
    }
  },
  "sourceMaps": true
}

Co robię źle / czego mi brakuje?

Matthew Herbst
źródło
Uwielbiam wszystkie odpowiedzi „w moim przypadku”. Po prostu pokazuje, jak okropnym narzędziem jest nadal Webpack. Wyobraź sobie, że zwracasz pojedynczy ogólny błąd dla różnych scenariuszy „w moim przypadku”!
AleksandrH

Odpowiedzi:

105

Okazało się, że jest to problem z Webpack, który po prostu nie rozwiązał importu - porozmawiaj o okropnych okropnych komunikatach o błędach :(

// Had to change
import DoISuportIt from 'components/DoISuportIt';

// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
Matthew Herbst
źródło
1
Czy problem jest spowodowany przez npm? Dzisiaj zaktualizowałem moduł za pomocą npm, odinstalowując i instalując najnowszą wersję modułu, teraz otrzymałem ten błąd i błąd mówi o zmianie względnej lokalizacji modułu, ale lista plików jest trochę wysoka, co spowodowało, że wszystkie te pliki zmienić jego położenie względne?
DEEPAN KUMAR
2
To też uratowało mi tyłek. Jest nieco sprzeczne z intuicją, że w plikach Sass można importować za pomocą „folderu”, ale w plikach .js trzeba to zrobić tak, jak „./folder”. Również bez --display-error-details NIE ma żadnego komunikatu o błędzie, po prostu się zawiesza
CoolGoose,
1
Wielkie dzięki. Ratujesz mój dzień.
Jarosław K.
6
@Matthew Herbst jeden z najgłupszych komunikatów o błędach :) Mój tyłek jest uratowany, dzięki!
Dmitry Senkovich
6
To jest szalone.
coolboyjules
15

Buduję renderer po stronie serwera React i odkryłem, że może to również wystąpić podczas budowania oddzielnej konfiguracji serwera od podstaw. Jeśli widzisz ten błąd, wypróbuj następujące rozwiązania:

  1. Upewnij się, że wartość „wpisu” jest odpowiednio sklejona względem wartości „kontekstu”. W moim brakowało poprzedzającego „./” przed nazwą pliku wpisu.
  2. Upewnij się, że masz uwzględnioną wartość „rozwiązania”. Twoje importy wszystkich elementów w node_modules będą domyślnie szukać w folderze „kontekst”, w przeciwnym razie.

Przykład:

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')
    ]
}
};
Artif3x
źródło
11

Miałem ten sam problem, ale mój był z powodu złej obudowy na ścieżce:

// Wrong - uppercase C in /pathCoordinate/
./path/pathCoordinate/pathCoordinateForm.component

// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component
Baltzar Mattson
źródło
1
To też był mój problem. Jednak działało dobrze na moim laptopie z systemem Windows, ale zawiodło na serwerze, którym był Linux.
Matt M
4

W moim przypadku był to pakiet, który został zainstalowany jako zależność package.jsonz taką ścieżką względną:

"dependencies": {
  ...
  "phoenix_html": "file:../deps/phoenix_html"
},

i przywiezione js/app.jszimport "phoenix_html"

To zadziałało, ale po aktualizacji węzła, npm itp ... nie udało się z powyższym komunikatem o błędzie.

Zmiana linii importu, aby import "../../deps/phoenix_html"to naprawić.

TNT
źródło
O nie, dlaczego Webpack jest tak nieintuicyjny w tym, co myślisz? Mam też lokalne uzależnienie.
vintproykt
4

Zmieniłem mój wpis na

entry: path.resolve(__dirname, './src/js/index.js'),

i zadziałało.

Abraham Jagadeesh
źródło
3

W moim przypadku do samego końca webpack.config.js, gdzie powinienem exportssię konfigurować, pojawiła się literówka: export(powinna być exports), która webpack.config.jsw ogóle doprowadziła do niepowodzenia ładowania .

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;
Leon
źródło
3

Z mojego doświadczenia wynika, że ​​ten błąd był wynikiem niewłaściwego nazewnictwa aliasów w Webpack. W tym przypadku miałem alias o nazwie reduxi reduxpakiet webpack próbowałem znaleźć ten, który jest dostarczany z pakietem redux w mojej ścieżce aliasu.

Aby to naprawić, musiałem zmienić nazwę aliasu na inną, np Redux.

codejockie
źródło
2

Dla każdego, kto tworzy aplikację jonową i próbuje ją przesłać. Upewnij się, że do aplikacji została dodana co najmniej jedna platforma. W przeciwnym razie pojawi się ten błąd.

olivier
źródło
1

Dla każdego z Ionic: Aktualizacja do najnowszej wersji @ ionic / app-scripts dała lepszy komunikat o błędzie.

npm install @ionic/app-scripts@latest --save-dev

To była zła ścieżka dla styleUrls w komponencie do nieistniejącego pliku. Dziwne, że nie dał błędu w rozwoju.

alex351
źródło
1

W mojej sytuacji nie mam eksportu na dole mojego pliku webpack.config.js. Po prostu dodając

export default Config;

rozwiązałem to.

dxhans5
źródło
1

W moim przypadku było to spowodowane zepsutym łączem symbolicznym podczas próby połączenia npm niestandardowej biblioteki kątowej z konsumującą aplikacją. Po uruchomieniu npm link @ authoring / canvas

`` `` "@ authoring / canvas": "ścieżka / do / ui-authoring-canvas / dist" `

Wygląda na to, że wszystko jest w porządku, ale nadal nie można znaleźć modułu:

Błąd z linku npm

Kiedy poprawiłem instrukcję importu na coś, co redaktor mógł znaleźć Link:

import {CirclePackComponent} from '@authoring/canvas/lib/circle-pack/circle-pack.component';

Otrzymałem to o czym wspomina w wątku przepełnienia:

Przeglądarka pól nie zawiera prawidłowej konfiguracji aliasu

Aby to naprawić, musiałem:

  1. cd /usr/local/lib/node_modules/packageName
  2. cd ..
  3. rm -rf packageName
  4. W katalogu głównym biblioteki uruchom: a. rm -rf dist b. npm run build do. cd dist re.npm link

  5. W używanej aplikacji zaktualizuj plik package.json o „nazwa_pakietu”: „plik: / ścieżka / do / lokalny / moduł_węzła / nazwa_pakietu” ”

  6. W katalogu głównym używanej aplikacji uruchom npm link nazwa pakietu

Sankofa
źródło
0

Używam „@ google-cloud / translate”: „^ 5.1.4” i kłóciłem się z tym problemem, dopóki nie wypróbowałem tego:

Otworzyłem plik google-gax \ build \ src \ operationsClient.js i zmieniłem

const configData = require('./operations_client_config');

do

const configData = require('./operations_client_config.json');

który rozwiązał błąd

ERROR in ./node_modules/google-gax/build/src/operationsClient.js Module not found: Error: Can't resolve './operations_client_config' in 'C:\..\Projects\qaymni\node_modules\google-gax\build\src' resolve './operations_client_config' ......

Mam nadzieję, że to komuś pomoże

Abeer Sul
źródło
0

W moim przypadku użyłem nieprawidłowego templateUrl, poprawiając go problem został rozwiązany.

@Component({
        selector: 'app-edit-feather-object',
        templateUrl: ''
    })
AmirHossein Rezaei
źródło
0

Dodaj to do package.json:

"browser": {
  "[module-name]": false   
},
kimo_ouz
źródło
Koder powinien najpierw przeczytać dokumentację, zawsze szukam w stackoverflow, ale obecnie wolę najpierw przeczytać dokumentację. dzięki za edycję ...
kimo_ouz
-1

W moim przypadku jest to spowodowane literówką uwzględniającą wielkość liter w ścieżce importu. Na przykład,

Powinien być:

import Dashboard from './Dashboard/dashboard';

Zamiast:

import Dashboard from './Dashboard/Dashboard';
wltheng
źródło