"Tarayıcı" alanı, geçerli bir takma ad yapılandırması içermiyor

Webpack2 kullanmaya başladım (kesin olmak gerekirse v2.3.2) ve yapılandırmamı yeniden oluşturduktan sonra çözemediğim bir sorunla karşılaşmaya devam ediyorum (çirkin döküm için şimdiden özür dilerim):

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

Açısından browseralanında yaklaşık şikayetçi, bu konuda bulmak mümkün oldum belgeseli: package-browser-field-spec. Orada bunun için webpack belgeler de, ama buna varsayılan olarak açık var gibi görünüyor: aliasFields: ["browser"]. Benim browseralanıma bir alan eklemeyi denedim package.jsonama bu hiç işe yaramadı.

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 / bileşenleri / DoISuportIt / index.jsx

export default function() { ... }

Tamamlamak için, .babelrc

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

Neyi yanlış / eksik yapıyorum?

Webpack ile ilgili bir içeri aktarmayı çözmeyen bir sorun olduğu ortaya çıktı - korkunç korkunç hata mesajlarından bahsedin :(

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

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

Bir React sunucu tarafı oluşturucusu oluşturuyorum ve bunun sıfırdan ayrı bir sunucu yapılandırması oluştururken de meydana gelebileceğini gördüm. Bu hatayı görüyorsanız, şunu deneyin:

1. "Giriş" değerinizin "bağlam" değerinize göre doğru şekilde yönlendirildiğinden emin olun. Benimkinde, giriş dosyası adından önceki "./" eksikti.
2. "Kararlılık" değerinizin dahil edildiğinden emin olun. Node_modules içindeki herhangi bir şeye aktarımınız varsayılan olarak "bağlam" klasörünüze bakacaktır, aksi takdirde.

Misal:

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

Ben de aynı sorunu yaşadım, ama benimki yoldaki yanlış kasadan kaynaklanıyordu:

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

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

Benim durumumda, aşağıdaki package.jsongibi göreceli bir yola bağımlılık olarak kurulan bir paketti :

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

ve ithal js/app.jsileimport "phoenix_html"

Bu işe yaradı ancak düğüm, npm vb. Güncellemeden sonra yukarıdaki hata mesajıyla başarısız oldu.

İçe aktarma satırını düzeltmek için değiştirmek import "../../deps/phoenix_html".

Girişimi olarak değiştirdim

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

ve işe yaradı.

Benim durumumda, en sonunda , yapılandırmam webpack.config.jsgereken exportsyerde, bir yazım hatası vardı: export(olmalı exports), bu da yükleme ile ilgili hataya yol açtı 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;

Deneyimlerime göre, bu hata Webpack'teki takma adların yanlış adlandırılmasının bir sonucuydu. reduxBunda bir takma adım vardı ve webpack , takma ad yolumdaki reduxredux paketiyle birlikte gelenleri aramayı denedi .

Bunu düzeltmek için, takma adı gibi farklı bir adla yeniden adlandırmak zorunda kaldım Redux.

İyonik bir uygulama geliştiren ve onu yüklemeye çalışan herkes için. Uygulamaya en az bir platform eklediğinizden emin olun. Aksi takdirde bu hatayı alırsınız.

Ionic'e sahip herkes için: En son @ ionic / app-scripts sürümüne güncelleme yapmak daha iyi bir hata mesajı verdi.

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

Mevcut olmayan bir dosyaya giden bir bileşendeki styleUrls için yanlış bir yoldur. Garip bir şekilde geliştirmede hiçbir hata vermedi.

Benim durumumda, webpack.config.js dosyamın altında bir dışa aktarım yoktu. Basitçe eklemek

export default Config;

çözüldü.

"@ Google-cloud / translate": "^ 5.1.4" kullanıyorum ve şunu deneyene kadar bu sorunla uğraşıyordum:

Google-gax \ build \ src \ operationClient.js dosyasını açtım ve değiştirdim

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

için

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

hatayı çözen

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

Umarım birine yardımcı olur

Benim durumumda, npm özel bir açısal kitaplığı tüketen uygulamaya bağlamaya çalışırken oluşan bozuk bir sym bağlantısından kaynaklanıyordu. Npm link @ Authoring / canvas çalıştırıldıktan sonra

`` "" @ authoring / canvas ":" yol / to / ui-authoring-canvas / dist "''

Görünüşe göre her şey yolundaydı, ancak modül hala bulunamadı:

Import ifadesini editörün Link'i bulabileceği bir şeye düzelttiğimde:

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

Taşma başlığında bahsedilen bunu aldım:

Bunu düzeltmek için yapmam gerekiyordu:

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

4. Kitaplığın kök dizininde şunu çalıştırın: a. rm -rf dist b. npm run build c. cd dist d.npm link

5. Tüketen uygulamada, package.json dosyasını "packageName": "file: / path / to / local / node_module / packageName" "ile güncelleyin.

6. Tüketen uygulamanın kök dizininde npm link packageName çalıştırın

Benim durumumda geçersiz templateUrl kullanıyordum. Düzelterek problem çözüldü.

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

Benim durumumda, içe aktarma yolundaki büyük / küçük harf duyarlılığından kaynaklanıyor. Örneğin,

Olmalı:

import Dashboard from './Dashboard/dashboard';

Onun yerine:

import Dashboard from './Dashboard/Dashboard';