質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

1955閲覧

”Uncaught SyntaxError: Unexpected token <”の原因が知りたい

rina_teratail

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

0クリップ

投稿2018/05/17 06:03

編集2022/01/12 10:55

現状

ReactJSのアプリケーションを作っています。そこで

Uncaught SyntaxError: Unexpected token <

というエラーが起き続けている状態です。homeのページでも詳細のページでも起きてしまいます。

またhomeのページから、詳細のページにいくと、上記のエラーに加えて

bundle.js:1 Uncaught TypeError: Cannot read property 'pathname' of undefined

というエラーメッセージが表示され、ブランクページになります。(homeのページは問題なく表示されています)

ネットワークのタブを見てみると、bundle.js404のステータスになっており、style.cssキャンセルされてしまっています。

なぜ詳細ページでのみこのようなエラーができるのかわからず、どこに問題があるのかも不明な状態です。。

コード

index.htmlでは以下のようにpathを指定しており、実際にバンドルしたファイルもフォルダ内にあります。

<script type="text/javascript" src="./dist/bundle.js"></script>
<link rel="stylesheet" href="./dist/style.css">

webpack.config.jsは以下のように設定しております。

js

1const path = require('path'); 2const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 4module.exports = [ 5 { 6 mode: 'production', 7 entry: './src/index.js', 8 watch: true, 9 output: { 10 path: path.resolve(__dirname, 'dist'), 11 filename: 'bundle.js' 12 }, 13 module: { 14 rules: [ 15 { 16 exclude: /node_modules/, 17 loader: 'babel-loader', 18 query: { 19 compact: true, 20 presets: ['react', 'es2015', 'stage-1', 'flow'] 21 } 22 }, { 23 test: /.svg$/, 24 loader: 'babel-loader!svg-react-loader' 25 }, { 26 test: /.(jpg|png)$/, 27 loader: 'url-loader' 28 }, { 29 test: /.json$/, 30 loader: 'json-loader' 31 }, { 32 test: /.css$/, 33 loader: 'style-loader!css-loader?modules' 34 }, { 35 test: /.scss$/, 36 loader: 'sass-loader!css-loader' 37 } 38 39 ] 40 }, 41 resolve: { 42 extensions: ['*', '.js', '.jsx', '.json'] 43 }, 44 devServer: { 45 compress: true, 46 historyApiFallback: true, 47 port: 8080 48 } 49 }, { 50 mode: 'production', 51 entry: './style/style.scss', 52 watch: true, 53 output: { 54 path: path.resolve(__dirname, "dist"), 55 filename: 'style.css' 56 }, 57 module: { 58 rules: [ 59 { 60 test: /.scss$/, 61 use: ExtractTextPlugin.extract({ 62 use: [ 63 { 64 loader: 'css-loader' 65 }, { 66 loader: 'sass-loader' 67 } 68 ], 69 fallback: 'style-loader' 70 }) 71 } 72 ] 73 }, 74 plugins: [new ExtractTextPlugin('style.css')] 75 } 76]; 77

もし、原因がわかる方がいましたら教えていただけるととても助かります。m(_ _)m

追記

index.htmlのpathの指定が間違っていたようで、404のエラーは直りました!が、まだUnexpected token <'pathname' of undefinedのエラーが出ています。。

sezubo👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

原因は構文エラーなので、eslint-loaderを導入して、コンパイル時に構文チェックしてみてはどうでしょう?
エラーの発生するファイル名・行数を出してくれて便利ですよ。

投稿2018/05/17 07:15

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rina_teratail

2018/05/17 08:42

ありがとうございます ???? 導入して見ました!が、ターミナルに特にエラーは出ないです。。汗
yhg

2018/05/17 08:47

あ、流し読みしてて全然見当違いなこと言ってた(汗) Webpack の設定で `output.publicPath` を設定してはいかがでしょうか。 publicPath: '/dist/'
rina_teratail

2018/05/18 02:42

ありがとうございます、ただまだ同じエラーが出てしまいます。。m(_ _)m
rina_teratail

2018/05/18 03:20

index.htmlのpathの指定が間違っていたようで、404のエラーは直りました!が、まだUnexpected token <と'pathname' of undefinedのエラーが出ています。。
yhg

2018/05/18 04:14

そちらは JSX の記述がダメとか、pathname プロパティ自体が空だったり pathname プロパティを持つオブジェクトのが空だったりまちまちなので、内容を見てみないことにはなんとも分かりません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問