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

131

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?

Matthew Herbst
fonte

Respostas:

101

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';
Matthew Herbst
fonte
1
O problema é causado pelo npm? Hoje, atualizei um módulo usando o npm, desinstalando e instalando uma versão mais recente do módulo. Agora, recebi esse erro e o erro diz para alterar a localização relativa do módulo, mas a lista de arquivos é um pouco alta, o que levou a todos esses arquivos. mudar sua posição relativa?
Deepan KUMAR
2
Isso também salvou minha bunda. É um tanto contra-intuitivo que nos arquivos sass você possa importar com 'folder', mas nos arquivos .js você precise fazê-lo como './folder'. Também sem --display-error-detalhes há mensagem de erro NO modo que nunca, ele apenas deixa de funcionar
CoolGoose
1
Muito obrigado. Você salva meu dia.
Jaroslaw K.
6
@ Matthew Herbst uma das mensagens de erro mais estúpidas :) minha bunda está salva, thx!
Dmitry Senkovich
5
Isso é uma loucura.
Coolboyjules
15

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

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
Baltzar Mattson
fonte
1
Este foi o meu problema também. No entanto, funcionou bem no meu laptop Windows, mas falhou no servidor, que era o Linux.
Matt M
4

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.

TNT
fonte
Ah, não, por que o Webpack é tão pouco intuitivo nisso, seus pensamentos? Eu também tenho dependência local.
vintproykt
4

Alterei minha entrada para

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

e funcionou.

Abraham Jagadeesh
fonte
3

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;
Leon
fonte
3

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.

codejockie
fonte
2

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.

olivier
fonte
1

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.

alex351
fonte
1

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.

dxhans5
fonte
0

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

Abeer Sul
fonte
0

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:

Erro no link npm

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:

O Navegador de Campo não contém uma configuração de alias válida

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

Sankofa
fonte
0

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

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

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