Il campo "browser" non contiene una configurazione alias valida

Ho iniziato a usare webpack2 (per essere precisi v2.3.2) e dopo aver ricreato la mia configurazione continuo a imbattermi in un problema che non riesco a risolvere ottengo (scusami in anticipo per il brutto 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 termini di browsersettore è lamentarsi, la documentazione sono stato in grado di trovare su questo è: package-browser-field-spec. V'è anche la documentazione webpack per esso, ma sembra averla attivata per impostazione predefinita: aliasFields: ["browser"]. Ho provato ad aggiungere un browsercampo al mio package.jsonma questo non sembra aver fatto nulla di buono.

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

export default function() { ... }

Per completezza, .babelrc

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

Cosa sto facendo di sbagliato / mancante?

Si è rivelato essere un problema con Webpack che non risolveva un'importazione - parla di messaggi di errore orribili e orribili :(

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

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

Sto costruendo un renderer React lato server e ho scoperto che ciò può verificarsi anche quando si crea da zero una configurazione server separata. Se visualizzi questo errore, prova quanto segue:

1. Assicurati che il valore "entry" sia correttamente indirizzato rispetto al valore "context". Il mio mancava il precedente "./" prima del nome del file di voce.
2. Assicurati di avere incluso il valore di "risoluzione". In caso contrario, le tue importazioni su qualsiasi cosa in node_modules appariranno nella cartella "context".

Esempio:

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

Ho avuto lo stesso problema, ma il mio era a causa di un involucro sbagliato nel percorso:

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

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

Nel mio caso era un pacchetto installato come dipendenza package.jsoncon un percorso relativo come questo:

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

e importato js/app.jsconimport "phoenix_html"

Questo aveva funzionato ma dopo un aggiornamento di nodo, npm, ecc ... non era riuscito con il messaggio di errore sopra riportato.

Modifica della riga di importazione per import "../../deps/phoenix_html"risolverlo.

Modificato il mio ingresso a

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

e ha funzionato.

Nel mio caso, fino alla fine del webpack.config.js, dove avrei dovuto essere exportsconfigurato, c'era un errore di battitura: export(dovrebbe essere exports), che ha portato al fallimento con il caricamento webpack.config.jsa tutti.

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;

Nella mia esperienza, questo errore è stato il risultato di una denominazione impropria degli alias in Webpack. In quello avevo un alias chiamato reduxe webpack ha provato a cercare quello reduxche viene fornito con il pacchetto redux nel mio percorso alias.

Per risolvere questo problema, ho dovuto rinominare l'alias in qualcosa di diverso Redux.

Per chiunque costruisca un'app ionica e cerchi di caricarla. Assicurati di aver aggiunto almeno una piattaforma all'app. Altrimenti otterrai questo errore.

Per tutti con Ionic: l'aggiornamento all'ultima versione di @ ionic / app-script ha dato un messaggio di errore migliore.

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

Era un percorso errato per styleUrls in un componente a un file inesistente. Stranamente non ha dato errori nello sviluppo.

Nella mia situazione, non avevo un'esportazione nella parte inferiore del mio file webpack.config.js. Semplicemente aggiungendo

export default Config;

risolto.

Sto usando "@ google-cloud / translate": "^ 5.1.4" e ho cercato di risolvere questo problema, fino a quando non ho provato questo:

Ho aperto il file google-gax \ build \ src \ operationsClient.js e modificato

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

per

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

che ha risolto l'errore

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

Spero che aiuti qualcuno

Nel mio caso, era dovuto a un collegamento sym interrotto quando si tenta di npm collegare una libreria angolare personalizzata all'app consumante. Dopo aver eseguito npm link @ authoring / canvas

`` "@ authoring / canvas": "percorso / to / ui-authoring-canvas / dist" ``

Sembra che tutto sia andato bene ma il modulo non è stato ancora trovato:

Quando ho corretto l'istruzione import a qualcosa che l'editor ha trovato Link:

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

Ho ricevuto questo che è menzionato nel thread di overflow:

Per risolvere questo problema ho dovuto:

1. cd /usr/local/lib/node_modules/packageName
2. cd ..
3. rm -rf packageName

4. Nella directory principale della libreria, eseguire: a. rm -rf dist b. npm run build c. cd dist d.npm link

5. Nell'app che consuma, aggiorna package.json con "nomepacchetto": "file: / percorso / in / locale / nodo_modulo / nomepacchetto" "

6. Nella directory principale dell'app che consuma eseguire npm link nome pacchetto

Nel mio caso stavo usando templateUrl non valido. Correggendo il problema risolto.

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

Nel mio caso, è dovuto a un refuso con distinzione tra maiuscole e minuscole nel percorso di importazione. Per esempio,

Dovrebbe essere:

import Dashboard from './Dashboard/dashboard';

Invece di:

import Dashboard from './Dashboard/Dashboard';