Le champ 'navigateur' ne contient pas de configuration d'alias valide

131

J'ai commencé à utiliser webpack2 (pour être précis, v2.3.2) et après avoir recréé ma configuration, je continue à rencontrer un problème que je n'arrive pas à résoudre, je reçois (désolé à l'avance pour le vidage laid):

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

En ce qui concerne le browserterrain , il se plaint de la documentation que je suis en mesure de trouver sur ce point est: package-browser-field-spec. Il y a aussi la documentation webpack pour elle, mais il semble avoir activé par défaut: aliasFields: ["browser"]. J'ai essayé d'ajouter un browserchamp à mon package.jsonmais cela ne semblait pas faire de bien.

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

export default function() { ... }

Par souci d'exhaustivité, .babelrc

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

Qu'est-ce que je fais mal / manque?

Matthew Herbst
la source

Réponses:

102

S'est avéré être un problème avec Webpack qui ne résout tout simplement pas une importation - parlez d'horribles messages d'erreur horribles :(

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

// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
Matthew Herbst
la source
1
Le problème est-il causé par npm? Aujourd'hui, j'ai mis à niveau un module à l'aide de npm, en désinstallant et en installant une dernière version du module, maintenant j'ai cette erreur et l'erreur indique de changer l'emplacement relatif du module, mais la liste des fichiers est un peu élevée, ce qui a causé tous ces fichiers à changer sa position relative?
DEEPAN KUMAR
2
Cela a aussi sauvé mon cul. C'est un peu contre-intuitif que dans les fichiers sass vous pouvez importer avec 'dossier' mais dans les fichiers .js, vous devez le faire comme './folder'. Aussi sans --display-error-details il n'y a AUCUN message d'erreur quoi que ce soit, il se bloque juste
CoolGoose
1
Merci beaucoup. Vous sauvez ma journée.
Jaroslaw K.
6
@Matthew Herbst l'un des messages d'erreur les plus stupides :) mon cul est sauvé, merci!
Dmitry Senkovich
5
C'est insensé.
coolboyjules
15

Je construis un moteur de rendu côté serveur React et j'ai constaté que cela pouvait également se produire lors de la création d'une configuration de serveur distincte à partir de zéro. Si vous voyez cette erreur, essayez ce qui suit:

  1. Assurez-vous que votre valeur «entrée» est correctement cheminée par rapport à votre valeur «contexte». Le mien manquait le "./" précédant le nom du fichier d'entrée.
  2. Assurez-vous que votre valeur de «résolution» est incluse. Vos importations sur tout ce qui se trouve dans node_modules seront par défaut à la recherche dans votre dossier "context", sinon.

Exemple:

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
la source
11

J'ai eu le même problème, mais le mien était dû à un mauvais boîtier dans le chemin:

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

// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component
Baltzar Mattson
la source
1
C'était aussi mon problème. Cependant, cela a bien fonctionné sur mon ordinateur portable Windows, mais a échoué sur le serveur, qui était Linux.
Matt M
4

Dans mon cas, c'était un package qui a été installé en tant que dépendance package.jsonavec un chemin relatif comme celui-ci:

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

et importé js/app.jsavecimport "phoenix_html"

Cela avait fonctionné mais après une mise à jour de node, npm, etc ... cela a échoué avec le message d'erreur ci-dessus.

Modification de la ligne d'importation pour la import "../../deps/phoenix_html"corriger.

TNT
la source
Oh non, pourquoi Webpack est si peu intuitif à cela, vos pensées? J'ai aussi une dépendance locale.
vintproykt le
4

J'ai changé mon entrée en

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

et cela a fonctionné.

Abraham Jagadeesh
la source
3

Dans mon cas, jusqu'à la toute fin de la webpack.config.js, où je devrais exportsla config, il y avait une faute de frappe: export(devrait être exports), qui a conduit à un échec de chargement webpack.config.jsdu tout.

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;
Léon
la source
3

D'après mon expérience, cette erreur était due à une dénomination incorrecte des alias dans Webpack. En cela, j'avais un alias nommé reduxet webpack a essayé de rechercher le reduxqui vient avec le package redux dans mon chemin d'alias.

Pour résoudre ce problème, j'ai dû renommer l'alias en quelque chose de différent comme Redux.

codejockie
la source
2

Pour tous ceux qui créent une application ionique et essaient de la télécharger. Assurez-vous d'avoir ajouté au moins une plate-forme à l'application. Sinon, vous obtiendrez cette erreur.

Olivier
la source
1

Pour tous les utilisateurs d'Ionic: la mise à jour vers la dernière version de @ ionic / app-scripts a donné un meilleur message d'erreur.

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

Ce n'était pas le bon chemin pour styleUrls dans un composant vers un fichier inexistant. Curieusement, cela n'a donné aucune erreur de développement.

alex351
la source
1

Dans ma situation, je n'avais pas d'export en bas de mon fichier webpack.config.js. Ajouter simplement

export default Config;

résolu.

dxhans5
la source
0

J'utilise "@ google-cloud / translate": "^ 5.1.4" et j'étais aux prises avec ce problème, jusqu'à ce que j'essaye ceci:

J'ai ouvert le fichier google-gax \ build \ src \ operationsClient.js et j'ai changé

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

à

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

qui a résolu l'erreur

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

J'espère que ça aide quelqu'un

Abeer Sul
la source
0

Dans mon cas, cela était dû à un lien symbolique cassé lors de la tentative de lier npm une bibliothèque angulaire personnalisée à une application consommatrice. Après avoir exécuté npm link @ authoring / canvas

`` `" @ authoring / canvas ":" chemin / vers / ui-authoring-canvas / dist "` `

Il semble que tout allait bien mais le module n'a toujours pas été trouvé:

Erreur du lien npm

Lorsque j'ai corrigé l'instruction d'importation en quelque chose que l'éditeur pouvait trouver Link:

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

J'ai reçu ceci qui est mentionné dans le fil de débordement:

Le navigateur de champs ne contient pas de configuration d'alias valide

Pour résoudre ce problème, je devais:

  1. cd /usr/local/lib/node_modules/packageName
  2. cd ..
  3. rm -rf packageName
  4. Dans le répertoire racine de la bibliothèque, exécutez: a. rm -rf dist b. npm run build c. cd dist ré.npm link

  5. Dans l'application consommatrice, mettez à jour le package.json avec "packageName": "file: / chemin / vers / local / node_module / packageName" "

  6. Dans le répertoire racine de l'application consommatrice, exécutez npm link packageName

Sankofa
la source
0

Dans mon cas, j'utilisais templateUrl invalide.En le corrigeant, le problème a été résolu.

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

Dans mon cas, cela est dû à une faute de frappe dans le chemin d'importation. Par exemple,

Devrait être:

import Dashboard from './Dashboard/dashboard';

Au lieu de:

import Dashboard from './Dashboard/Dashboard';
wltheng
la source