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

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?

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

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

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

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.

Cambié mi entrada a

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

Y funcionó.

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;

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.

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.

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.

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

export default Config;

resuelto.

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

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:

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:

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

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

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

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