フィールド「ブラウザ」に有効なエイリアス設定が含まれていません

私は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 / components / 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サーバー側レンダラーを構築していますが、これは別のサーバー構成を最初から構築するときにも発生する可能性があることを発見しました。このエラーが表示される場合は、次のことを試してください。

1. 「エントリ」値が「コンテキスト」値に対して適切にパスされていることを確認してください。鉱山では、エントリファイル名の前に先行する「./」がありませんでした。
2. 「解決」値が含まれていることを確認してください。node_modulesにあるものをインポートすると、デフォルトで「context」フォルダーが検索されます。

例：

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"

これは機能しましたが、node、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アプリを作成してアップロードしようとする人向けです。アプリに少なくとも1つのプラットフォームを追加したことを確認してください。そうしないと、このエラーが発生します。

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

誰かのお役に立てば幸いです

私の場合、カスタム角度ライブラリを消費アプリにnpmリンクしようとしたときにsymリンクが壊れていたことが原因でした。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. ライブラリのルートディレクトリで、次のコマンドを実行します。rm -rf dist b。npm run build c。cd dist d。npm 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';