前提・実現したいこと
manifest.jsで定義されているファイル名の、jsが生成されません
ビルドしたところ、public/packs以下にcssファイルとjsファイル、manifest.jsonは生成されるのですが、jsファイルだけネームが違います
開発環境では、webpacker_dev_serverを使用することで問題なく機能しているのですが、herokuデプロイ時に、ページを開こうとするとwebpackerのActionView::Template::Errorが出ており、おそらくこのエラーもjsファイルが生成されないことが原因ではないかと思ってます。
manifest.jsonで定義されているファイルと、実際に生成されたファイルが違うというのはわかるのですが、解決方法がわからず苦戦しております。
お心当たりのある方、過去に同様の問題に出会って解決した経験のある方いらっしゃいましたら、ご教授お願いいたします。
該当のソースコード
###manifest.json
{ "application.css": "/packs/css/application-6e38df4d.css", "application.css.map": "/packs/css/application-6e38df4d.css.map", "application.js": "/packs/application-c041cdca59b53f1b1ad7.js", "application.js.map": "/packs/application-c041cdca59b53f1b1ad7.js.map", "entrypoints": { "application": { "css": [ "/packs/css/application-6e38df4d.css" ], "js": [ "/packs/application-c041cdca59b53f1b1ad7.js" ], "css.map": [ "/packs/css/application-6e38df4d.css.map" ], "js.map": [ "/packs/application-c041cdca59b53f1b1ad7.js.map" ] } } }
上記manifest.jsonで実際に生成されたファイル名
/packs/application-ba3f382ecddda9df7c24.js
/packs/application-ba3f382ecddda9df7c24.js.map
###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: true 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 development: <<: *default compile: true # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules check_yarn_integrity: false # Reference: https://webpack.js.org/configuration/dev-server/ dev_server: https: false host: webpack port: 3035 public: localhost:3035 hmr: true # 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
###docker-compose.yml
version: '3' services: web: &app_base build: . command: > bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" environment: WEBPACKER_DEV_SERVER_HOST: webpack volumes: - .:/docker_dog - /docker_dog/node_modules/ ports: - "3000:3000" - "1234:1234" - "26162:26162" depends_on: - db stdin_open: true tty: true webpack: <<: *app_base command: bash -c "rm -rf /app/public/packs && bundle exec rake webpacker:clobber && ./bin/webpack && ./bin/webpack-dev-server " ports: - 3035:3035 depends_on: - web
試したこと
$bundle exec rake webpacker:clobber
docker-compose.ymlのwebpackのコマンドにbundle exec rake webpacker:clobber && ./bin/webpack
を追加
補足情報(FW/ツールのバージョンなど)
ruby '2.7.0'
Rails '6.0.2.2'
yarn '1.22.4'
webpacker '4.2.2'
あなたの回答
tips
プレビュー