[解決済み】プリセットファイルはオブジェクトのエクスポートができない
2022-01-25 01:12:13
質問
カルーセルファイルがあり、その中で
index.js
を構築し
block.build.js
ということで、私の
webpack.config.js
があります。
var config = {
entry: './index.js',
output: {
path: __dirname,
filename: 'block.build.js',
},
devServer: {
contentBase: './Carousel'
},
module : {
rules : [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}
}
]
}
};
module.exports = config;
は
package.json
を使用しています。
{
"name": "carousel",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.1.3",
"lodash": "^4.17.5",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-swipeable": "^4.2.0",
"styled-components": "^3.2.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"devDependencies": {
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"
},
"author": "brad traversy",
"license": "ISC"
}
... しかし、このエラーメッセージが表示されます。
ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
誰かこれを解決する方法を知っていますか?
解決方法は?
Babel 6とBabel 7を組み合わせて使用しています。バージョン間の互換性は保証されていません。
"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",
であるべきです。
"@babel/core": "^7.0.0-beta.40",
"@babel/cli": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"@babel/preset-react": "^7.0.0-beta.40",
そして
query: {
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}
となる
query: {
presets: ['@babel/react', '@babel/es2015'],
plugins: ['@babel/proposal-class-properties']
}
というのも、このページには
@babel/proposal-class-properties
の中で
package.json
しかし、その中にあると仮定すれば、それも更新されるはずです。
関連
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] React-Router 4 キャッチオールルート
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] カスタマイズ素材UI チェックした場合としない場合の切り替え
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する
-
[解決済み] Reactでグローバル変数を宣言する方法とは?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み】Warning.Itが表示されるのはなぜですか?Functions are not valid as a React child?
-
[解決済み] Jestの `beforeEach` グローバルは何のためにあるのですか?
-
[解決済み] reactでonloadを使うには?
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] 非必須項目に対するYupバリデーション
-
[解決済み] AxiosにCORSの問題が発生
-
[解決済み] componentDidUpdate'メソッドはいつ使用するのですか?
-
[解決済み] React」は定義される前に使用されていた