[解決済み] アクシオスは定義されていません
2022-02-25 11:50:06
質問
axiosを使って、React.jsで簡単な天気予報アプリを作成しています。コードを完成させたところですが、問題があります。そのアプリを起動すると、まったく動作せず、次のような参照エラーが表示されます。
axios is not defined
.
以下は、私の webpack.config.js ファイルです。
module.exports = {
entry: './public/app/app.jsx',
output: {
path: __dirname,
filename: './public/js/bundle.js'
},
externals: ['axios'],
resolve: {
root: __dirname,
alias: {
OpenWeatherMap: 'public/components/OpenWeatherMap.jsx',
Main: 'public/components/Main.jsx',
Nav: 'public/components/Nav.jsx',
Weather: 'public/components/Weather.jsx',
WeatherForm: 'public/components/WeatherForm.jsx',
WeatherMessage: 'public/components/WeatherMessage.jsx',
About: 'public/components/About.jsx'
},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
loader: 'babel-loader',
query: {
presets: ['react','es2015', 'stage-0']
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
},{
loader: 'json-loader',
test: /\.json?$/
}]
}
};
とpackage.jsonファイルに記述します。
{
"name": "weather",
"version": "1.0.0",
"description": "Simple Weather App",
"main": "ext.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Milad Fattahi",
"license": "ISC",
"dependencies": {
"axios": "^0.16.1",
"express": "^4.15.3",
"json": "^9.0.6",
"json-loader": "^0.5.4",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.24.1",
"webpack": "^1.12.13"
}
}
解決方法は?
当たり前のことかもしれませんが、ファイルの先頭に正しいアクシオスへの参照があることを確認し、インストールします。 https://www.npmjs.com/package/axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
関連
-
[解決済み] React.createElement: type is invalid -- expected a string.
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] マテリアルUIセレクトフィールドのマルチセレクト
-
[解決済み] jest: テストスイートの実行に失敗しました。予期しないトークンのインポート
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] Uncaught (in promise) Error: リクエストに失敗、ステータスコード404
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避する方法は?
-
[解決済み] ESLintとTSLintの違い【クローズド】について
-
[解決済み] AxiosのHTTPエラーからステータスコードを取得するにはどうすればよいですか?
-
[解決済み] axiosのpostリクエストでフォームデータを送信する
最新
-
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のブレークポイントについて
-
[解決済み] テスト
-
[解決済み] Apolloクライアントでログアウトした後、ストアをリセットする
-
[解決済み] マテリアルUIセレクトフィールドのマルチセレクト
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み] reactのuseStateフックでコールバックを使う方法 [重複]。
-
[解決済み] ESLintとTSLintの違い【クローズド】について