Bidang 'browser' doesn't mengandung valid alias konfigurasi

I've mulai menggunakan webpack2 (tepatnya, v2.3.2) dan setelah kembali membuat saya config aku terus berlari ke dalam masalah yang saya dapat't tampaknya untuk memecahkan saya dapatkan (maaf sebelumnya untuk sampah 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]

paket.json

{
  "version": "1.0.0",
  "main": "./src/main.js",
  "scripts": {
    "build": "webpack --progress --display-error-details"
  },
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

Dalam hal browser di bidang it's mengeluh tentang, dokumentasi saya've telah mampu menemukan ini adalah: paket-browser-bidang-spec. Ada juga webpack dokumentasi untuk itu, tapi itu tampaknya telah diaktifkan secara default: aliasFields: ["browser"]. Saya mencoba menambahkan browser lapangan untuk saya paket.json tapi itu tidak't tampaknya untuk melakukan apapun yang baik.

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/komponen/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?

John Kennedy
Pertanyaan edit 18 Juli 2019 в 2:40
Pemrograman
webpack npm webpack-2 package.json commonjs
27 Maret 2017 в 3:40
61 tayangan
Larutan

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

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

// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
Matthew Herbst
Jawaban edit 20 Desember 2017 в 7:50
Komentar (7)

I'm bangunan yang Bereaksi server-side penyaji dan menyenangkan ini juga dapat terjadi ketika membangun sebuah server terpisah konfigurasi dari awal. Jika anda're melihat kesalahan ini, cobalah hal berikut:

  1. Pastikan anda "masuk" nilai adalah benar mulai dirintis relatif untuk anda "konteks" nilai. Punyaku hilang sebelumnya "./" sebelum masuknya nama file.
  2. Pastikan anda memiliki anda "mengatasi" nilai disertakan. Impor anda pada apa pun di node_modules akan default untuk melihat dalam "konteks" folder, 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
Jawaban edit 9 Oktober 2017 в 3:39
Komentar (0)

Saya memiliki masalah yang sama, tapi saya adalah karena salah casing di path:

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

// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component
Komentar (1)

Mengubah entri saya untuk 

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

dan itu bekerja.

Komentar (0)

Dalam kasus saya, sampai akhir webpack.config.js, di mana saya harus ekspor config, ada typo: ekspor(harus ekspor), yang menyebabkan kegagalan dengan loading webpack.config.js sama 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;
Komentar (0)

Dalam kasus saya itu adalah paket yang telah diinstal sebagai ketergantungan dalam paket.json dengan path relatif seperti ini:

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

dan diimpor dalam js/app.js dengan impor "phoenix_html"

Ini telah bekerja tapi setelah update dari node, npm, dll... itu gagal dengan kesalahan di atas-pesan.

Mengubah jalur impor untuk impor "../../deps/phoenix_html" tetap itu.

Komentar (0)

Bagi siapa saja yang membangun sebuah aplikasi ionic dan mencoba untuk meng-upload. Pastikan anda menambahkan setidaknya satu platform untuk aplikasi. Jika tidak, anda akan mendapatkan kesalahan ini.

Komentar (0)

Dalam pengalaman saya, kesalahan ini sebagai akibat dari penamaan yang tidak tepat alias di Webpack. Yang saya punya yang bernama alias redux dan webpack mencoba mencari redux yang datang dengan redux paket saya alias jalan.

Untuk memperbaiki ini, saya harus mengubah nama alias untuk sesuatu yang berbeda seperti Redux.

Komentar (0)

Untuk semua orang dengan Ion: Update ke terbaru @ionik/aplikasi-script versi memberikan pesan kesalahan yang lebih baik.

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

Itu adalah jalan yang salah untuk styleUrls dalam komponen non-file yang ada. Anehnya tidak ada kesalahan dalam pembangunan.

Komentar (0)

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

export default Config;

soal hal itu.

Komentar (0)

Dalam kasus saya, itu adalah karena kasus-sensitivitas typo di impor jalan. Misalnya,

Harus: impor Dashboard dari './Dashboard/dasbor'; Bukannya: impor Dashboard dari './Dashboard/Dasbor';

wltheng
Jawaban edit 10 Oktober 2019 в 2:06
Komentar (0)