Field 'browser' tidak mengandung konfigurasi alias yang valid

131

Saya sudah mulai menggunakan webpack2 (tepatnya, v2.3.2) dan setelah membuat ulang konfigurasi saya, saya terus mengalami masalah yang sepertinya tidak bisa saya selesaikan (maaf sebelumnya untuk dump jelek):

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": {
    ...
  }
}

Dalam hal browserbidang itu mengeluh tentang, dokumentasi saya sudah bisa menemukan di ini adalah: package-browser-field-spec. Ada juga dokumentasi Webpack untuk itu, tetapi tampaknya untuk memilikinya diaktifkan secara default: aliasFields: ["browser"]. Saya mencoba menambahkan browserbidang ke saya package.jsontetapi tampaknya tidak ada gunanya.

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

Untuk kelengkapan, .babelrc

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

Apa yang saya lakukan salah / hilang?

Matthew Herbst
sumber

Jawaban:

102

Ternyata menjadi masalah dengan Webpack tidak menyelesaikan impor - bicara tentang pesan kesalahan mengerikan yang mengerikan :(

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

// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
Matthew Herbst
sumber
1
Apakah masalah disebabkan oleh npm? Hari ini saya meningkatkan modul menggunakan npm, dengan menghapus dan menginstal versi terbaru dari modul, Sekarang saya mendapatkan kesalahan ini dan kesalahan memberitahu untuk mengubah lokasi relatif dari modul, tetapi daftar file agak tinggi, apa yang menyebabkan semua file ini mengubah posisi relatifnya?
DEEPAN KUMAR
2
Ini juga menyelamatkanku. Ini agak kontra intuitif bahwa dalam file sass Anda dapat mengimpor dengan 'folder' tetapi dalam file .js Anda perlu melakukannya seperti './folder'. Juga tanpa --display-error-detail tidak ada pesan kesalahan apa pun, hanya crash
CoolGoose
1
Terima kasih banyak. Anda menghemat hari saya.
Jaroslaw K.
6
@Matthew Herbst salah satu pesan kesalahan paling bodoh :) pantat saya disimpan, thx!
Dmitry Senkovich
5
Ini gila.
coolboyjules
15

Saya sedang membangun penyaji sisi server Bereaksi dan menemukan ini juga dapat terjadi ketika membangun konfigurasi server terpisah dari awal. Jika Anda melihat kesalahan ini, coba yang berikut ini:

  1. Pastikan nilai "entri" Anda ditelusuri dengan benar relatif terhadap nilai "konteks" Anda. Milik saya tidak ada sebelumnya "./" sebelum nama file entri.
  2. Pastikan Anda memasukkan nilai "tekad" Anda. Impor Anda pada apa pun di node_modules akan default untuk mencari di folder "konteks" Anda, jika tidak.

Contoh:

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
sumber
11

Saya memiliki masalah yang sama, tetapi milik saya karena casing yang salah di jalur:

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

// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component
Baltzar Mattson
sumber
1
Ini juga masalah saya. Namun, itu bekerja dengan baik pada laptop Windows saya, tetapi gagal di server, yang merupakan Linux.
Matt M
4

Dalam kasus saya ini adalah paket yang diinstal sebagai dependensi package.jsondengan jalur relatif seperti ini:

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

dan diimpor js/app.jsdenganimport "phoenix_html"

Ini berhasil tetapi setelah pembaruan node, npm, dll ... gagal dengan pesan kesalahan di atas.

Mengubah jalur impor untuk import "../../deps/phoenix_html"memperbaikinya.

TNT
sumber
Oh tidak, mengapa Webpack sangat tidak intuitif dalam hal ini, pikiran Anda? Saya juga memiliki ketergantungan lokal.
vintproykt
4

Mengubah entri saya menjadi

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

dan itu berhasil.

Abraham Jagadeesh
sumber
3

Dalam kasus saya, sampai akhir webpack.config.js, di mana saya harus exportsmengkonfigurasi, ada kesalahan ketik: export(harus exports), yang menyebabkan kegagalan dengan memuat webpack.config.jssama sekali.

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
sumber
3

Dalam pengalaman saya, kesalahan ini adalah karena penamaan yang tidak tepat dari alias di Webpack. Dalam hal itu saya memiliki nama samaran reduxdan webpack mencoba mencari reduxyang datang dengan paket redux di jalur alias saya.

Untuk memperbaikinya, saya harus mengganti nama alias menjadi sesuatu yang berbeda Redux.

codejockie
sumber
2

Bagi siapa pun yang membangun aplikasi ion dan mencoba mengunggahnya. Pastikan Anda menambahkan setidaknya satu platform ke aplikasi. Kalau tidak, Anda akan mendapatkan kesalahan ini.

olivier
sumber
1

Untuk semua orang dengan Ionic: Memperbarui ke versi @ ionic / app-scripts terbaru memberikan pesan kesalahan yang lebih baik.

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

Itu jalur yang salah untuk styleUrls dalam komponen ke file yang tidak ada. Anehnya itu tidak memberikan kesalahan dalam pengembangan.

alex351
sumber
1

Dalam situasi saya, saya tidak memiliki ekspor di bagian bawah file webpack.config.js saya. Cukup menambahkan

export default Config;

memecahkannya.

dxhans5
sumber
0

Saya menggunakan "@ google-cloud / translate": "^ 5.1.4" dan sedang mengatasi masalah ini, sampai saya mencoba ini:

Saya membuka file google-gax \ build \ src \ operationsClient.js dan berubah

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

untuk

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

yang memecahkan kesalahan

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

Saya harap ini membantu seseorang

Abeer Sul
sumber
0

Dalam kasus saya, itu disebabkan oleh tautan sym yang rusak ketika mencoba npm menautkan pustaka sudut kustom ke aplikasi yang mengkonsumsi. Setelah menjalankan npm link @ authoring / canvas

`` `" @ authoring / canvas ":" path / ke / ui-authoring-canvas / dist "` `

Tampaknya semuanya baik-baik saja tetapi modulnya masih tidak dapat ditemukan:

Kesalahan dari tautan npm

Ketika saya mengoreksi pernyataan impor ke sesuatu yang editor dapat menemukan Tautan:

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

Saya menerima ini yang disebutkan di utas limpahan:

Field Browser tidak mengandung konfigurasi alias yang valid

Untuk memperbaikinya saya harus:

  1. cd /usr/local/lib/node_modules/packageName
  2. cd ..
  3. rm -rf packageName
  4. Di direktori root perpustakaan, jalankan: a. rm -rf dist b. npm run build c. cd dist d.npm link

  5. Di aplikasi yang mengkonsumsi, perbarui package.json dengan "packageName": "file: / path / ke / local / node_module / packageName" "

  6. Di direktori root aplikasi yang dikonsumsi jalankan npm link packageName

Sankofa
sumber
0

Dalam kasus saya, saya menggunakan templateUrl yang tidak valid. Dengan memperbaikinya masalah diselesaikan.

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

Dalam kasus saya, ini disebabkan oleh salah ketik sensitifitas pada jalur impor. Sebagai contoh,

Seharusnya:

import Dashboard from './Dashboard/dashboard';

Dari pada:

import Dashboard from './Dashboard/Dashboard';
wththeng
sumber