फ़ील्ड 'ब्राउज़र' में एक मान्य उपनाम विन्यास नहीं है

Question

मैंने वेबपैक 2 (सटीक होने के लिए v2.3.2) का उपयोग करना शुरू कर दिया है और अपने कॉन्फिग को फिर से बनाने के बाद मैं एक ऐसे मुद्दे पर चल रहा हूं, जिसे मैं हल करने के लिए प्रतीत नहीं कर सकता (क्षमा करें अग्रिम में बदसूरत डंप के लिए)

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

जिस browserक्षेत्र के बारे में यह शिकायत कर रहा है, उसके संदर्भ में, मैं इस पर पाया गया दस्तावेज़ है package-browser-field-spec:। इसके लिए वेबपैक प्रलेखन भी है, लेकिन ऐसा लगता है कि यह डिफ़ॉल्ट रूप से चालू हो गया है aliasFields: ["browser"]:। मैंने browserअपने लिए एक फ़ील्ड जोड़ने की कोशिश की, package.jsonलेकिन वह कोई अच्छा काम नहीं कर पाया।

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 / घटकों / DoISuportIt / index.jsx

export default function() { ... }

संपूर्णता के लिए, .babelrc

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

मैं क्या गलत कर रहा हूं / गायब हूं?

Answer 1

वेबपैक के साथ एक मुद्दा बन गया है जो सिर्फ एक आयात को हल नहीं कर रहा है - भयानक भयानक त्रुटि संदेशों के बारे में बात करें :(

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

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

Comments

क्या समस्या npm के कारण है? आज मैंने npm का उपयोग करके एक मॉड्यूल को उन्नत किया, मॉड्यूल के नवीनतम संस्करण की स्थापना और स्थापना करके, अब मुझे यह त्रुटि मिली और त्रुटि मॉड्यूल के सापेक्ष स्थान को बदलने के लिए कहती है, लेकिन फाइलों की सूची थोड़ी अधिक है, इन सभी फ़ाइलों के कारण क्या हुआ इसकी सापेक्ष स्थिति बदलें?

— डेपन कुमार

इससे मेरी गांड भी बच गई। यह कुछ हद तक सहज है कि sass फ़ाइलों में आप 'फोल्डर' के साथ आयात कर सकते हैं, लेकिन .js फाइलों में आपको इसे './folder' करने की आवश्यकता होती है। इसके अलावा --display-error-details के बिना कोई त्रुटि संदेश नहीं है तो कभी भी, यह बस दुर्घटनाग्रस्त हो जाता है

— CoolGoose

बहुत बहुत धन्यवाद। तुम मेरा दिन बचाओ।

— जारोस्लाव के।

@ मैथ्यू हर्बस्ट एक बेवकूफ त्रुटि संदेशों में से एक :) मेरी गांड बच गई है, thx!

— दिमित्री सेनकोविच

यह पागल है।

— कूलबॉयज

Answer 2

मैं एक रिएक्ट सर्वर-साइड रेंडर बना रहा हूं और पाया गया कि स्क्रैच से अलग सर्वर कॉन्फिगरेशन बनाते समय यह भी हो सकता है। यदि आप इस त्रुटि को देख रहे हैं, तो निम्न प्रयास करें:

1. सुनिश्चित करें कि आपकी "प्रविष्टि" मान आपके "संदर्भ" मूल्य के सापेक्ष ठीक से निर्धारित है। प्रविष्टि फ़ाइल नाम से पहले मेरा पूर्ववर्ती "./" गायब था।
2. सुनिश्चित करें कि आपके पास "संकल्प" मूल्य शामिल है। नोड_मॉड्यूल में किसी भी चीज पर आपका आयात आपके "संदर्भ" फ़ोल्डर में देखने के लिए डिफ़ॉल्ट होगा, अन्यथा।

उदाहरण:

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

Answer 3

मेरे पास एक ही मुद्दा था, लेकिन मेरा मार्ग में गलत आवरण के कारण था:

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

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

Comments

यह मेरा मुद्दा भी था। हालाँकि, इसने मेरे विंडोज लैपटॉप पर ठीक काम किया, लेकिन सर्वर पर असफल रहा, जो कि लिनक्स था।

— मैट एम

Answer 4

मेरे मामले में यह एक पैकेज था जिसे एक निर्भरता के रूप में package.jsonइस तरह से स्थापित किया गया था :

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

और में आयात किया js/app.jsगयाimport "phoenix_html"

यह काम किया था, लेकिन नोड, एनपीएम, आदि के अपडेट के बाद ... यह उपरोक्त त्रुटि-संदेश के साथ विफल रहा।

import "../../deps/phoenix_html"इसे ठीक करने के लिए आयात लाइन को बदलना ।

Comments

अरे नहीं, वेबपैक इस पर इतना अचूक क्यों है, आपके विचार? मेरी स्थानीय निर्भरता भी है।

— vintproykt

Answer 5

में अपना प्रवेश बदल दिया

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

और यह काम किया।

Answer 6

मेरे मामले में, के अंत में webpack.config.js, जहाँ मुझे exportsकॉन्फ़िगर करना चाहिए , एक टाइपो था: export(होना चाहिए exports), जिसके कारण लोडिंग 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;

Answer 7

मेरे अनुभव में, यह त्रुटि वेबपैक में उपनामों के अनुचित नामकरण के परिणामस्वरूप थी। इसमें मेरा नाम एक उपनाम था reduxऔर वेबपैक ने कोशिश की reduxकि मेरे उपनाम मार्ग में redux पैकेज आए।

इसे ठीक करने के लिए, मुझे उपनाम का नाम बदलकर कुछ अलग करना पड़ा Redux।

Answer 8

किसी के लिए एक ईओण ऐप का निर्माण करना और उसे अपलोड करने की कोशिश करना। सुनिश्चित करें कि आपने ऐप में कम से कम एक प्लेटफ़ॉर्म जोड़ा है। अन्यथा आपको यह त्रुटि मिलेगी।

Answer 9

Ionic वाले सभी के लिए: नवीनतम @ आयनिक / ऐप-स्क्रिप्ट संस्करण में अपडेट करने से बेहतर त्रुटि संदेश दिया गया।

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

यह एक गैर-मौजूदा फ़ाइल के लिए एक घटक में स्टाइल यूआरएल के लिए एक गलत रास्ता था। अजीब तरह से इसने विकास में कोई त्रुटि नहीं दी।

Answer 10

मेरी स्थिति में, मेरे पास मेरे webpack.config.js फ़ाइल के नीचे एक निर्यात नहीं था। बस जोड़ रहा है

export default Config;

उसे हल कर लिया।

Answer 11

मैं "@ गूगल-क्लाउड / ट्रांसलेशन" का उपयोग कर रहा हूं: "^ 5.1.4" और जब तक मैंने यह कोशिश नहीं की थी, तब तक इस मुद्दे से जूझ रहा था:

मैंने google-gax \ build \ src \ operationClient.js फ़ाइल खोली और बदल दी

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

सेवा

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

जो त्रुटि को हल किया

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

मुझे उम्मीद है कि यह किसी की मदद करता है

Answer 12

मेरे मामले में, यह एक टूटी हुई सहानुभूति लिंक के कारण था जब एक कस्टम कोणीय पुस्तकालय को ऐप उपभोग करने के लिए npm लिंक करने की कोशिश की जा रही थी। Npm लिंक चलाने के बाद @ संलेखन / कैनवास

`` `" @ संलेखन / कैनवास ":" पथ / से / उई-संलेखन-कैनवास / डिस्ट "" `

ऐसा लगता है कि सब कुछ ठीक था लेकिन मॉड्यूल अभी भी नहीं मिल सका:

जब मैंने संपादक को मिल सकने वाली चीज़ के लिए आयात विवरण को ठीक किया:

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

मुझे यह प्राप्त हुआ जो अतिप्रवाह धागे में वर्णित है:

इसे ठीक करने के लिए मुझे:

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

4. लायब्रेरी की रूट डायरेक्टरी में, चलाएँ: a। rm -rf dist ख। npm run build सी। cd dist घ।npm link

5. उपभोग करने वाले ऐप में, package.json को "packageName" से अपडेट करें: "फ़ाइल: / पाथ / टू / लोकल / नोड_मॉडल / packageName" "

6. उपभोग्य ऐप के रूट डायरेक्टरी में npm लिंक पैकेजनाम

Answer 13

मेरे मामले में मैं अमान्य टेम्पलेट का उपयोग कर रहा था।

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

Answer 14

मेरे मामले में, यह आयात पथ में केस-संवेदनशीलता टाइपो के कारण है। उदाहरण के लिए,

होना चाहिए:

import Dashboard from './Dashboard/dashboard';

के बजाय:

import Dashboard from './Dashboard/Dashboard';