npm - El campo ''navegador'' no contiene una configuración de alias válida

webpack commonjs

Question

Comencé a usar webpack2 (para ser precisos, v2.3.2 ) y después de volver a crear mi configuración, v2.3.2 un problema que parece que no puedo resolver.

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 términos del campo del browser que se queja, la documentación que he podido encontrar sobre esto es: package-browser-field-spec . También hay documentación del paquete web, pero parece tenerlo activado de forma predeterminada: aliasFields: ["browser"] . Intenté agregar un campo de browser a mi package.json pero eso no pareció hacer nada bueno.

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

Para completar, .babelrc

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

¿Qué estoy haciendo mal / falta?

Answer 1

Cambié mi entrada a

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

Y funcionó.

Answer 2

En mi caso, era un paquete que se instaló como una dependencia en package.json con una ruta relativa como esta:

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

e importado en js/app.js con la import "phoenix_html"

Esto había funcionado pero después de una actualización de nodo, npm, etc., falló con el mensaje de error anterior.

Cambiando la línea de import "../../deps/phoenix_html" para import "../../deps/phoenix_html" arregló.

Answer 3

En mi caso, hasta el final de webpack.config.js , donde debería exports la configuración, había un error tipográfico: export (debería ser exports ), lo que provocó un error al cargar webpack.config.js .

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;

Answer 4

En mi experiencia, este error fue el resultado de un nombre incorrecto de alias en Webpack. En eso tenía un alias llamado redux y el paquete web intentó buscar el redux que viene con el paquete redux en mi ruta de alias.

Para solucionar esto, tuve que cambiar el nombre del alias a algo diferente como Redux .

Answer 5

En mi situación, no tenía una exportación al final de mi archivo webpack.config.js. Simplemente agregando

export default Config;

resuelto.

Answer 6

Estoy construyendo un renderizador del lado del servidor React y descubrí que esto también puede ocurrir cuando se crea una configuración de servidor separada desde cero. Si ve este error, intente lo siguiente:

1. Asegúrese de que su valor de "entrada" esté correctamente asociado a su valor de "contexto". Al mío le faltaba el precedente "./" antes del nombre del archivo de entrada.
2. Asegúrese de incluir su valor de "resolución". De lo contrario, sus importaciones en cualquier cosa en node_modules se buscarán en su carpeta "context".

Ejemplo:

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 7

Para cualquiera que esté construyendo una aplicación iónica e intentando subirla. Asegúrese de agregar al menos una plataforma a la aplicación. De lo contrario, obtendrá este error.

Answer 8

Para todos con Ionic: la actualización a la última versión de @ ionic / app-scripts dio un mejor mensaje de error.

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

Era una ruta incorrecta para styleUrls en un componente a un archivo no existente. Curiosamente no dio error en el desarrollo.

Answer 9

Resultó ser un problema con Webpack simplemente no resolver una importación - hablar de horribles mensajes de error horribles :(

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

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

Answer 10

Tuve el mismo problema, pero el mío se debió a una carcasa incorrecta en la ruta:

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

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