Q&A
前提・実現したいこと
ユーザーのフォロー機能を実現しようと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)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー
