[解決済み】フィールド 'browser' が有効なエイリアス設定を含んでいない
2022-01-26 12:05:51
質問
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]
パッケージ.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がインポートを解決できない問題であることが判明しました - 恐ろしいエラーメッセージの話 :(
// I Had to change:
import DoISuportIt from 'components/DoISuportIt';
// to (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
関連
-
nvmコマンドが見つからない問題を解決する
-
[解決済み] NPM Publish Registry - 403 Forbidden - "You don't have permission to publish "...".
-
エラーを解決する。ENOENT: no such file or directory, scandir install node-sass error.
-
yarnのインストールは成功しましたが、「コマンドが見つかりません」と表示されます。
-
[解決済み] yarn runとnpm startの違いは何ですか?
-
[解決済み] インポートパスの中の@はどういう意味ですか?
-
[解決済み】npmインストール時。Unhandled rejection Error: EACCES: パーミッションが拒否されました。
-
[解決済み】UbuntuにBowerをインストールする。
-
[解決済み] NPMがモジュールの依存関係をインストールしない
-
[解決済み] npm install で --save フラグは何をするのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] NPM 未定義のプロパティ '0' を読み取ることができません。
-
[解決済み] Babel コマンドが見つかりません
-
npm ERR!レジストリエラー パース jsonエラー 解決策
-
vue-cli レポのダウンロードに失敗しました vuejs-templates/webpack 接続タイムアウトの解決法
-
gulp: コマンドが見つからない 解決する
-
[解決済み] npm equivalent of yarn resolutions?
-
[解決済み] Yarnの "npm install -save "に相当するものは何ですか?
-
[解決済み] npm install」と「npm ci」の違いは何ですか?
-
[解決済み] Module not found: Error: Can't resolve 'core-js/es6'.
-
[解決済み] なぜ package-lock.json は整合性ハッシュを sha1 から sha512 に変更したのですか?