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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

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

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Q&A

解決済

1回答

1702閲覧

Module not found: Error: Can't resolve '@smartweb/vue-flash-message'が解決できません。

black_pasta1001

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

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

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

0グッド

0クリップ

投稿2021/10/04 12:25

@smartweb/vue-flash-message(https://www.npmjs.com/package/@smartweb/vue-flash-message/v/next)をinstallして開発環境では問題なく動作したのでherokuにデプロイしようとしたところModule not found: Error: Can't resolve '@smartweb/vue-flash-message'というエラーが発生してしまい、解決方法がわかりません。

どうして本番環境では読み込めないのか教えていただきたいです。
#エラーコード

heroku

1 ModuleNotFoundError: Module not found: Error: Can't resolve '@smartweb/vue-flash-message' in '/tmp/build_7d25413c/app/javascript/packs' 2 at 3. 4. 5. 6. 7. 8 9Field 'browser' doesn't contain a valid alias configuration 10 resolve as module 11 looking for modules in /tmp/build_7d25413c/app/javascript 12 using description file: /tmp/build_7d25413c/package.json (relative path: ./app/javascript) 13 Field 'browser' doesn't contain a valid alias configuration 14 using description file: /tmp/build_7d25413c/package.json (relative path: ./app/javascript/@smartweb/vue-flash-message) 15 no extension 16 Field 'browser' doesn't contain a valid alias configuration 17. 18. 19. 20. 21 22 /tmp/build_7d25413c/app/javascript/@smartweb/vue-flash-message doesn't exist

#関連ファイル

//application.js require("@rails/ujs").start() require("@rails/activestorage").start() require("channels") // 追加 import { createApp } from "vue"; import App from "../src/App.vue"; import { router } from '../src/router'; import FlashMessage from '@smartweb/vue-flash-message'; document.addEventListener("DOMContentLoaded", () => { const app = createApp(App); app.use(router); app.use(FlashMessage); app.mount("#application"); });
//package.json { "name": "selftalk_app", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "^5.4.3", "@smartweb/vue-flash-message": "^1.0.0-alpha.12", "@vue/babel-plugin-jsx": "^1.1.0", "@vue/compiler-sfc": "^3.2.19", "axios": "^0.22.0", "turbolinks": "^5.2.0", "vue": "^3.2.19", "vue-loader": "^16.8.1", "vue-router": "^4.0.11", "vuex": "^4.0.2" }, "version": "0.1.0", "devDependencies": { "@babel/preset-react": "^7.14.5", "@webpack-cli/serve": "^1.5.2", "autoprefixer": "^10.3.6", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vue-jsx": "^4.0.1", "cross-env": "^7.0.3", "postcss": "^8.3.8", "tailwindcss": "^2.2.16", "webpack-dev-server": "^4.3.0" }, "description": "This README would normally document whatever steps are necessary to get the application up and running.", "main": "babel.config.js", "directories": { "lib": "lib" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/yuyahs/selftalk_app.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com/yuyahs/selftalk_app/issues" }, "homepage": "https://github.com/yuyahs/selftalk_app#readme" }
//webpacker.yml default: &default source_path: app/javascript source_entry_path: packs public_root_path: public public_output_path: packs cache_path: tmp/cache/webpacker check_yarn_integrity: false webpack_compile_output: true # Additional paths webpack should lookup modules # ['app/assets', 'engine/foo/app/assets'] resolved_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: - .mjs - .js - .sass - .scss - .css - .module.sass - .module.scss - .module.css - .png - .svg - .gif - .jpeg - .jpg - .vue - .jsx development: <<: *default compile: true # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules check_yarn_integrity: 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

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

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

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

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

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

guest

回答1

0

自己解決

npm ではなくyarnを使用してインストールしたところデプロイできました。

投稿2021/10/05 11:26

black_pasta1001

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問