Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ

Tôi đã bắt đầu sử dụng webpack2 (chính xác là vậy v2.3.2) và sau khi tạo lại cấu hình của mình, tôi tiếp tục gặp phải một vấn đề mà tôi dường như không thể giải quyết được (tôi xin lỗi trước vì kết xuất xấu xí):

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]

pack.json

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

Về browserlĩnh vực mà nó phàn nàn, tài liệu tôi có thể tìm thấy về điều này là : package-browser-field-spec. Ngoài ra còn có tài liệu webpack cho nó, nhưng có vẻ như nó được bật theo mặc định : aliasFields: ["browser"]. Tôi đã thử thêm một browserlĩnh vực vào package.jsonnhưng điều đó dường như không làm được gì.

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 / thành phần / DoISuportIt / index.jsx

export default function() { ... }

Để hoàn thiện, .babelrc

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

Tôi đang làm gì sai / mất tích?

Hóa ra là một vấn đề với Webpack chỉ không giải quyết được việc nhập - nói về các thông báo lỗi khủng khiếp khủng khiếp :(

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

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

Tôi đang xây dựng trình kết xuất phía máy chủ React và thấy điều này cũng có thể xảy ra khi xây dựng cấu hình máy chủ riêng biệt từ đầu. Nếu bạn thấy lỗi này, hãy thử như sau:

1. Đảm bảo giá trị "mục nhập" của bạn được định tuyến chính xác so với giá trị "ngữ cảnh" của bạn. Của tôi đã thiếu phần mở đầu "./" trước tên tệp nhập.
2. Hãy chắc chắn rằng bạn có giá trị "giải quyết" của bạn. Nhập khẩu của bạn vào bất cứ thứ gì trong node_modules sẽ mặc định tìm trong thư mục "bối cảnh" của bạn.

Thí dụ:

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

Tôi đã có cùng một vấn đề, nhưng của tôi là do sai lầm trong đường dẫn:

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

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

Trong trường hợp của tôi, đó là một gói được cài đặt như một phụ thuộc trong package.jsonmột đường dẫn tương đối như thế này:

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

và nhập khẩu js/app.jsvớiimport "phoenix_html"

Điều này đã hoạt động nhưng sau khi cập nhật nút, npm, v.v ... nó đã thất bại với thông báo lỗi ở trên.

Thay đổi dòng nhập để import "../../deps/phoenix_html"sửa nó.

Thay đổi mục nhập của tôi thành

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

va no đa hoạt động.

Trong trường hợp của tôi, đến cuối cùng webpack.config.js, nơi tôi nên exportscấu hình, có một lỗi đánh máy: export(nên là exports), dẫn đến thất bại với việc tải webpack.config.jstất cả.

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;

Theo kinh nghiệm của tôi, lỗi này là kết quả của việc đặt tên bí danh không đúng trong Webpack. Trong đó tôi có một bí danh có tên reduxvà webpack đã cố gắng tìm kiếm reduxđi kèm với gói redux trong đường dẫn bí danh của tôi.

Để khắc phục điều này, tôi đã phải đổi tên bí danh thành một cái gì đó khác Redux.

Đối với bất cứ ai xây dựng một ứng dụng ion và cố gắng tải nó lên. Đảm bảo bạn đã thêm ít nhất một nền tảng vào ứng dụng. Nếu không bạn sẽ nhận được lỗi này.

Đối với mọi người có Ionic: Cập nhật lên phiên bản @ ionic / app-scripts mới nhất đã đưa ra thông báo lỗi tốt hơn.

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

Đó là một đường dẫn sai cho styleUrls trong một thành phần đến một tệp không tồn tại. Kỳ lạ thay, nó đã không có lỗi trong phát triển.

Trong tình huống của tôi, tôi không có bản xuất ở cuối tệp webpack.config.js. Chỉ cần thêm

export default Config;

đã giải quyết nó

Tôi đang sử dụng "@ google-cloud / dịch": "^ 5.1.4" và đã gặp rắc rối với vấn đề này, cho đến khi tôi thử điều này:

Tôi đã mở tệp google-gax \ build \ src \ OperationsClient.js và thay đổi

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

đến

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

đã giải quyết lỗi

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

tôi hi vọng nó giúp ích cho ai đó

Trong trường hợp của tôi, đó là do liên kết sym bị hỏng khi cố gắng npm liên kết một thư viện góc tùy chỉnh với ứng dụng tiêu thụ. Sau khi chạy npm link @ tác giả / canvas

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

Có vẻ như mọi thứ đều ổn nhưng mô-đun vẫn không thể tìm thấy:

Khi tôi sửa câu lệnh nhập thành thứ gì đó mà trình soạn thảo có thể tìm thấy Liên kết:

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

Tôi đã nhận được điều này được đề cập trong luồng tràn:

Để khắc phục điều này tôi đã phải:

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

4. Trong thư mục gốc của thư viện, hãy chạy: a. rm -rf dist b. npm run build c. cd dist d.npm link

5. Trong ứng dụng tiêu thụ, hãy cập nhật gói.json với "packName": "file: / path / to / local / node_module / packName" "

6. Trong thư mục gốc của ứng dụng tiêu dùng chạy npm link packName

Trong trường hợp của tôi, tôi đã sử dụng templateUrl không hợp lệ. Tôi đã khắc phục sự cố.

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

Trong trường hợp của tôi, đó là do lỗi chính tả trong trường hợp nhập. Ví dụ,

Nên là:

import Dashboard from './Dashboard/dashboard';

Thay vì:

import Dashboard from './Dashboard/Dashboard';