Das Feld 'Browser' enthält keine gültige Alias-Konfiguration

130

Ich habe angefangen, webpack2 zu verwenden (um genau zu sein v2.3.2), und nachdem ich meine Konfiguration neu erstellt habe, stoße ich immer wieder auf ein Problem, das ich scheinbar nicht lösen kann (Entschuldigung für den hässlichen Speicherauszug im Voraus):

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": {
    ...
  }
}

In Bezug auf das browserFeld, über das es sich beschwert, ist die Dokumentation, die ich dazu finden konnte : package-browser-field-spec. Es gibt auch eine Webpack-Dokumentation, die jedoch standardmäßig aktiviert zu sein scheint : aliasFields: ["browser"]. Ich habe versucht browser, meinem Feld ein Feld hinzuzufügen , package.jsonaber das schien nichts zu nützen.

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() { ... }

Zur Vollständigkeit, .babelrc

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

Was mache ich falsch / fehlt?

Matthew Herbst
quelle

Antworten:

101

Es stellte sich heraus, dass Webpack einen Import nicht auflöste - sprechen Sie über schreckliche schreckliche Fehlermeldungen :(

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

// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
Matthew Herbst
quelle
1
Wird das Problem durch npm verursacht? Heute habe ich ein Modul mit npm aktualisiert, indem ich eine neueste Version des Moduls deinstalliert und installiert habe. Jetzt habe ich diesen Fehler erhalten und der Fehler sagt, dass der relative Speicherort des Moduls geändert werden soll, aber die Liste der Dateien ist etwas hoch, was all diese Dateien verursacht hat seine relative Position ändern?
DEEPAN KUMAR
2
Das hat auch meinen Arsch gerettet. Es ist etwas kontraintuitiv, dass Sie in den Sass-Dateien mit 'Ordner' importieren können, aber in .js-Dateien müssen Sie dies wie './Ordner' tun. Auch ohne --display-error-details gibt es KEINE Fehlermeldung, es stürzt nur ab
CoolGoose
1
Vielen Dank. Du rettest meinen Tag.
Jaroslaw K.
6
@ Matthew Herbst eine der dümmsten Fehlermeldungen :) Mein Arsch ist gerettet, danke!
Dmitry Senkovich
5
Das ist verrückt.
Coolboyjules
15

Ich erstelle einen serverseitigen React-Renderer und habe festgestellt, dass dies auch auftreten kann, wenn eine separate Serverkonfiguration von Grund auf neu erstellt wird. Wenn dieser Fehler auftritt, versuchen Sie Folgendes:

  1. Stellen Sie sicher, dass Ihr "Eintrag" -Wert in Bezug auf Ihren "Kontext" -Wert richtig geordnet ist. Meins fehlte das vorhergehende "./" vor dem Namen der Eintragsdatei.
  2. Stellen Sie sicher, dass Ihr "Auflösungs" -Wert enthalten ist. Andernfalls werden Ihre Importe für alles in node_modules standardmäßig in Ihrem "Kontext" -Ordner angezeigt.

Beispiel:

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
quelle
11

Ich hatte das gleiche Problem, aber meins lag an einem falschen Gehäuse im Pfad:

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

// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component
Baltzar Mattson
quelle
1
Das war auch mein Problem. Auf meinem Windows-Laptop funktionierte es jedoch einwandfrei, auf dem Linux-Server fiel es jedoch aus.
Matt M
4

In meinem Fall war es ein Paket, das als Abhängigkeit package.jsonmit einem relativen Pfad wie diesem installiert wurde :

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

und importiert js/app.jsmitimport "phoenix_html"

Dies hatte funktioniert, aber nach einem Update von Node, Npm usw. schlug es mit der obigen Fehlermeldung fehl.

Ändern der Importzeile, um das Problem zu import "../../deps/phoenix_html"beheben.

TNT
quelle
Oh nein, warum ist Webpack so unintuitiv, deine Gedanken? Ich habe auch lokale Abhängigkeit.
vintproykt
4

Mein Eintrag wurde geändert in

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

und es hat funktioniert.

Abraham Jagadeesh
quelle
3

In meinem Fall gab es bis zum Ende der webpack.config.js, wo ich exportsdie Konfiguration sollte, einen Tippfehler: export(sollte sein exports), der zu einem Fehler beim Laden webpack.config.jsüberhaupt führte.

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
quelle
3

Nach meiner Erfahrung war dieser Fehler auf eine falsche Benennung von Aliasnamen in Webpack zurückzuführen. Darin hatte ich einen Alias ​​namens reduxund Webpack versuchte nach dem zu suchen redux, der mit dem Redux-Paket in meinem Alias-Pfad geliefert wird.

Um dies zu beheben, musste ich den Alias ​​in etwas anderes umbenennen Redux.

Codejockie
quelle
2

Für alle, die eine ionische App erstellen und versuchen, sie hochzuladen. Stellen Sie sicher, dass Sie der App mindestens eine Plattform hinzugefügt haben. Andernfalls wird dieser Fehler angezeigt.

Olivier
quelle
1

Für alle mit Ionic: Das Aktualisieren auf die neueste Version von @ ionic / app-scripts ergab eine bessere Fehlermeldung.

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

Es war ein falscher Pfad für styleUrls in einer Komponente zu einer nicht vorhandenen Datei. Seltsamerweise gab es keinen Fehler in der Entwicklung.

alex351
quelle
1

In meiner Situation hatte ich keinen Export am Ende meiner Datei webpack.config.js. Einfach hinzufügen

export default Config;

Ich habe es gelöst.

dxhans5
quelle
0

Ich verwende "@ google-cloud / translate": "^ 5.1.4" und habe mich mit diesem Problem auseinandergesetzt, bis ich Folgendes ausprobiert habe:

Ich habe die Datei google-gax \ build \ src \ operationClient.js geöffnet und geändert

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

zu

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

was den Fehler behoben hat

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' ......

Ich hoffe es hilft jemandem

Abeer Sul
quelle
0

In meinem Fall lag es an einem fehlerhaften Sym-Link beim Versuch, eine benutzerdefinierte Winkelbibliothek mit der konsumierenden App zu verknüpfen. Nach dem Ausführen von npm link @ authoring / canvas

`` `" @ authoring / canvas ":" Pfad / zu / ui-authoring-canvas / dist "` `

Es scheint, dass alles in Ordnung war, aber das Modul immer noch nicht gefunden wurde:

Fehler vom npm Link

Als ich die Importanweisung auf etwas korrigierte, das der Editor finden konnte Link:

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

Ich habe dies erhalten, was im Überlauf-Thread erwähnt wird:

Der Feldbrowser enthält keine gültige Alias-Konfiguration

Um dies zu beheben, musste ich:

  1. cd /usr/local/lib/node_modules/packageName
  2. cd ..
  3. rm -rf packageName
  4. Führen Sie im Stammverzeichnis der Bibliothek Folgendes aus: a. rm -rf dist b. npm run build c. cd dist d.npm link

  5. Aktualisieren Sie in der konsumierenden App die Datei package.json mit "packageName": "file: / path / to / local / node_module / packageName" "

  6. Führen Sie im Stammverzeichnis der konsumierenden App den npm-Link packageName aus

Sankofa
quelle
0

In meinem Fall habe ich eine ungültige templateUrl verwendet. Durch Beheben des Problems wurde das Problem behoben.

@Component({
        selector: 'app-edit-feather-object',
        templateUrl: ''
    })
AmirHossein Rezaei
quelle
-1

In meinem Fall liegt dies an einem Tippfehler mit Groß- und Kleinschreibung im Importpfad. Beispielsweise,

Sollte sein:

import Dashboard from './Dashboard/dashboard';

Anstatt:

import Dashboard from './Dashboard/Dashboard';
wltheng
quelle