受付中
djangoとvueの初期画面を同時に表示できない。(Uncaught SyntaxError: Unexpected token '<')
Vue.js
Django
2022/06/02 01:06
実現したいこと
djangoとvueの初期画面を同時に表示
発生している問題
Django REST Framework + Vue.jsで求人情報アプリを構築しよう! レッスン2
上記動画で学習をしています。 vue.config.jsを作成し、vueとdjangoのサーバーをそれぞれ起動したところ、「Vue JS」h1タグの文字しか表示されず、Devtoolのconsoleを確認すると以下のエラーが表示されました。 解決方法をご教示願います。
Uncaught SyntaxError: Unexpected token '<'
ソースコード
vue.config.js以外は動画と同様のソースコードです。vue.config.jsのソースコードを載せておきます。
vue.config.js
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
publicPath: "http://127.0.0.1:8000/",
// publicPath: "http://0.0.0.0:8000/",
outputDir: "./dist/",
devServer: {
hot: "only",
allowedHosts: "all",
static: {
watch: true,
},
https: {
requestCert: false,
},
headers: {
"Access-Control-Allow-Origin": "*",
},
},
chainWebpack : config => {
config.plugin("BundleTracker").use(BundleTracker, [{ filename : "./webpack-stats.json"}]);
config.output.filename("bundle.js");
config.optimization.splitChunks(false);
config.resolve.alias.set("__STATIC__", "static");
// config.devServer
// .hotOnly(true)
// .watchOptions({ poll: 1000 })
// .https(false)
// .disableHostCheck(true)
// .headers({ "Access-Control-Allow-Origin" : ["*"] });
},
};
自分で試したこと
config.devServerの.hotOnly(true)や.watchOptions({ poll: 1000 })や.disableHostCheck(true)があるとエラーを吐くので、メモにしてあります。
以下を参考。
https://www.fullstackchannel.com/questions/9
publicPathをhttp://127.0.0.1:8000/ 以外にすると404エラーを吐きます。
補足情報
python -v
3.9.10
node -v
v16.13.1
npm -v
8.1.2
requirements.txt
Django==2.2.10
django-webpack-loader==0.7.0
djangorestframework==3.11.0
回答 4件
回答するにはログインが必要です
config.jsを見る限りエラーは見当たらないので、HTMLファイルなどを見直してみてはいかがでしょうか。
貼っていただければ確認します
1
はる@講師 さま
そちらも試しましたが、同様のエラーでした。
Uncaught SyntaxError: Unexpected token
は、かっこが多いなどコードのタイプミスで起こるエラーだと思います。
コードの見直しをもう一度お願いします。
こちら回答にあるように
https://www.fullstackchannel.com/questions/9
コメントアウトするだけでは動かないでしょうか?
config.devServer
// .hotOnly(true)
// .watchOptions({ poll: 1000 })
.https(false)
// .disableHostCheck(true)
.headers({ "Access-Control-Allow-Origin" : ["*"] });