Webpacker: Loading binary files isn't working after upgrade to 4.0.0-pre.2

Created on 30 May 2018  ·  38Comments  ·  Source: rails/webpacker

Hi,

I just upgraded to 4.0.0-pre.2

Previously, I could import the url of a binary resource like this: 

import shutterSoundUrl from "audio/shutter.mp3"

But now, when I do so, I get this error:

./app/javascript/audio/shutter.mp3
Module parse failed: Unexpected character '' (1:3)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
picture coffeebite
👍1

Most helpful comment

This was my workaround:

// config/webpack/environment.js

// contents of file

// was originally /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2)$/i
// added mp3 to the list of extensions
environment.loaders.get('file').test = /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2|mp3)$/i

module.exports = environment
picture quekshuy on 1 Sep 2018
👍5 👎3

All 38 comments

Webpack it's trying to parse the mp3 file as if it were a JS file. You need to configure file-loader to handle the .mp3 extension, since by default it will only compile image and font files.

luislezcair picture luislezcair on 10 Jun 2018

Is that something that changed recently? Because I could do this with webpacker 3.x without requiring any extra configuration.

coffeebite picture coffeebite on 10 Jun 2018

Sorry, I don't know that, I'm relatively new to Wepack and webpacker.

luislezcair picture luislezcair on 10 Jun 2018
😕1 🎉1 😄1 👍1

This was my workaround:

// config/webpack/environment.js

// contents of file

// was originally /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2)$/i
// added mp3 to the list of extensions
environment.loaders.get('file').test = /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2|mp3)$/i

module.exports = environment
quekshuy picture quekshuy on 1 Sep 2018
👍5 👎3

@quekshuy thanks, this saved me a lot of headaches. Thanks for sharing.

mayordwells picture mayordwells on 30 Nov 2018

We should allow some way to add static file extensions through an API.

gauravtiwari picture gauravtiwari on 1 Dec 2018

Please use the latest RC, and feel free to open a new issue with more details if this is still an issue.

gauravtiwari picture gauravtiwari on 15 Dec 2018

Hi @gauravtiwari just upgraded to rc2, still getting this error after commenting out @quekshuy's config above.

Failed to compile.

./app/assets/sounds/outgoing-call-tune.mp3 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Same error as before.

mayordwells picture mayordwells on 15 Dec 2018

Please see: https://github.com/rails/webpacker/pull/1823/files#diff-4ac32a78649ca5bdd8e0ba38b7006a1eR17 and https://github.com/rails/webpacker/pull/1823/files#diff-d25e552f5e7833053f61dc4610f13cb7R18

You can reinstall or update the webpacker.yml to include file extensions.

gauravtiwari picture gauravtiwari on 15 Dec 2018

Okay it worked after adding .mp3 to the static_assets_extensions: but I still found it difficult to upgrade to the rc2, was on it for more than 4hrs, I've given up and gone back to 4.0.0-pre.3 for now.

I think we need to find a way to properly document the upgrade process.

Here's what I did that was unsuccessful:
First I don't know where exactly to put the babel.config.js file so I copy pasted the content of .babelrc and saved it in the root of the project, but that did not work:

Here's what it looks like (in the js file I removed the " " on presets and plugins), I also added the :

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "node": "10"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ]
}

I currently don't have a .postcssrc file. But I do have a .postcssrc.yml here's what it looks like:

plugins:
  postcss-import: {}
  postcss-cssnext: {}

However, I ignored that and created a postcss.config.js and add the config from here

I also added the content here to the babel.config.js file.

Our app is es6 heavy. Is there anything I'm missing on that end?

Added this to my environment.js

environment.splitChunks()

added this to webpacker.yml, for .mp3 file and this removed the error that I reported earlier. 

  static_assets_extensions:
    - .pdf
    - .mp3

The problem I encountered is that after doing all of that I started getting a node-sass build error, then I added node-sass v4.11.0 which made the error disappear. Then after this, I got the generic manifest error and the page fails to load.

I have downgraded back to the older version but I'm willing to try again if there's anything I'm doing wrong, can you pls point it out?

mayordwells picture mayordwells on 17 Dec 2018

@mayordwells Yes, we definitely need to work on a good upgrade guide, but for now, have you tried reinstalling webpacker?

If you haven't got a lot of custom code in your webpack.js or babel config. You could simply re-run the relevant installers (base, react or angular etc.) and replace all the existing configs. Perhaps, makes sense to make a copy of development.old.js or webpacker.old.yml and later you can copy any missing config.

gauravtiwari picture gauravtiwari on 17 Dec 2018

@gauravtiwari thanks for your prompt response, that's a very good idea. I'll give that a try now and then update you on the outcome.

mayordwells picture mayordwells on 17 Dec 2018

No worries :), also make sure to remove old .babelrc and .postcssrc after install.

gauravtiwari picture gauravtiwari on 17 Dec 2018

Also, forgot to mention, please upgrade both gem and npm package, before running installers. 

bundle install (rc version)
yarn add @rails/webpacker@next
gauravtiwari picture gauravtiwari on 17 Dec 2018

@gauravtiwari yes i already did all that, getting a strange error now.

import App from '../src/components';

ERROR in ./app/javascript/packs/application.js
webpacker_1  | Module build failed (from ./node_modules/babel-loader/lib/index.js):
webpacker_1  | SyntaxError: /conectar/app/javascript/packs/application.js: Unexpected token (65:4)

I don't know what happened but it looks like my import statement is not working.

mayordwells picture mayordwells on 17 Dec 2018

Did you remove old babelrc and also, is babel.config.js is in place?

gauravtiwari picture gauravtiwari on 17 Dec 2018

Did you remove old babelrc and also, is babel.config.js is in place?

yes i did. and yes, babel.config.js is in place. also removed .postccsrc.yml

mayordwells picture mayordwells on 17 Dec 2018

Could you check if you are using the rc version inside package.json? Also, rm -rf node_modules and re-run yarn install

gauravtiwari picture gauravtiwari on 17 Dec 2018

Could you check if you are using the rc version inside package.json? Also, rm -rf node_modules and re-run yarn install

Okay let me do that. thanks

mayordwells picture mayordwells on 17 Dec 2018

Are you using angular or react?

gauravtiwari picture gauravtiwari on 17 Dec 2018

Are you using angular or react?

react.

mayordwells picture mayordwells on 17 Dec 2018

Make sure, babel config has relevant preset included after upgrade.

gauravtiwari picture gauravtiwari on 17 Dec 2018

The installer should have done it if you have run: webpacker:install and webpacker:install:react

gauravtiwari picture gauravtiwari on 17 Dec 2018

Make sure, babel config has relevant preset included after upgrade.

just using the same default presets that came with this webpacker:install but i'd try to run this webpacker:install:react too now

mayordwells picture mayordwells on 17 Dec 2018

yes please since you are using react, both commands needs to be run

gauravtiwari picture gauravtiwari on 17 Dec 2018

So @gauravtiwari it worked. It wasn't all that complicated after all. Thank you very much.

But quick question, we had this in bin/webpack - ENV["NODE_ENV"] ||= ENV["NODE_ENV"] || "development"

But after upgrading we now have this - ENV["NODE_ENV"] ||= "development" same in bin/webpack-dev-server file, does that affect node_env in production when deployed?

mayordwells picture mayordwells on 17 Dec 2018

Awesome 🎉 great work 👏

No, that should be fine, the compilation is handled by assets:precompile or webpacker:compile. If you are running manually, make sure to set NODE_ENV=production ./bin/webpack (pass other env as required)

gauravtiwari picture gauravtiwari on 17 Dec 2018

The simple process for a major upgrade is:

  1. Make backups if you have changed webpack or babel configs (webpacker.old.yml etc.)
  2. Upgrade both gem and npm package (check gemfile.lock and package.json to ensure it's correct)
  3. Re-run all the installers you have run in the beginning. webpacker:install webpacker:install:react etc. (the ones applies to your app)
  4. Apply the old changes to new configs
  5. Test everything works

Might want to document this in Readme.

gauravtiwari picture gauravtiwari on 17 Dec 2018

After deploying to our staging environment I got this. And the home is not loading because of that. But it works well on the development environment. Please take a look @gauravtiwari 

2018-12-17T10:43:54.581203+00:00 app[web.1]: 10:43:54 web.1    |   "application.js": "/packs/application-3ddd3bb718c354dd75b0.chunk.js",
2018-12-17T10:43:54.581315+00:00 app[web.1]: 10:43:54 web.1    |   "application.js.map": "/packs/application-3ddd3bb718c354dd75b0.chunk.js.map",
2018-12-17T10:43:54.581452+00:00 app[web.1]: 10:43:54 web.1    |   "entrypoints": {
2018-12-17T10:43:54.581563+00:00 app[web.1]: 10:43:54 web.1    |     "application": {
2018-12-17T10:43:54.581685+00:00 app[web.1]: 10:43:54 web.1    |       "js": [
2018-12-17T10:43:54.581811+00:00 app[web.1]: 10:43:54 web.1    |         "/packs/runtime~application-b7cdb0272753cda5448b.js",
2018-12-17T10:43:54.581941+00:00 app[web.1]: 10:43:54 web.1    |         "/packs/2-bcec74fb20e2dd034acb.chunk.js",
2018-12-17T10:43:54.582073+00:00 app[web.1]: 10:43:54 web.1    |         "/packs/application-3ddd3bb718c354dd75b0.chunk.js"
2018-12-17T10:43:54.582203+00:00 app[web.1]: 10:43:54 web.1    |       ],
2018-12-17T10:43:54.582327+00:00 app[web.1]: 10:43:54 web.1    |       "js.map": [
2018-12-17T10:43:54.582459+00:00 app[web.1]: 10:43:54 web.1    |         "/packs/runtime~application-b7cdb0272753cda5448b.js.map",
2018-12-17T10:43:54.582632+00:00 app[web.1]: 10:43:54 web.1    |         "/packs/2-bcec74fb20e2dd034acb.chunk.js.map",
2018-12-17T10:43:54.582750+00:00 app[web.1]: 10:43:54 web.1    |         "/packs/application-3ddd3bb718c354dd75b0.chunk.js.map"
2018-12-17T10:43:54.582892+00:00 app[web.1]: 10:43:54 web.1    |       ]
2018-12-17T10:43:54.583042+00:00 app[web.1]: 10:43:54 web.1    |     }
2018-12-17T10:43:54.583163+00:00 app[web.1]: 10:43:54 web.1    |   },
2018-12-17T10:43:54.583280+00:00 app[web.1]: 10:43:54 web.1    |   "runtime~application.js": "/packs/runtime~application-b7cdb0272753cda5448b.js",
2018-12-17T10:43:54.583424+00:00 app[web.1]: 10:43:54 web.1    |   "runtime~application.js.map": "/packs/runtime~application-b7cdb0272753cda5448b.js.map"
2018-12-17T10:43:54.583577+00:00 app[web.1]: 10:43:54 web.1    | }
2018-12-17T10:43:54.583724+00:00 app[web.1]: 10:43:54 web.1    | ):
2018-12-17T10:43:54.584278+00:00 app[web.1]: 10:43:54 web.1    | F, [2018-12-17T10:43:54.584077 #23] FATAL -- : [9d92b95b-b9db-4fb7-87f1-6c827b2a7063]     28:     = favicon_link_tag asset_path 'favicons/favicon-96x96.png', rel: 'icon', type: 'image/png'
2018-12-17T10:43:54.584398+00:00 app[web.1]: 10:43:54 web.1    | [9d92b95b-b9db-4fb7-87f1-6c827b2a7063]     29:     = csrf_meta_tags
2018-12-17T10:43:54.584543+00:00 app[web.1]: 10:43:54 web.1    | [9d92b95b-b9db-4fb7-87f1-6c827b2a7063]     30:     %link{ href: "//fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,700", rel: "stylesheet" }
2018-12-17T10:43:54.584677+00:00 app[web.1]: 10:43:54 web.1    | [9d92b95b-b9db-4fb7-87f1-6c827b2a7063]     31:     = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'
2018-12-17T10:43:54.584796+00:00 app[web.1]: 10:43:54 web.1    | [9d92b95b-b9db-4fb7-87f1-6c827b2a7063]     32:     -# for the application.js in assets folder
2018-12-17T10:43:54.584945+00:00 app[web.1]: 10:43:54 web.1    | [9d92b95b-b9db-4fb7-87f1-6c827b2a7063]     33:     = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
2018-12-17T10:43:54.585079+00:00 app[web.1]: 10:43:54 web.1    | [9d92b95b-b9db-4fb7-87f1-6c827b2a7063]     34:     -# for the application.js in packs folder
2018-12-17T10:43:54.585291+00:00 app[web.1]: 10:43:54 web.1    | F, [2018-12-17T10:43:54.585123 #23] FATAL -- : [9d92b95b-b9db-4fb7-87f1-6c827b2a7063]   
2018-12-17T10:43:54.585571+00:00 app[web.1]: 10:43:54 web.1    | F, [2018-12-17T10:43:54.585346 #23] FATAL -- : [9d92b95b-b9db-4fb7-87f1-6c827b2a7063] app/views/layouts/application.html.haml:31:in `_app_views_layouts_application_html_haml__1557640184685260542_47444431109700'
mayordwells picture mayordwells on 17 Dec 2018

Could you share full-stack trace, please?

gauravtiwari picture gauravtiwari on 17 Dec 2018

Is NODE_ENV set to production? It should always be production if not development.

gauravtiwari picture gauravtiwari on 17 Dec 2018

Is NODE_ENV set to production? It should always be production if not development.

yes it is set to production.

Full stack trace:

2018-12-17T11:18:40.052966+00:00 app[web.1]: 11:18:40 web.1    | I, [2018-12-17T11:18:40.051846 #23]  INFO -- : [e89618ca-35f2-48f0-83bc-00dca0224884] Started GET "/" for 173.199.120.251 at 2018-12-17 11:18:40 +0000
2018-12-17T11:18:40.115405+00:00 app[web.1]: 11:18:40 web.1    | D, [2018-12-17T11:18:40.114866 #23] DEBUG -- : [e89618ca-35f2-48f0-83bc-00dca0224884]   User Load (2.5ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY created_at ASC LIMIT $2  [["id", "25369b6b-2655-4b4b-9761-2085d73d1a5b"], ["LIMIT", 1]]
2018-12-17T11:18:40.135033+00:00 app[web.1]: 11:18:40 web.1    | I, [2018-12-17T11:18:40.134665 #23]  INFO -- : [e89618ca-35f2-48f0-83bc-00dca0224884] Processing by UsersController#dashboard as HTML
2018-12-17T11:18:40.145970+00:00 app[web.1]: 11:18:40 web.1    | D, [2018-12-17T11:18:40.145595 #23] DEBUG -- : [e89618ca-35f2-48f0-83bc-00dca0224884]   User Load (1.4ms)  SELECT "users".* FROM "users" WHERE "users"."referred_by_id" = $1 ORDER BY created_at ASC  [["referred_by_id", "25369b6b-2655-4b4b-9761-2085d73d1a5b"]]
2018-12-17T11:18:40.149804+00:00 app[web.1]: 11:18:40 web.1    | I, [2018-12-17T11:18:40.149540 #23]  INFO -- : [e89618ca-35f2-48f0-83bc-00dca0224884]   Rendering users/dashboard.html.haml within layouts/application
2018-12-17T11:18:40.150265+00:00 app[web.1]: 11:18:40 web.1    | I, [2018-12-17T11:18:40.150020 #23]  INFO -- : [e89618ca-35f2-48f0-83bc-00dca0224884]   Rendered users/dashboard.html.haml within layouts/application (0.1ms)
2018-12-17T11:18:40.155443+00:00 app[web.1]: 11:18:40 web.1    | I, [2018-12-17T11:18:40.155206 #23]  INFO -- : [e89618ca-35f2-48f0-83bc-00dca0224884] Completed 500 Internal Server Error in 20ms (ActiveRecord: 1.4ms)
2018-12-17T11:18:40.203780+00:00 app[web.1]: 11:18:40 web.1    | I, [2018-12-17T11:18:40.203388 #23]  INFO -- : [e89618ca-35f2-48f0-83bc-00dca0224884] [Rollbar] Scheduling item
2018-12-17T11:18:40.241540+00:00 app[web.1]: 11:18:40 web.1    | I, [2018-12-17T11:18:40.239789 #23]  INFO -- : [e89618ca-35f2-48f0-83bc-00dca0224884] [Rollbar] Details: https://rollbar.com/instance/uuid?uuid=124bdb8f-a8eb-4f15-9cc5-599a87236172 (only available if report was successful)
2018-12-17T11:18:40.241638+00:00 app[web.1]: 11:18:40 worker.1 | I, [2018-12-17T11:18:40.240646 #13]  INFO -- : [Rollbar] Sending item
2018-12-17T11:18:40.243658+00:00 app[web.1]: 11:18:40 web.1    | F, [2018-12-17T11:18:40.241839 #23] FATAL -- : [e89618ca-35f2-48f0-83bc-00dca0224884]   
2018-12-17T11:18:40.243786+00:00 app[web.1]: 11:18:40 web.1    | F, [2018-12-17T11:18:40.241921 #23] FATAL -- : [e89618ca-35f2-48f0-83bc-00dca0224884] ActionView::Template::Error (Webpacker can't find application in /conectar/public/packs/manifest.json. Possible causes:
2018-12-17T11:18:40.243924+00:00 app[web.1]: 11:18:40 web.1    | 1. You want to set webpacker.yml value of compile to true for your environment
2018-12-17T11:18:40.244037+00:00 app[web.1]: 11:18:40 web.1    |    unless you are using the `webpack -w` or the webpack-dev-server.
2018-12-17T11:18:40.244148+00:00 app[web.1]: 11:18:40 web.1    | 2. webpack has not yet re-run to reflect updates.
2018-12-17T11:18:40.244258+00:00 app[web.1]: 11:18:40 web.1    | 3. You have misconfigured Webpacker's config/webpacker.yml file.
2018-12-17T11:18:40.244367+00:00 app[web.1]: 11:18:40 web.1    | 4. Your webpack configuration is not creating a manifest.
2018-12-17T11:18:40.244480+00:00 app[web.1]: 11:18:40 web.1    | Your manifest contains:
2018-12-17T11:18:40.244675+00:00 app[web.1]: 11:18:40 web.1    | {
2018-12-17T11:18:40.244861+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/charlie.png": "/packs/_/assets/images/charlie-d8f9239c28852f017494174e83cc05f9.png",
2018-12-17T11:18:40.245011+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/chat_bg.svg": "/packs/_/assets/images/chat_bg-f625ba6105b178ad5e131728386abcc7.svg",
2018-12-17T11:18:40.245163+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/cover-photo.jpg": "/packs/_/assets/images/cover-photo-0610dd5ca5ff91bb8b93559a71976b48.jpg",
2018-12-17T11:18:40.245487+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/[email protected]": "/packs/_/assets/images/[email protected]",
2018-12-17T11:18:40.245655+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/forgot_password.svg": "/packs/_/assets/images/forgot_password-bfa3c517d15e7c10a8d0378519ed747a.svg",
2018-12-17T11:18:40.245807+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/jessica.png": "/packs/_/assets/images/jessica-2d11ad1138231e99208f9dab4f650cbe.png",
2018-12-17T11:18:40.245942+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/luno.png": "/packs/_/assets/images/luno-b75f09960866157ce2d92a9aafceaba9.png",
2018-12-17T11:18:40.246098+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/matthew.png": "/packs/_/assets/images/matthew-046e91f77483a277a434bac9ae4885e2.png",
2018-12-17T11:18:40.246245+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/micah.png": "/packs/_/assets/images/micah-5363de53229ca172048d94b6e952a615.png",
2018-12-17T11:18:40.246397+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/nicole.png": "/packs/_/assets/images/nicole-56b30993157523aaf70c2e4278ebd9ca.png",
2018-12-17T11:18:40.246553+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/ricardo.png": "/packs/_/assets/images/ricardo-430f22333ca86aea644ff301a77333d1.png",
2018-12-17T11:18:40.246708+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/sandy.png": "/packs/_/assets/images/sandy-e33b0498f404162abf3b7344be778efb.png",
2018-12-17T11:18:40.246862+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/short-course__play-video--thumbnail.jpg": "/packs/_/assets/images/short-course__play-video--thumbnail-33380daebc12e9d0e8ed81f2f67d4344.jpg",
2018-12-17T11:18:40.247019+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/tutorprofile/comprehension.png": "/packs/_/assets/images/tutorprofile/comprehension-20ae2ca3db3d4f1a0406105748093dde.png",
2018-12-17T11:18:40.247378+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/tutorprofile/concord.png": "/packs/_/assets/images/tutorprofile/concord-eb0bd8797018a4c671dad0441903d7c3.png",
2018-12-17T11:18:40.247547+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/tutorprofile/context.jpg": "/packs/_/assets/images/tutorprofile/context-09064713720ae17797fe21193b0b5a02.jpg",
2018-12-17T11:18:40.247808+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/tutorprofile/essay.jpg": "/packs/_/assets/images/tutorprofile/essay-a31abca3ca975283ce231cb1b302b916.jpg",
2018-12-17T11:18:40.248145+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/tutorprofile/figures.png": "/packs/_/assets/images/tutorprofile/figures-3eca1a121b40203807c4431c5a0ad3a8.png",
2018-12-17T11:18:40.248399+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/tutorprofile/words.jpg": "/packs/_/assets/images/tutorprofile/words-16b60a38fd1ee1b1745242813cf4622b.jpg",
2018-12-17T11:18:40.248702+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/images/yugo.png": "/packs/_/assets/images/yugo-34c98dbd6e857da8b03422a6e518a4d2.png",
2018-12-17T11:18:40.248886+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/sounds/incoming-call-tune.mp3": "/packs/_/assets/sounds/incoming-call-tune-aa55025ccfd9418cb60a9dd96dc639bd.mp3",
2018-12-17T11:18:40.249581+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/sounds/notification-tune.mp3": "/packs/_/assets/sounds/notification-tune-90a6d5af1ca2c7dc0bd195127594dc56.mp3",
2018-12-17T11:18:40.249936+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/sounds/outgoing-call-tune.mp3": "/packs/_/assets/sounds/outgoing-call-tune-90843f2d0f9b670ac93c7d58f8f40857.mp3",
2018-12-17T11:18:40.250439+00:00 app[web.1]: 11:18:40 web.1    |   "_/assets/stylesheets/css/semantic-ui-css/themes/default/assets/images/flags.png": "/packs/_/assets/stylesheets/css/semantic-ui-css/themes/default/assets/images/flags-9c74e172f87984c48ddf5c8108cabe67.png",
2018-12-17T11:18:40.251127+00:00 app[web.1]: 11:18:40 web.1    |   "application.js": "/packs/application-3ddd3bb718c354dd75b0.chunk.js",
2018-12-17T11:18:40.251513+00:00 app[web.1]: 11:18:40 web.1    |   "application.js.map": "/packs/application-3ddd3bb718c354dd75b0.chunk.js.map",
2018-12-17T11:18:40.251987+00:00 app[web.1]: 11:18:40 web.1    |   "entrypoints": {
2018-12-17T11:18:40.252509+00:00 app[web.1]: 11:18:40 web.1    |     "application": {
2018-12-17T11:18:40.253195+00:00 app[web.1]: 11:18:40 web.1    |       "js": [
2018-12-17T11:18:40.253711+00:00 app[web.1]: 11:18:40 web.1    |         "/packs/runtime~application-b7cdb0272753cda5448b.js",
2018-12-17T11:18:40.254195+00:00 app[web.1]: 11:18:40 web.1    |         "/packs/2-bcec74fb20e2dd034acb.chunk.js",
2018-12-17T11:18:40.254330+00:00 app[web.1]: 11:18:40 web.1    |         "/packs/application-3ddd3bb718c354dd75b0.chunk.js"
2018-12-17T11:18:40.256833+00:00 app[web.1]: 11:18:40 web.1    |       ],
2018-12-17T11:18:40.256949+00:00 app[web.1]: 11:18:40 web.1    |       "js.map": [
2018-12-17T11:18:40.259078+00:00 app[web.1]: 11:18:40 web.1    |         "/packs/runtime~application-b7cdb0272753cda5448b.js.map",
2018-12-17T11:18:40.259235+00:00 app[web.1]: 11:18:40 web.1    |         "/packs/2-bcec74fb20e2dd034acb.chunk.js.map",
2018-12-17T11:18:40.259382+00:00 app[web.1]: 11:18:40 web.1    |         "/packs/application-3ddd3bb718c354dd75b0.chunk.js.map"
2018-12-17T11:18:40.259528+00:00 app[web.1]: 11:18:40 web.1    |       ]
2018-12-17T11:18:40.259644+00:00 app[web.1]: 11:18:40 web.1    |     }
2018-12-17T11:18:40.263672+00:00 app[web.1]: 11:18:40 web.1    |   },
2018-12-17T11:18:40.263805+00:00 app[web.1]: 11:18:40 web.1    |   "runtime~application.js": "/packs/runtime~application-b7cdb0272753cda5448b.js",
2018-12-17T11:18:40.263916+00:00 app[web.1]: 11:18:40 web.1    |   "runtime~application.js.map": "/packs/runtime~application-b7cdb0272753cda5448b.js.map"
2018-12-17T11:18:40.264045+00:00 app[web.1]: 11:18:40 web.1    | }
2018-12-17T11:18:40.264720+00:00 app[web.1]: 11:18:40 web.1    | ):
2018-12-17T11:18:40.264841+00:00 app[web.1]: 11:18:40 web.1    | F, [2018-12-17T11:18:40.242311 #23] FATAL -- : [e89618ca-35f2-48f0-83bc-00dca0224884]     28:     = favicon_link_tag asset_path 'favicons/favicon-96x96.png', rel: 'icon', type: 'image/png'
2018-12-17T11:18:40.264948+00:00 app[web.1]: 11:18:40 web.1    | [e89618ca-35f2-48f0-83bc-00dca0224884]     29:     = csrf_meta_tags
2018-12-17T11:18:40.265055+00:00 app[web.1]: 11:18:40 web.1    | [e89618ca-35f2-48f0-83bc-00dca0224884]     30:     %link{ href: "//fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,700", rel: "stylesheet" }
2018-12-17T11:18:40.265165+00:00 app[web.1]: 11:18:40 web.1    | [e89618ca-35f2-48f0-83bc-00dca0224884]     31:     = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'
2018-12-17T11:18:40.265270+00:00 app[web.1]: 11:18:40 web.1    | [e89618ca-35f2-48f0-83bc-00dca0224884]     32:     -# for the application.js in assets folder
2018-12-17T11:18:40.265378+00:00 app[web.1]: 11:18:40 web.1    | [e89618ca-35f2-48f0-83bc-00dca0224884]     33:     = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
2018-12-17T11:18:40.265502+00:00 app[web.1]: 11:18:40 web.1    | [e89618ca-35f2-48f0-83bc-00dca0224884]     34:     -# for the application.js in packs folder
2018-12-17T11:18:40.265610+00:00 app[web.1]: 11:18:40 web.1    | F, [2018-12-17T11:18:40.242376 #23] FATAL -- : [e89618ca-35f2-48f0-83bc-00dca0224884]   
2018-12-17T11:18:40.265720+00:00 app[web.1]: 11:18:40 web.1    | F, [2018-12-17T11:18:40.242429 #23] FATAL -- : [e89618ca-35f2-48f0-83bc-00dca0224884] app/views/layouts/application.html.haml:31:in `_app_views_layouts_application_html_haml__1557640184685260542_47444431109700'
2018-12-17T11:18:40.244194+00:00 heroku[router]: at=info method=GET path="/" host=staging.conectar.ru request_id=e89618ca-35f2-48f0-83bc-00dca0224884 fwd="173.199.120.251" dyno=web.1 connect=0ms service=198ms status=500 bytes=1914 protocol=https
2018-12-17T11:18:40.466262+00:00 app[web.1]: 11:18:40 worker.1 | I, [2018-12-17T11:18:40.465835 #13]  INFO -- : [Rollbar] Success
mayordwells picture mayordwells on 17 Dec 2018

Could you make sure all paths in webpacker.yml is correct?

Locally, I would suggest using the on-demand compiler to see if you can reproduce. So, don't run the dev server, rm -rf public/packs and then just run bundle exec rails s locally.

gauravtiwari picture gauravtiwari on 17 Dec 2018

was able to fix this by removing public/packs like you said, this issue #532 helped me understand the reason behind that even better and I was able to figure out that the problem is right in the logs, after exploring further, I noticed that webpacker was looking for a config in webpacker.yml for staging, so I added this, basically same config as that of the production env.

staging:
  <<: *default
  compile: false
  extract_css: true
  cache_manifest: true

Everything works fine now, both on staging and production.

mayordwells picture mayordwells on 17 Dec 2018

Nice 👍

gauravtiwari picture gauravtiwari on 17 Dec 2018

@gauravtiwari FYI this line extract_css: true from webpacker.yml caused a problem on staging and production.

Don't know why. But how I found out was strange.
First I committed like this without extract_css: true and then I committed with it.

staging:
  <<: *default
  compile: false
  cache_manifest: true

Our app only worked in production and staging without that line.

mayordwells picture mayordwells on 18 Dec 2018

Right, is extract_css: true not working for you? This flag basically, tells whether or not to extract styles into a separate file or serve with JS itself.

gauravtiwari picture gauravtiwari on 18 Dec 2018

Right, is extract_css: true not working for you? This flag basically, tells whether or not to extract styles into a separate file or serve with JS itself.

yea it didn't work for me, even though I have no idea why. Looks like some extra config is necessary to make it work.

mayordwells picture mayordwells on 18 Dec 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

vtno picture vtno  ·  3Comments
amandapouget picture amandapouget  ·  3Comments
naps62 picture naps62  ·  3Comments
pioz picture pioz  ·  3Comments
suhomozgy-andrey picture suhomozgy-andrey  ·  3Comments