rails ＋ react でjsx が読み込めない

rails-webpack でreact を動かそうとしている。


webブラウザのコンソール

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/yosikiokada/memo_app/app/javascript/packs/index.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (8:5):

   6 | document.addEventListener('DOMContentLoaded', () => {
   7 |   ReactDOM.render(
>  8 |     <>
     |     ^
   9 |       <App/>
  10 |     </>,
  11 |     document.querySelector('#root'),

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at Parser._raise (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:541)
    at Parser.raiseWithData (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:534)
    at Parser.expectOnePlugin (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:3595)
    at Parser.parseExprAtom (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11981)
    at Parser.parseExprSubscripts (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11584)
    at Parser.parseUpdate (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11564)
    at Parser.parseMaybeUnary (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11539)
    at Parser.parseMaybeUnaryOrPrivate (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11353)
    at Parser.parseExprOps (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11360)
    at Parser.parseMaybeConditional (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11330)
    at Parser.parseMaybeAssign (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11290)
    at :3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11248
    at Parser.allowInAnd (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:13137)
    at Parser.parseMaybeAssignAllowIn (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11248)
    at Parser.parseExprListItem (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:12874)
    at Parser.parseCallExpressionArguments (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11791)
    at Parser.parseCoverCallAndAsyncArrowHead (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11698)
    at Parser.parseSubscript (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11628)
    at Parser.parseSubscripts (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11601)
    at Parser.parseExprSubscripts (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11590)
    at Parser.parseUpdate (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11564)
    at Parser.parseMaybeUnary (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11539)
    at Parser.parseMaybeUnaryOrPrivate (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11353)
    at Parser.parseExprOps (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11360)
    at Parser.parseMaybeConditional (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11330)
    at Parser.parseMaybeAssign (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11290)
    at Parser.parseExpressionBase (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11226)
    at :3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11220
    at Parser.allowInAnd (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:13137)
    at Parser.parseExpression (:3000/Users/yosikiokada/memo_app/node_modules/@babel/parser/lib/index.js:11220)
    at Object../app/javascript/packs/index.jsx (index-b3ef289ca2c4c44ae11d.js:96)
    at __webpack_require__ (index-b3ef289ca2c4c44ae11d.js:20)
    at index-b3ef289ca2c4c44ae11d.js:84
    at index-b3ef289ca2c4c44ae11d.js:87
./app/javascript/packs/index.jsx @ index-b3ef289ca2c4c44ae11d.js:96
__webpack_require__ @ index-b3ef289ca2c4c44ae11d.js:20
（匿名） @ index-b3ef289ca2c4c44ae11d.js:84
（匿名） @ index-b3ef289ca2c4c44ae11d.js:87

途中でherokuにアップロードしようとしてエラーが出てしまい一度webpackerを入れ直したらこうなりました。
jsxファイルが読み込めないとのことですが入れ直す前は正常に動いていました。どうすれば元に戻るでしょうか？


/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .jsx
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

application.html.erb

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>RailsMemo</title>
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8
9
10    <%= stylesheet_link_tag 'application', media: 'all' %>
11    <%= javascript_pack_tag 'application' %>
12    <%= javascript_pack_tag 'index' %>
13  </head>
14
15  <body>
16    <%= yield %>
17  </body>
18</html>
19

javascript/packs/index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom';
import App from '../components/App'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <>
      <App/>
    </>,
    document.querySelector('#root'),
  );
});

mike2mike4

2021/11/30 11:08

<> これ、元はなんかあったのじゃ無いですか？

September4

2021/12/01 09:10

回答ありがとうございます。これはjsx特有の空タグになります。一応jsファイルにしてdivにしてみましたがダメでした。

uky

2021/12/03 04:47

syntax 'jsx' isn't currently enabled とエラーが出ているみたいですが、 .babelrcファイルにReact用のpresetsは記載されていますでしょうか？下記参考になりませんでしょうか？ https://qiita.com/dorimiamn/items/a042d186267aa360ebc0

September4

2021/12/17 07:57

だめです。同じ現象が続きます。