Field 'browser' tidak mengandung konfigurasi alias yang valid

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?

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

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

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

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.

Mengubah entri saya menjadi

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

dan itu berhasil.

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;

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.

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.

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.

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

export default Config;

memecahkannya.

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

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:

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:

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

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

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

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