フィールド「ブラウザ」には有効なエイリアス構成が含まれていません。
私は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": {
...
}
}不満のある「ブラウザ」フィールドに関して、私がこれで見つけることができたドキュメントは、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
}私は何を間違っている/逃していますか?
インポートを解決しないだけでWebpackの問題であることが判明-恐ろしい恐ろしいエラーメッセージについて話してください:(。
// Had to change
import DoISuportIt from 'components/DoISuportIt';
// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
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')
]
}
};私も同じ問題を抱えていましたが、私のケーシングが間違っていたためです。
// Wrong - uppercase C in /pathCoordinate/
./path/pathCoordinate/pathCoordinateForm.component
// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component
エントリを変更しました。
entry: path.resolve(__dirname, './src/js/index.js'),そしてそれは働いた。
私の場合、「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;
私の場合、これは次のような相対パスを持つ「package.json」の依存関係としてインストールされたパッケージでした。
"dependencies": {
...
"phoenix_html": "file:../deps/phoenix_html"
},js / app.jsに import "phoenix_html"でインポートされます。
これは機能しましたが、ノード、npmなどの更新後です。.. 上記のエラーメッセージで失敗しました。
インポートラインを「インポート」に変更します。./。./ deps / phoenix_html "`が修正されました。
私の経験では、このエラーはWebpackでのエイリアスの不適切な命名の結果でした。 その中で、「redux」という名前のエイリアスを持っていて、webpackはエイリアスパスでreduxパッケージに付属する「redux」を探してみました。
これを修正するには、エイリアスの名前を「Redux」のような別の名前に変更する必要がありました。
Ionicを使用するすべての人のために: 最新の@ionic / app-scriptsバージョンを更新すると、エラーメッセージが改善されました。
npm install @ionic/[email protected] --save-devこれは、コンポーネントのstyleUrlsが存在しないファイルに間違ったパスでした。 奇妙なことに、それは開発に誤りを与えませんでした。
私の場合、それはインポートパスのケース感度タイプミスによるものです。 例えば、。
する必要があります:
。 'からダッシュボードをインポートします。/ダッシュボード/ダッシュボード ';。 。
代わりに:
。 'からダッシュボードをインポートします。/ダッシュボード/ダッシュボード ';。 。
