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

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

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

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

Ruby on Rails 6

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

Ruby on Rails

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

1007閲覧

rails6 webpack ajaxが機能しない

tk2

総合スコア7

Babel

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

Ruby on Rails 6

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

Ruby on Rails

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2020/11/06 10:25

前提・実現したいこと

ユーザーのフォロー機能を実現しようとajax機能を実装したい

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

フォロー機能自体はrailsチュートリアルを模倣しただけなのでバックエンドでのエラーは無いが、Chromeのconsoleを確認したところwebpackのエラーが出てきた。
(ローカルでDockerを使って環境構築したのが原因?)

該当のソースコード

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/code-frame' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636) at Function.Module._load (internal/modules/cjs/loader.js:562) at Module.require (internal/modules/cjs/loader.js:692) at require (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:159) at Object.<anonymous> (:3000/app/node_modules/@babel/template/lib/parse.js:12) at Module._compile (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:192) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789) at Module.load (internal/modules/cjs/loader.js:653) at tryModuleLoad (internal/modules/cjs/loader.js:593) at Function.Module._load (internal/modules/cjs/loader.js:585) at Module.require (internal/modules/cjs/loader.js:692) at require (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:159) at Object.<anonymous> (:3000/app/node_modules/@babel/template/lib/string.js:10) at Module._compile (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:192) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789) at Module.load (internal/modules/cjs/loader.js:653) at tryModuleLoad (internal/modules/cjs/loader.js:593) at Function.Module._load (internal/modules/cjs/loader.js:585) at Module.require (internal/modules/cjs/loader.js:692) at require (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:159) at Object.<anonymous> (:3000/app/node_modules/@babel/template/lib/builder.js:10) at Module._compile (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:192) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789) at Module.load (internal/modules/cjs/loader.js:653) at tryModuleLoad (internal/modules/cjs/loader.js:593) at Function.Module._load (internal/modules/cjs/loader.js:585) at Module.require (internal/modules/cjs/loader.js:692) at require (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:159) at Object.<anonymous> (:3000/app/node_modules/@babel/template/lib/index.js:10) at Module._compile (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:192) at Object../app/javascript/packs/application.js (bootstrap:83) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83

試したこと

Cannot find module '@babel/code-frame'と言っているので、yarn add @babel/helper-compilation-targets を実装した。
ログを下記に添付

Done in 121.07s. takatsunobuhiro@mbp app % dcr yarn add @babel/helper-compilation-targets Creating app_web_run ... done yarn add v1.13.0 [1/4] Resolving packages... [2/4] Fetching packages... warning Pattern ["@babel/helper-compilation-targets@^7.12.5"] is trying to unpack in the same destination "/usr/local/share/.cache/yarn/v4/npm-@babel-helper-compilation-targets-7.12.5-cb470c76198db6a24e9dbc8987275631e5d29831/node_modules/@babel/helper-compilation-targets" as pattern ["@babel/helper-compilation-targets@^7.12.1"]. This could result in non-deterministic behavior, skipping. info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0". warning " > @babel/helper-compilation-targets@7.12.5" has unmet peer dependency "@babel/core@^7.0.0". [4/4] Building fresh packages... warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.13.0". success Saved 1 new dependency. info Direct dependencies └─ @babel/helper-compilation-targets@7.12.5 info All dependencies └─ @babel/helper-compilation-targets@7.12.5 Done in 2372.89s.

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

babel.config.js

module.exports = function(api) { var validEnv = ['development', 'test', 'production'] var currentEnv = api.env() var isDevelopmentEnv = api.env('development') var isProductionEnv = api.env('production') var isTestEnv = api.env('test') if (!validEnv.includes(currentEnv)) { throw new Error( 'Please specify a valid `NODE_ENV` or ' + '`BABEL_ENV` environment variables. Valid values are "development", ' + '"test", and "production". Instead, received: ' + JSON.stringify(currentEnv) + '.' ) } return { presets: [ isTestEnv && [ '@babel/preset-env', { targets: { node: 'current' } } ], (isProductionEnv || isDevelopmentEnv) && [ '@babel/preset-env', { forceAllTransforms: true, useBuiltIns: 'entry', corejs: 3, modules: false, exclude: ['transform-typeof-symbol'] } ] ].filter(Boolean), plugins: [ 'babel-plugin-macros', '@babel/plugin-syntax-dynamic-import', isTestEnv && 'babel-plugin-dynamic-import-node', '@babel/plugin-transform-destructuring', [ '@babel/plugin-proposal-class-properties', { loose: true } ], [ '@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true } ], [ '@babel/plugin-transform-runtime', { helpers: false, regenerator: true, corejs: false } ], [ '@babel/plugin-transform-regenerator', { async: false } ] ].filter(Boolean) } }

app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require('bootstrap/dist/js/bootstrap.min.js') // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true)

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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問