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

131

Comencé a usar webpack2 (para ser precisos v2.3.2) y después de volver a crear mi configuración, sigo teniendo 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 browsercampo que se queja, de la documentación que he podido encontrar sobre este tema es: package-browser-field-spec. También hay documentación webpack para ello, pero parece que lo tiene activado de forma predeterminada: aliasFields: ["browser"]. Intenté agregar un browsercampo a mi package.jsonpero eso no pareció hacer ningún 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 / components / DoISuportIt / index.jsx

export default function() { ... }

Por completitud, .babelrc

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

¿Qué estoy haciendo mal / falta?

Matthew Herbst
fuente

Respuestas:

102

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';
Matthew Herbst
fuente
1
¿El problema es causado por npm? Hoy actualicé un módulo usando npm, desinstalando e instalando una versión más reciente del módulo, ahora recibí este error y el error me dice que cambie la ubicación relativa del módulo, pero la lista de archivos es un poco alta, lo que causó que todos estos archivos cambiar su posición relativa?
PROFUNDA KUMAR
2
Esto también me salvó el culo. Es algo contrario a la intuición que en los archivos sass puede importar con 'carpeta' pero en archivos .js debe hacerlo como './folder'. También sin --display-error-details no hay ningún mensaje de error, simplemente se bloquea
CoolGoose
1
Muchas gracias. Me salvas el día.
Jaroslaw K.
66
@Matthew Herbst uno de los mensajes de error más estúpidos :) mi culo está guardado, gracias!
Dmitry Senkovich
55
Esto es una locura.
coolboyjules
15

Estoy construyendo un renderizador React del lado del servidor y descubrí que esto también puede ocurrir al construir 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 con respecto 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')
    ]
}
};
Artif3x
fuente
11

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
Baltzar Mattson
fuente
1
Este fue mi problema también. Sin embargo, funcionó bien en mi computadora portátil con Windows, pero falló en el servidor, que era Linux.
Matt M
4

En mi caso, fue un paquete que se instaló como una dependencia package.jsoncon una ruta relativa como esta:

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

e importado js/app.jsconimport "phoenix_html"

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

Cambiar la línea de importación para import "../../deps/phoenix_html"arreglarlo.

TNT
fuente
Oh no, ¿por qué Webpack es tan poco intuitivo en esto, tus pensamientos? También tengo dependencia local.
vintproykt
4

Cambié mi entrada a

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

Y funcionó.

Abraham Jagadeesh
fuente
3

En mi caso, hasta el final de webpack.config.js, donde debería exportsla configuración, había un error tipográfico: export(debería ser exports), lo que condujo a un error en la carga 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;
León
fuente
3

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

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

codejockie
fuente
2

Para cualquiera que esté creando 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.

olivier
fuente
1

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.

alex351
fuente
1

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

export default Config;

resuelto.

dxhans5
fuente
0

Estoy usando "@ google-cloud / translate": "^ 5.1.4" y estaba luchando con este problema, hasta que probé esto:

Abrí el archivo google-gax \ build \ src \ operationsClient.js y cambié

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

a

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

que resolvió el error

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

Espero que esto ayude a alguien

Abeer Sul
fuente
0

En mi caso, se debió a un enlace simbólico roto al intentar vincular una biblioteca angular personalizada a una aplicación consumidora. Después de ejecutar npm link @ authoring / canvas

`` `" @ authoring / canvas ":" ruta / a / ui-authoring-canvas / dist "` `

Parece que todo estaba bien, pero aún no se pudo encontrar el módulo:

Error del enlace npm

Cuando corregí la declaración de importación a algo que el editor pudo encontrar Link:

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

Recibí esto que se menciona en el hilo de desbordamiento:

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

Para solucionar esto tuve que:

  1. cd /usr/local/lib/node_modules/packageName
  2. cd ..
  3. rm -rf packageName
  4. En el directorio raíz de la biblioteca, ejecute: a. rm -rf dist si. npm run build C. cd dist re.npm link

  5. En la aplicación consumidora, actualice package.json con "packageName": "file: / path / to / local / node_module / packageName" "

  6. En el directorio raíz de la aplicación consumidora, ejecute npm link packageName

Sankofa
fuente
0

En mi caso, estaba usando templateUrl no válido. Al corregirlo, el problema se resolvió.

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

En mi caso, se debe a un error tipográfico en mayúsculas y minúsculas en la ruta de importación. Por ejemplo,

Debiera ser:

import Dashboard from './Dashboard/dashboard';

En vez de:

import Dashboard from './Dashboard/Dashboard';
wltheng
fuente