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

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

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

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

解決済

1回答

2777閲覧

React-Rails+Typescriptのコンパイルエラーを解決したい。

n-syuichi

総合スコア4

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2021/07/09 14:43

編集2021/07/09 23:22

前提・実現したいこと

ruby on rails で予約システムを作成中にエラーが発生しました。

  • Railのバージョンは6。
  • react-railsを使ってrailsとreactを連携しています。
  • reactのソースコードはtypescriptで書いています。
  • react-bootstarpを利用しています

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

以下のエラーが発生し、React部分が表示されません。
ES6での記述で構文に問題を見つけられませんでした。
(おそらくtype宣言が引っかかってると思うのですが…。)

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/myname/IdeaProjects/ReservationSample/app/javascript/packs/common/Header.tsx: Missing semicolon. (5:4) 3 | import {Container, Nav} from "react-bootstrap"; 4 | > 5 | type Props = { | ^ 6 | isLogin:boolean; 7 | userName:string; 8 | }; at Object._raise (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:810) at Object.raiseWithData (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:803) at Object.raise (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:764) at Object.semicolon (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:9935) at Object.parseExpressionStatement (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:13089) at Object.parseStatementContent (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:12678) at Object.parseStatement (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:12542) at Object.parseBlockOrModuleBlockBody (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:13131) at Object.parseBlockBody (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:13122) at Object.parseProgram (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:12473) at Object.parseTopLevel (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:12464) at Object.parse (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:14186) at parse (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/parser/lib/index.js:14238) at parser (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/core/lib/parser/index.js:52) at parser.next (<anonymous>) at normalizeFile (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/core/lib/transformation/normalize-file.js:82) at normalizeFile.next (<anonymous>) at run (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/core/lib/transformation/index.js:29) at run.next (<anonymous>) at Function.transform (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/@babel/core/lib/transform.js:25) at transform.next (<anonymous>) at step (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/gensync/index.js:261) at :3000/Users/myname/IdeaProjects/ReservationSample/node_modules/gensync/index.js:273 at async.call.result.err.err (:3000/Users/myname/IdeaProjects/ReservationSample/node_modules/gensync/index.js:223) at Object../app/javascript/packs/common/Header.tsx (bootstrap:83) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83

該当のソースコード

typescript

1import * as React from "react"; 2import Navbar from 'react-bootstrap/Navbar'; 3import {Container, Nav} from "react-bootstrap"; 4 5type Props = { 6 isLogin:boolean; 7 userName:string; 8}; 9 10const Header:React.FC<Props> = (props)=>{ 11 const loginState =(TrueMsg,FalseMsg)=>{ 12 if (props.isLogin){ 13 return TrueMsg; 14 }else{ 15 return FalseMsg; 16 } 17 }; 18 return ( 19 <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> 20 <Navbar.Brand href="#home"> 21 SampleApp 22 </Navbar.Brand> 23 <Navbar.Toggle aria-controls="responsive-navbar-nav" /> 24 <Navbar.Collapse id="responsive-navbar-nav"> 25 <Nav className="mr-auto"> 26 <Nav.Link href="#home">Home</Nav.Link> 27 <Nav.Link href="#features">Features</Nav.Link> 28 <Nav.Link href="#pricing">Pricing</Nav.Link> 29 </Nav> 30 </Navbar.Collapse> 31 </Navbar > 32 33 34 ); 35}; 36 37Header.defaultProps ={ 38 isLogin:false, 39 userName:"undefined" 40}; 41 42export default Header;

試したこと

ts-loaderのバージョンを下げたり、挙げたりしました。
package.json内

以下のページを参考に、出力のesのバージョンを変更しました。
https://qiita.com/wwalpha/items/a2c7fd5470506a2d9e86

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

関連しそうなファイル内の内容を挙げておきます。
package.json内

{ "name": "reservation-app", "private": true, "dependencies": { "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "^7.14.5", "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "^5.4.0", "@types/react": "^17.0.14", "@types/react-dom": "^17.0.9", "bootstrap": "^4.5.3", "jquery": "^3.6.0", "popper.js": "^1.16.1", "prop-types": "^15.7.2", "react": "^17.0.2", "react-bootstrap": "^1.6.1", "react-dom": "^17.0.2", "react_ujs": "^2.6.1", "ts-loader": "^9.2.3", "turbolinks": "^5.2.0", "typescript": "^4.3.5", "webpack": "^5.44.0", "webpack-cli": "^3.3.12" }, "version": "0.1.0", "devDependencies": { "pnp-webpack-plugin": "^1.6.4", "webpack-dev-server": "^3.11.2" } }

tsconfig.json内

{ "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["ES2020", "dom"], "module": "ES2015", "moduleResolution": "node", "sourceMap": true, "target": "ES2015", "jsx": "react", "noEmit": true }, "exclude": ["**/*.spec.ts", "node_modules", "vendor", "public"], "compileOnSave": false }

Gemfile内

source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.7.2' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main' gem 'rails', '~> 6.1.3', '>= 6.1.3.1' # Use sqlite3 as the database for Active Record gem 'sqlite3', '~> 1.4' # Use Puma as the app server gem 'puma', '~> 5.0' # Use SCSS for stylesheets gem 'sass-rails', '>= 6' # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker gem 'webpacker', '~> 4.0' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.7' # gem 'jquery-rails' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use Active Model has_secure_password # gem 'bcrypt', '~> 3.1.7' gem "activeadmin" #cancancan gem "cancancan" #.env gem "dotenv-rails" # gem 'bootstrap', '~> 4.5.0' # Use Active Storage variant # gem 'image_processing', '~> 1.2' # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.4.4', require: false #calendar gem 'fullcalendar-rails' gem 'momentjs-rails' #react-rails gem 'react-rails' #devise gem "devise" group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 4.1.0' # Display performance information such as SQL time and flame graphs for each request in your browser. # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md # gem 'rack-mini-profiler', '~> 2.0' gem 'listen', '~> 3.3' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' end group :test do # Adds support for Capybara system testing and selenium driver gem 'capybara', '>= 3.26' gem 'selenium-webdriver' # Easy installation and use of web drivers to run system tests with browsers gem 'webdrivers' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

config/webpack/environment.js内

const {environment} = require('@rails/webpacker') const typescript = require('./loaders/typescripts') const webpack = require('webpack') environment.loaders.prepend('typescript', typescript) environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery', Popper: ['popper.js', 'default'] })) module.exports = environment

config/webpack/loader/typescripts.js

const PnpWebpackPlugin = require('pnp-webpack-plugin') module.exports = { test: /.tsx?(.erb)?$/, use: [ { loader: 'ts-loader', options: PnpWebpackPlugin.tsLoaderOptions() } ] }

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

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

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

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

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

hoshi-takanori

2021/07/09 20:14

Rails よく分かりませんが、Babel がエラーを吐いてるので、TypeScript として処理されてないように見えますね。
n-syuichi

2021/07/09 23:23

現状、ts-loaderを使っているので、babel-loaderで処理させるよに試してみます。
n-syuichi

2021/07/09 23:56

自己解決しました。ありがとうございました
guest

回答1

0

自己解決

結論

  • webpackとwebpackerが環境に共存していた
  • webpackでコンパイルされていたため、webpackerの設定が読み込めていなかった。

解決のために行ったこと

  • yarn remove webpack webpack-cliのコマンドの実施
  • webpackerのバージョンアップ(その後、bundle install)

教訓

  • サイトのコピペを理解せず多量に行うと何を改変したか忘れてしまう。
  • Gitのログを遡るという基本的なことを忘れていた。

修正後

package.json内

{ "name": "reservation-app", "private": true, "dependencies": { "@babel/preset-env": "^7.14.7", "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "^7.14.5", "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "^5.4.0", "@types/react": "^17.0.14", "@types/react-dom": "^17.0.9", "bootstrap": "^4.5.3", "jquery": "^3.6.0", "popper.js": "^1.16.1", "prop-types": "^15.7.2", "react": "^17.0.2", "react-bootstrap": "^1.6.1", "react-dom": "^17.0.2", "react_ujs": "^2.6.1", "ts-loader": "^9.2.3", "turbolinks": "^5.2.0", "typescript": "^4.3.5" }, "version": "0.1.0", "devDependencies": { "pnp-webpack-plugin": "^1.6.4", "webpack-dev-server": "^3.11.2" } }

Gemfile

source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.7.2' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main' gem 'rails', '~> 6.1.3', '>= 6.1.3.1' # Use sqlite3 as the database for Active Record gem 'sqlite3', '~> 1.4' # Use Puma as the app server gem 'puma', '~> 5.0' # Use SCSS for stylesheets gem 'sass-rails', '>= 6' # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker gem 'webpacker', '~> 5.0' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.7' # gem 'jquery-rails' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use Active Model has_secure_password # gem 'bcrypt', '~> 3.1.7' gem "activeadmin" #cancancan gem "cancancan" #.env gem "dotenv-rails" # gem 'bootstrap', '~> 4.5.0' # Use Active Storage variant # gem 'image_processing', '~> 1.2' # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.4.4', require: false #calendar gem 'fullcalendar-rails' gem 'momentjs-rails' #react-rails gem 'react-rails' #devise gem "devise" group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 4.1.0' # Display performance information such as SQL time and flame graphs for each request in your browser. # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md # gem 'rack-mini-profiler', '~> 2.0' gem 'listen', '~> 3.3' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' end group :test do # Adds support for Capybara system testing and selenium driver gem 'capybara', '>= 3.26' gem 'selenium-webdriver' # Easy installation and use of web drivers to run system tests with browsers gem 'webdrivers' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

投稿2021/07/09 23:56

編集2021/07/10 00:01
n-syuichi

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問