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

Question

Ich habe begonnen, webpack2 zu verwenden (um genau zu sein, v2.3.2) und nachdem ich meine Konfiguration neu erstellt habe, laufe ich auf ein Problem, das ich nicht zu lösen scheinen kann. Ich (sorry im Voraus für hässliche Dump):

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 browser Feld darüber beschwert, die Dokumentation Ich habe in der Lage zu finden Das ist: package-browser-field-spec. Es gibt auch eine Webpack-Dokumentation dafür, aber es scheint standardmäßig aktiviert zu sein: aliasFields: ["browser"]. Ich habe versucht, ein browser Feld zu meinem package.json hinzufügen, aber das schien nichts zu tun.

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

Der 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?

Answer 1

stellte sich heraus, ein Problem zu sein mit Webpack nur einen Import nicht die Lösung - über schreckliche schreckliche Fehlermeldungen sprechen :(

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

// To (notice the missing `./`) 
import DoISuportIt from './components/DoISuportIt'; 

Answer 2

ich hatte das gleiche Problem, aber mir war wegen der falschen Gehäuse in Pfad:

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

// Correct - lowercase c in /pathcoordinate/ 
./path/pathcoordinate/pathCoordinateForm.component 

Answer 3

Für alle, die eine ionische App bauen und zu versuchen, es zu laden. Stellen Sie sicher, dass Sie zumindest eine Plattform, um die App. Andernfalls werden Sie diese Fehlermeldung erhalten.

Answer 4

In meinem Fall war es ein Paket, das als eine Abhängigkeit in package.json mit einem relativen Pfad so installiert wurde:

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

und importiert in js/app.js mit import "phoenix_html"

Dies gearbeitet hatte, aber nach einer Aktualisierung des Knotens, npm , etc ... es ist mit der obigen Fehlermeldung fehlgeschlagen.

Ändern der Import-Zeile zu import "../../deps/phoenix_html" behoben.

Answer 5

Ich baue einen Reaction serverseitigen Renderer und festgestellt, dass dies auch beim Erstellen einer separaten Serverkonfiguration von Grund auf auftreten kann. Wenn dieser Fehler auftritt, versuchen Sie Folgendes:

1. Stellen Sie sicher, dass Ihr "Eintrag" Wert relativ zu Ihrem "Kontext" Wert richtig pathed ist. Mir fehlte das vorangestellte "./" vor dem Namen der Eintragsdatei.
2. Stellen Sie sicher, dass Sie den Wert "resolve" enthalten haben. Ihre Importe für alles in node_modules suchen normalerweise in Ihrem "context" -Ordner nach.

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

Answer 6

Für alle mit ionischen: Aktualisierung auf die neueste @ ionische/app-Skripte Version gab 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.