O campo 'browser' não contém uma configuração de alias válida

Comecei a usar o webpack2 (para ser mais preciso v2.3.2) e, depois de recriar minha configuração, continuo com um problema que parece que não consigo 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": {
    ...
  }
}

Em termos do browsercampo que está reclamando, a documentação que eu fui capaz de encontrar sobre isso é: package-browser-field-spec. Existe também documentação Webpack para ele, mas parece tê-lo ativado por padrão: aliasFields: ["browser"]. Tentei adicionar um browsercampo ao meu, package.jsonmas isso não pareceu fazer nenhum bem.

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
}

O que estou fazendo de errado / faltando?

Acabou sendo um problema com o Webpack simplesmente não resolvendo uma importação - fale sobre mensagens de erro horríveis :(

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

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

Estou criando um renderizador do lado do servidor React e descobri que isso também pode ocorrer ao criar uma configuração de servidor separada do zero. Se você estiver vendo esse erro, tente o seguinte:

1. Verifique se o valor da "entrada" está corretamente direcionado em relação ao valor do "contexto". O meu estava faltando o "./" anterior ao nome do arquivo de entrada.
2. Verifique se você incluiu o valor "resolver". Suas importações em qualquer coisa em node_modules serão padronizadas para procurar na pasta "context", caso contrário.

Exemplo:

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

Eu tive o mesmo problema, mas o meu foi por causa de um revestimento errado no caminho:

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

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

No meu caso, era um pacote que foi instalado como uma dependência package.jsoncom um caminho relativo como este:

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

e importado js/app.jscomimport "phoenix_html"

Isso funcionou, mas após uma atualização do nó, npm, etc ..., falhou com a mensagem de erro acima.

Alterando a linha de importação para import "../../deps/phoenix_html"corrigi-la.

Alterei minha entrada para

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

e funcionou.

No meu caso, até o final do webpack.config.js, onde eu deveria exportsa configuração, houve um erro de digitação: export(deveria ser exports), o que levou à falha no carregamento 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;

Na minha experiência, esse erro foi resultado de uma nomeação imprópria de alias no Webpack. Na medida em que eu tinha um alias chamado reduxe o webpack tentou procurar o reduxque acompanha o pacote redux no meu caminho de alias.

Para corrigir isso, tive que renomear o alias para algo diferente Redux.

Para qualquer pessoa que esteja criando um aplicativo iônico e tentando enviá-lo. Certifique-se de adicionar pelo menos uma plataforma ao aplicativo. Caso contrário, você receberá esse erro.

Para todos com Ionic: A atualização para a versão mais recente do @ ionic / app-scripts deu uma mensagem de erro melhor.

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

Era um caminho errado para styleUrls em um componente para um arquivo não existente. Estranhamente, não deu erro no desenvolvimento.

Na minha situação, não tive uma exportação na parte inferior do meu arquivo webpack.config.js. Simplesmente adicionando

export default Config;

Resolvi-o.

Estou usando "@ google-cloud / translate": "^ 5.1.4" e estava lutando com esse problema, até tentar:

Abri o arquivo google-gax \ build \ src \ operationsClient.js e alterei

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

para

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

que resolveu o erro

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

Eu espero que isso ajude alguém

No meu caso, isso ocorreu devido a um link sym quebrado ao tentar vincular uma biblioteca angular personalizada a um aplicativo consumidor. Depois de executar o link npm @ authoring / canvas

`` "" @ authoring / canvas ":" caminho / para / ui-authoring-canvas / dist "` `

Parece que tudo estava bem, mas o módulo ainda não foi encontrado:

Quando corrigi a declaração de importação para algo que o editor pôde encontrar Link:

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

Eu recebi isso, que é mencionado no thread de estouro:

Para consertar isso, tive que:

1. cd /usr/local/lib/node_modules/packageName
2. cd ..
3. rm -rf packageName

4. No diretório raiz da biblioteca, execute: a. rm -rf dist b. npm run build c. cd dist d.npm link

5. No aplicativo consumidor, atualize o package.json com "packageName": "file: / path / to / local / node_module / packageName" "

6. No diretório raiz do aplicativo consumidor, execute o link npm packageName

No meu caso, eu estava usando templateUrl.By inválido, corrigindo-o problema resolvido.

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

No meu caso, é devido a um erro de digitação com distinção entre maiúsculas e minúsculas no caminho de importação. Por exemplo,

Deveria estar:

import Dashboard from './Dashboard/dashboard';

Ao invés de:

import Dashboard from './Dashboard/Dashboard';