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

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?

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

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')
    ]
}
};

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

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.

Mein Eintrag wurde geändert in

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

und es hat funktioniert.

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;

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.

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.

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.

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.

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

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:

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:

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

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: ''
    })

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