[解決済み] フィールド 'browser' に有効なエイリアス設定がありません。
2022-03-06 07:05:38
質問
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';
関連
-
[解決済み】フィールド 'browser' が有効なエイリアス設定を含んでいない
-
[解決済み】npm ERR!レジストリエラーのjson解析 - Windows 8でIonic Framework用のCordovaをインストールしようとしているとき
-
レポート:spawn cmd ENOENTエラーの起動に失敗しました。
-
nvmコマンドが見つからない問題を解決する
-
[解決済み] エラーです。EPERM: operation not permitted, unlink 'D:\Sources**node_modules**fsevents**node_modules**abbrev**package.json'
-
[解決済み] Webpack 4 : ERROR in Entry module not found: Error: ./src'を解決できません。
-
[解決済み] npm install」と「npm ci」の違いは何ですか?
-
[解決済み] インポートパスの中の@はどういう意味ですか?
-
[解決済み] 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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】フィールド 'browser' が有効なエイリアス設定を含んでいない
-
レポート:spawn cmd ENOENTエラーの起動に失敗しました。
-
NPM- モジュール 'xxxxxxxxxx' が見つかりません。
-
エラーを解決する。ENOENT: no such file or directory, scandir install node-sass error.
-
[解決済み] npmインストールエラー "npm ERR! code 1 "の解決方法
-
[解決済み] yarn runとnpm startの違いは何ですか?
-
[解決済み] package-lock.jsonの役割は何ですか?
-
[解決済み] npm-shrinkwrap.jsonとpackage-lock.jsonの違いは何ですか?
-
[解決済み] NPMがモジュールの依存関係をインストールしない
-
[解決済み] npm install で --save フラグは何をするのですか?