ฟิลด์ "เบราว์เซอร์" ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง

ฉันเริ่มใช้ webpack2 (เพื่อให้แม่นยำ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นอกจากนี้ยังมีเอกสาร webpack สำหรับมัน 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
}

ฉันทำอะไรผิด / พลาด?

กลายเป็นปัญหากับ Webpack แต่ไม่สามารถแก้ไขการนำเข้าได้ - พูดคุยเกี่ยวกับข้อความแสดงข้อผิดพลาดที่น่าสยดสยอง :(

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

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

ฉันกำลังสร้าง React renderer ฝั่งเซิร์ฟเวอร์และพบว่าสิ่งนี้สามารถเกิดขึ้นได้เมื่อสร้างการกำหนดค่าเซิร์ฟเวอร์แยกต่างหากตั้งแต่เริ่มต้น หากคุณเห็นข้อผิดพลาดนี้ให้ลองทำดังต่อไปนี้:

1. ตรวจสอบว่าค่า "รายการ" ของคุณได้รับการแก้ไขอย่างถูกต้องโดยสัมพันธ์กับค่า "บริบท" ของคุณ ของฉันไม่มีส่วน "./" ที่อยู่ข้างหน้าชื่อไฟล์รายการ
2. ตรวจสอบให้แน่ใจว่าคุณได้รวมค่า "แก้ไข" แล้ว การนำเข้าของคุณในทุกสิ่งใน node_modules จะเป็นค่าเริ่มต้นในการค้นหาในโฟลเดอร์ "บริบท" ของคุณมิฉะนั้น

ตัวอย่าง:

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

ฉันมีปัญหาเดียวกัน แต่ของฉันเป็นเพราะปลอกผิดเส้นทาง:

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

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

ในกรณีของฉันมันเป็นแพคเกจที่ติดตั้งเป็นการพึ่งพาpackage.jsonด้วยพา ธ สัมพัทธ์เช่นนี้:

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

และนำเข้าjs/app.jsด้วยimport "phoenix_html"

สิ่งนี้ใช้ได้ผล แต่หลังจากการอัปเดตโหนด npm ฯลฯ ... มันล้มเหลวด้วยข้อความแสดงข้อผิดพลาดด้านบน

การเปลี่ยนบรรทัดการนำเข้าเพื่อimport "../../deps/phoenix_html"แก้ไข

เปลี่ยนรายการของฉันเป็น

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

และมันได้ผล

ในกรณีของฉันไปที่ส่วนท้ายสุดของ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;

จากประสบการณ์ของฉันข้อผิดพลาดนี้เป็นผลมาจากการตั้งชื่อนามแฝงใน Webpack ที่ไม่เหมาะสม ในนั้นฉันมีนามแฝงชื่อreduxและ webpack พยายามค้นหาสิ่งreduxที่มาพร้อมกับแพ็คเกจ redux ในเส้นทางนามแฝงของฉัน

Reduxเพื่อแก้ไขปัญหานี้ผมต้องเปลี่ยนชื่อนามแฝงเพื่อสิ่งที่แตกต่างกันเช่น

สำหรับใครก็ตามที่สร้างแอปไอออนิกและพยายามอัปโหลด ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มแพลตฟอร์มอย่างน้อยหนึ่งแพลตฟอร์มในแอป มิฉะนั้นคุณจะได้รับข้อผิดพลาดนี้

สำหรับทุกคนที่มี Ionic: การอัปเดตเป็นเวอร์ชัน @ ionic / app-scripts ล่าสุดให้ข้อความแสดงข้อผิดพลาดที่ดีขึ้น

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

มันเป็นเส้นทางที่ไม่ถูกต้องสำหรับ styleUrls ในคอมโพเนนต์ไปยังไฟล์ที่ไม่มีอยู่ น่าแปลกที่ไม่มีข้อผิดพลาดในการพัฒนา

ในสถานการณ์ของฉันฉันไม่มีการส่งออกที่ด้านล่างของไฟล์ webpack.config.js เพียงแค่เพิ่ม

export default Config;

แก้ไขได้

ฉันใช้ "@ google-cloud / translate": "^ 5.1.4" และกำลังแก้ไขปัญหานี้อยู่จนกระทั่งฉันลองทำสิ่งนี้:

ฉันเปิดไฟล์ google-gax \ build \ src \ OperationsClient.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' ......

ฉันหวังว่ามันจะช่วยใครสักคน

ในกรณีของฉันมันเป็นเพราะลิงก์ sym เสียเมื่อพยายาม npm เชื่อมโยงไลบรารีเชิงมุมที่กำหนดเองกับแอปที่ใช้งาน หลังจากรัน npm link @ authoring / canvas

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

ดูเหมือนว่าทุกอย่างเรียบร้อย แต่ยังไม่พบโมดูล:

เมื่อฉันแก้ไขคำสั่งนำเข้าเป็นสิ่งที่ตัวแก้ไขสามารถค้นหาลิงก์ได้:

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 dnpm link

5. ในแอปที่ใช้งานให้อัปเดต package.json ด้วย "packageName": "file: / path / to / local / node_module / packageName" "

6. ในไดเร็กทอรีรูทของแอพที่ใช้งานให้รัน npm link packageName

ในกรณีของฉันฉันใช้ templateUrl ที่ไม่ถูกต้องโดยการแก้ไขปัญหาได้รับการแก้ไขแล้ว

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

ในกรณีของฉันมันเกิดจากการพิมพ์ผิดในเส้นทางการนำเข้า ตัวอย่างเช่น,

ควรจะเป็น:

import Dashboard from './Dashboard/dashboard';

แทน:

import Dashboard from './Dashboard/Dashboard';