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

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

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

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

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.

J'ai changé mon entrée en

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

et cela a fonctionné.

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;

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.

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.

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.

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

export default Config;

résolu.

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

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é:

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:

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

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

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

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