web-dev-qa-db-fra.com

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

J'ai commencé à utiliser webpack2 (pour être précis, _v2.3.2_) et après avoir recréé ma configuration, je rencontre toujours un problème que je n'arrive pas à résoudre, mais je suis désolé (désolé d'avance pour le laid vidage):

_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 champ browser dont il se plaint, la documentation que j'ai pu trouver à ce sujet est la suivante: package-browser-field-spec . Il existe également une documentation webpack pour cela, mais il semble l'avoir activée par défaut: aliasFields: ["browser"] . J'ai essayé d'ajouter un champ browser à mon _package.json_ mais cela ne semblait pas être utile.

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

Pour être complet, _.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?

npmwebpackcommonjswebpack-2package.json
106
Matthew Herbst

Il s’est avéré que le problème avec Webpack ne résout tout simplement pas la question d’une importation - parlez de messages d’horreur horribles :(

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

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

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 rien. Si vous voyez cette erreur, essayez ce qui suit:

  1. Assurez-vous que votre valeur "entry" est correctement cheminée par rapport à votre valeur "context". Le mien manquait le "./" précédent avant le nom du fichier d’entrée.
  2. Assurez-vous que votre valeur de "résolution" est incluse. Vos importations sur n'importe quel élément de node_modules seront examinées par défaut 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')
    ]
}
};
10
Artif3x

J'avais 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
6
Baltzar Mattson

Changé mon entrée à

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

et cela a fonctionné.

4
Abraham Jagadeesh

Dans mon cas, à la toute fin du webpack.config.js, où je devrais exports la config, il y avait une faute de frappe: export (devrait être exports), ce qui a conduit à Échec du chargement de webpack.config.js du 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;
3
Leon

D'après mon expérience, cette erreur était due à une mauvaise désignation des alias dans Webpack. En cela, j'avais un alias nommé redux et Webpack a essayé de rechercher le redux fourni avec le paquetage 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.

2
John Kennedy

Pour tous ceux qui construisent une application ionic et essaient de la télécharger. Assurez-vous que vous avez ajouté au moins une plate-forme à l'application. Sinon, vous obtiendrez cette erreur.

2
olivier

Dans mon cas, c’était un paquet installé en tant que dépendance dans package.json avec un chemin relatif comme celui-ci:

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

et importé dans js/app.js avec import "phoenix_html"

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

Changer la ligne d'importation en import "../../deps/phoenix_html" l'a corrigé.

2
TNT

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

export default Config;

résolu.

1
dxhans5

Pour tout le monde avec Ionic: La mise à jour vers la dernière version de @ ionic/app-scripts donnait un meilleur message d'erreur.

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

C'était un mauvais chemin pour styleUrls dans un composant vers un fichier non existant. Étrangement, cela n’a donné aucune erreur de développement.

1
alex351