フィールド 'ブラウザ'に有効なエイリアス構成が含まれていません。

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"].私は package.json に browser フィールドを追加してみましたが、それは何の役にも立たなかったようです。

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
}

私は何を間違えているのか、見逃しているのか？

John Kennedy
編集された質問 18日 7月 2019 в 2:40
プログラミング
webpack npm webpack-2 package.json commonjs
27日 3月 2017 в 3:40
654 ビュー
ソリューション

Webpackがインポートを解決しない問題であることが判明 - 恐ろしい恐ろしいエラーメッセージの話 :(

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

// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
Matthew Herbst
編集した答え 20日 12月 2017 в 7:50
解説 (7)

Reactサーバー側レンダラーを構築していますが、これは別のサーバー構成をゼロから構築するときにも発生する可能性があることがわかりました。 このエラーが表示された場合は、次の操作を行ってください。

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')
    ]
}
};
Artif3x
編集した答え 9日 10月 2017 в 3:39
解説 (0)

私も同じようなことがありましたが、私の場合はパスのケーシングが違っていたのが原因でした：

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

// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component
解説 (1)

エントリを変更しました。

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

そしてそれは働いた。

解説 (0)

私の場合、「webpack.config.js」の最後まで、構成を「エクスポート」する必要があります。タイプミスがありました:「エクスポート」(「エクスポート」である必要があります)。 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;
解説 (0)

私の場合、これは次のような相対パスを持つ「package.json」の依存関係としてインストールされたパッケージでした。

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

js / app.jsに import "phoenix_html"でインポートされます。

これは機能しましたが、ノード、npmなどの更新後です。.. 上記のエラーメッセージで失敗しました。

インポートラインを「インポート」に変更します。./。./ deps / phoenix_html "`が修正されました。

解説 (0)

ionicアプリを作り、アップロードしようとする人へ。アプリに少なくとも1つのプラットフォームを追加したことを確認してください。そうでない場合は、このエラーが発生します。

解説 (0)

私の経験では、このエラーはWebpackでのエイリアスの不適切な命名の結果でした。 その中で、「redux」という名前のエイリアスを持っていて、webpackはエイリアスパスでreduxパッケージに付属する「redux」を探してみました。

これを修正するには、エイリアスの名前を「Redux」のような別の名前に変更する必要がありました。

解説 (0)

Ionicを使用するすべての人のために: 最新の@ionic / app-scriptsバージョンを更新すると、エラーメッセージが改善されました。

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

これは、コンポーネントのstyleUrlsが存在しないファイルに間違ったパスでした。 奇妙なことに、それは開発に誤りを与えませんでした。

解説 (0)

私の状況では、webpack.config.jsファイルの下部にエクスポートがありませんでした。 単に追加します。

export default Config;

それを解決しました。

解説 (0)

私の場合、それはインポートパスのケース感度タイプミスによるものです。 例えば、。

する必要があります: 。 'からダッシュボードをインポートします。/ダッシュボード/ダッシュボード ';。 。 代わりに: 。 'からダッシュボードをインポートします。/ダッシュボード/ダッシュボード ';。 。

wltheng
編集した答え 10日 10月 2019 в 2:06
解説 (0)