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

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

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

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

React.js

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

Q&A

解決済

1回答

1064閲覧

import 'babel-polyfill'で発生するUnexpected stringエラー

shiki03

総合スコア17

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

React.js

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

0グッド

0クリップ

投稿2019/03/19 13:55

前提・実現したいこと

タイトルのimport 'babel-polyfill'で発生するUnexpected stringエラーを解決したいです。
環境はRails4 React.js 
gem 'sprockets-es6'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'

発生している問題・エラーメッセージ

・ローカルでは

Uncaught SyntaxError: Unexpected string Uncaught TypeError: Failed to resolve module specifier "babel-polyfill". Relative references must start with either "/", "./", or "../".

Heroku環境では

Uncaught SyntaxError: Unexpected string

上記のエラーが発生します。

該当のソースコード

app/assets/javascripts/src/boot.js

import 'babel-polyfill' import $ from './vendor/jquery' import page from 'page' import MessageRouter from './router/message' import UserRouter from './router/user' $(() => { const messageRouter = new MessageRouter() messageRouter.register() page({click: false}) const userRouter = new UserRouter() userRouter.register() page({click: false}) })

package.json

{ "name": "chat_app", "version": "1.0.0", "description": "== README", "main": "index.js", "directories": { "test": "test" }, "scripts": { "watch": "npm run lint:fix && watchify app/assets/javascripts/src/boot.js -t babelify --extension=\".js.jsx\" -d -o public/assets/javascripts/boot.js -v", "watch:hot": "npm run lint && watchify app/assets/javascripts/src/boot.js -t babelify --extension=\".js.jsx\" -d -p livereactload -o public/assets/javascripts/boot.js -v", "lint": "eslint ./app/assets/javascripts/src", "lint:fix": "npm run lint -- --fix", "start": "npm run watch & rails s ", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "babel-eslint": "^5.0.0-beta6", "classnames": "^2.2.5", "eslint": "^1.10.3", "eslint-config-standard": "^4.4.0", "eslint-config-standard-react": "^1.2.1", "eslint-plugin-react": "^3.14.0", "eslint-plugin-standard": "^1.3.1", "livereactload": "^2.1.0", "react-proxy": "^2.0.1" }, "dependencies": { "acorn": "^3.1.0", "babel-core": "^6.3.21", "babel-eslint": "^5.0.4", "babel-plugin-react-transform": "^2.0.0", "babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.1.2", "babel-preset-react": "^6.1.2", "babelify": "^7.2.0", "browserify": "~13.0.0", "browserify-incremental": "^3.1.1", "change-case": "2.3.1", "chart.js": "1.0.2", "escodegen": "^1.8.0", "eventemitter2": "^0.4.14", "flux": "^2.0.0", "gulp": "^3.8.11", "gulp-buffer": "0.0.2", "gulp-rev": "^6.0.1", "gulp-shell": "^0.5.2", "gulp-uglify": "^1.5.1", "gulp-util": "3.0.7", "i18n-js": "http://github.com/fnando/i18n-js/archive/v3.0.0.rc8.tar.gz", "keymirror": "~0.1.0", "lodash": "^4.2.1", "material-ui": "^0.14.4", "moment": "2.11.2", "object-assign": "4.0.1", "page": "^1.6.4", "rc-tooltip": "^3.3.0", "react": "^0.14.5", "react-addons-transition-group": "^0.14.5", "react-dnd": "^2.0.2", "react-dnd-html5-backend": "^2.0.2", "react-dom": "0.14.7", "react-file-input": "^0.2.5", "react-modal": "^0.6.0", "react-router-dom": "^4.3.1", "react-slick": "^0.12.0", "react-tap-event-plugin": "^0.2.1", "reactify": "^1.1.1", "reveal.js": "3.2.0", "socket.io-client": "^1.4.5", "superagent": "^1.6.1", "vinyl-source-stream": "^1.1.0", "watchify": "3.7.0", "zeroclipboard": "2.2.0" }, "engines": { "node": "8.12.0", "npm": "6.4.1" } }

試したこと

https://github.com/babel/babel/issues/8835
babelのissueで同じ問題がありましたが、ここではbabelのversionを6にすることで解決しています。しかし、自分は babelのversion6を使用しているので関係はなさそうです。

よろしくお願いいたします。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

自己解決

完全な解決方法かはわかりませんが、解決したので記載します。

Javascriptをes6 babelを使用していたため boot.jsファイルの拡張子を.jsから.ex6に変更することで読み込まれるようになりました。

ローカルでコンパイルし直して本番環境にデプロイすることでHerokuでも無事反映されました。

参考URL
https://qiita.com/takashi/items/d834b95bf229412aa9c0

基本的にはsprocketsではなく、webpackで管理した方が良さそうです。

誰かの助けになれば幸いです。

投稿2019/03/20 05:58

編集2019/03/20 05:59
shiki03

総合スコア17

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問