Webpacker::Manifest::MissingEntryError despite being in the manifest.js

[samstickland]

Hi,

We have the following error after deploying to Heroku, using Rails 6.0.2.1 and Webpacker gem 4.2.2, rails/webpacker 4.2.2, webpack 4.41.2 and using Ruby 2.6.4

Webpacker::Manifest::MissingEntryError:
Webpacker can't find forum-info in /app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "entrypoints": {
    "forum-info": {
      "js": [
        "/packs/js/forum-info-79c4a0c398564ab51a80.js"
      ],
      "js.map": [
        "/packs/js/forum-info-79c4a0c398564ab51a80.js.map"
      ]
    },
    "general-stats": {
      "css": [
        "/packs/css/general-stats-7b7a01f2.css"
      ],
      "js": [
        "/packs/js/general-stats-5290e3f71170925bfe61.js"
      ],
      "js.map": [
        "/packs/js/general-stats-5290e3f71170925bfe61.js.map"
      ]
    }
  },
  "forum-info.js": "/packs/js/forum-info-79c4a0c398564ab51a80.js",
  "forum-info.js.map": "/packs/js/forum-info-79c4a0c398564ab51a80.js.map",
  "general-stats.css": "/packs/css/general-stats-7b7a01f2.css",
  "general-stats.js": "/packs/js/general-stats-5290e3f71170925bfe61.js",
  "general-stats.js.map": "/packs/js/general-stats-5290e3f71170925bfe61.js.map"
}

This is after adding the forum-info component. The general-stats component was functionally correctly before.

As you can see the forum-info is in the manifest.js. I've also logged into an Heroku dyno instance and confirmed that the manifest and generated JS files are there.

This all works correctly locally in dev mode.

I'm utterly stumped and don't know where I should continue my investigation. Any help would be greatly appreciated!

$ yarn list | grep webpack
├─ @rails/webpacker@4.2.2
│  ├─ case-sensitive-paths-webpack-plugin@^2.2.0
│  ├─ compression-webpack-plugin@^3.0.0
│  ├─ optimize-css-assets-webpack-plugin@^5.0.3
│  ├─ pnp-webpack-plugin@^1.5.0
│  ├─ terser-webpack-plugin@^2.2.1
│  ├─ webpack-assets-manifest@^3.1.1
│  ├─ webpack-cli@^3.3.10
│  ├─ webpack-sources@^1.4.3
│  └─ webpack@^4.41.2
├─ case-sensitive-paths-webpack-plugin@2.3.0
├─ compression-webpack-plugin@3.1.0
│  └─ webpack-sources@^1.0.1
├─ last-call-webpack-plugin@3.0.0
│  └─ webpack-sources@^1.1.0
│  └─ webpack-sources@^1.1.0
├─ optimize-css-assets-webpack-plugin@5.0.3
│  └─ last-call-webpack-plugin@^3.0.0
├─ pnp-webpack-plugin@1.6.0
├─ terser-webpack-plugin@2.3.4
│  └─ webpack-sources@^1.4.3
├─ webpack-assets-manifest@3.1.1
│  └─ webpack-sources@^1.0.0
├─ webpack-cli@3.3.10
├─ webpack-dev-middleware@3.7.2
│  └─ webpack-log@^2.0.0
├─ webpack-dev-server@3.10.3
│  ├─ webpack-dev-middleware@^3.7.2
│  ├─ webpack-log@^2.0.0
├─ webpack-log@2.0.0
├─ webpack-sources@1.4.3
├─ webpack@4.41.5
│  ├─ terser-webpack-plugin@^1.4.3
│  ├─ terser-webpack-plugin@1.4.3
│  │  ├─ webpack-sources@^1.4.0
│  ├─ webpack-sources@^1.4.1

[samstickland]

Oh.. I've made some progress on this.. it's not the JS it's complaining that it can't find in the manifest.js, it's the CSS.. So onto trying to figure out why that isn't compiled....

[jakeNiemiec]

Are you getting an error message further up in the log?

[samstickland]

Nope, no error further up.. This is the output from webpacker.. It's generating the CSS for the general-stats component (all Vue scoped CSS), but not for forum-info.

Aside from that issue, I can also see that the size of the JS is suspiciously large:

       [1/4] Resolving packages...
       success Already up-to-date.
       Done in 1.23s.
       Compiling...
       Compiled all packs in /tmp/build_5459ddfdb696550d66a9de34b765f238/public/packs
       Hash: b433cefa3c5f044e6b11
       Version: webpack 4.41.6
       Time: 34008ms
       Built at: 02/14/2020 7:49:59 PM
                                                      Asset       Size  Chunks                                Chunk Names
                             css/general-stats-48dbb5af.css  219 bytes       1  [emitted] [immutable]         general-stats
                          css/general-stats-48dbb5af.css.br   82 bytes          [emitted]                     
                          css/general-stats-48dbb5af.css.gz  135 bytes          [emitted]                     
                      js/forum-info-4429e1bb40a446e0f818.js    528 KiB       0  [emitted] [immutable]  [big]  forum-info
          js/forum-info-4429e1bb40a446e0f818.js.LICENSE.txt  181 bytes          [emitted]                     
                   js/forum-info-4429e1bb40a446e0f818.js.br     95 KiB          [emitted]                     
                   js/forum-info-4429e1bb40a446e0f818.js.gz    116 KiB          [emitted]                     
                  js/forum-info-4429e1bb40a446e0f818.js.map   1.43 MiB       0  [emitted] [dev]               forum-info
               js/forum-info-4429e1bb40a446e0f818.js.map.br    268 KiB          [emitted]              [big]  
               js/forum-info-4429e1bb40a446e0f818.js.map.gz    331 KiB          [emitted]              [big]  
                   js/general-stats-3427483fe34a0fd61d24.js    481 KiB       1  [emitted] [immutable]  [big]  general-stats
       js/general-stats-3427483fe34a0fd61d24.js.LICENSE.txt   87 bytes          [emitted]                     
                js/general-stats-3427483fe34a0fd61d24.js.br   82.8 KiB          [emitted]                     
                js/general-stats-3427483fe34a0fd61d24.js.gz    102 KiB          [emitted]                     
               js/general-stats-3427483fe34a0fd61d24.js.map   1.27 MiB       1  [emitted] [dev]               general-stats
            js/general-stats-3427483fe34a0fd61d24.js.map.br    230 KiB          [emitted]                     
            js/general-stats-3427483fe34a0fd61d24.js.map.gz    287 KiB          [emitted]              [big]  
                                              manifest.json  846 bytes          [emitted]                     
                                           manifest.json.br  206 bytes          [emitted]                     
                                           manifest.json.gz  231 bytes          [emitted]                     
       Entrypoint forum-info [big] = js/forum-info-4429e1bb40a446e0f818.js js/forum-info-4429e1bb40a446e0f818.js.map
       Entrypoint general-stats [big] = css/general-stats-48dbb5af.css js/general-stats-3427483fe34a0fd61d24.js js/general-stats-3427483fe34a0fd61d24.js.map
         [4] (webpack)/buildin/global.js 905 bytes {0} {1} [built]
         [6] ./node_modules/vue-style-loader/lib/addStylesClient.js + 1 modules 6.74 KiB {0} {1} [built]
             |    2 modules
       [144] (webpack)/buildin/module.js 552 bytes {0} {1} [built]
       [146] ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/TopicList.vue?vue&type=style&index=0&lang=scss& 716 bytes {0} [built]
       [147] ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=style&index=0&lang=scss& 712 bytes {0} [built]
       [151] ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/general-stats/views/GeneralStats.vue?vue&type=style&index=0&id=a4c78080&scoped=true&lang=css& 39 bytes {1} [built]
       [168] ./node_modules/moment/locale sync ^\.\/.*$ 3 KiB {0} {1} [optional] [built]
       [175] ./app/javascript/forum-info/views/LatestTopics/TopicList.vue?vue&type=style&index=0&lang=scss& 776 bytes {0} [built]
       [177] ./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=style&index=0&lang=scss& 768 bytes {0} [built]
       [178] ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=style&index=0&lang=scss& 834 bytes {0} [built]
       [179] ./app/javascript/general-stats/views/GeneralStats/Controls.vue?vue&type=style&index=0&id=74f9efce&scoped=true&lang=css& 874 bytes {1} [built]
       [182] ./app/javascript/general-stats/views/GeneralStats/Results.vue?vue&type=style&index=0&id=49fdb184&lang=scss&scoped=true& 820 bytes {1} [built]
       [184] ./app/javascript/general-stats/views/GeneralStats.vue?vue&type=style&index=0&id=a4c78080&scoped=true&lang=css& 852 bytes {1} [built]
       [185] ./app/javascript/packs/forum-info.js + 23 modules 63.2 KiB {0} [built]
             | ./app/javascript/packs/forum-info.js 636 bytes [built]
             | ./app/javascript/forum-info/app.js 448 bytes [built]
             | ./app/javascript/forum-info/views/LatestTopics/index.vue 528 bytes [built]
             | ./app/javascript/forum-info/api.js 233 bytes [built]
             | ./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=template&id=4cc393b2& 221 bytes [built]
             | ./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=script&lang=js& 404 bytes [built]
             | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=template&id=4cc393b2& 773 bytes [built]
             | ./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=script&lang=js& 593 bytes [built]
             | ./app/javascript/forum-info/views/LatestTopics/TopicList.vue 544 bytes [built]
             | ./app/javascript/forum-info/views/LatestTopics/TopicList.vue?vue&type=template&id=a1eda372& 225 bytes [built]
             | ./app/javascript/forum-info/views/LatestTopics/TopicList.vue?vue&type=script&lang=js& 412 bytes [built]
             | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/TopicList.vue?vue&type=template&id=a1eda372& 476 bytes [built]
             | ./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/TopicList.vue?vue&type=script&lang=js& 211 bytes [built]
             | ./app/javascript/forum-info/views/LatestTopics/Topic.vue 528 bytes [built]
             | ./app/javascript/forum-info/views/LatestTopics/Topic.vue?vue&type=template&id=0bf79929& 221 bytes [built]
             |     + 9 hidden modules
       [186] ./app/javascript/packs/general-stats.js + 23 modules 14.5 KiB {1} [built]
             | ./app/javascript/packs/general-stats.js 647 bytes [built]
             | ./app/javascript/general-stats/app.js 264 bytes [built]
             | ./app/javascript/general-stats/views/GeneralStats.vue 594 bytes [built]
             | ./app/javascript/general-stats/api.js 936 bytes [built]
             | ./app/javascript/general-stats/views/GeneralStats.vue?vue&type=template&id=a4c78080&scoped=true& 234 bytes [built]
             | ./app/javascript/general-stats/views/GeneralStats.vue?vue&type=script&lang=js& 406 bytes [built]
             | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/general-stats/views/GeneralStats.vue?vue&type=template&id=a4c78080&scoped=true& 374 bytes [built]
             | ./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/general-stats/views/GeneralStats.vue?vue&type=script&lang=js& 655 bytes [built]
             | ./app/javascript/general-stats/views/GeneralStats/Controls.vue 581 bytes [built]
             | ./app/javascript/general-stats/views/GeneralStats/Results.vue 578 bytes [built]
             | ./app/javascript/general-stats/views/GeneralStats/Controls.vue?vue&type=template&id=74f9efce&scoped=true& 236 bytes [built]
             | ./app/javascript/general-stats/views/GeneralStats/Controls.vue?vue&type=script&lang=js& 410 bytes [built]
             | ./app/javascript/general-stats/views/GeneralStats/Results.vue?vue&type=template&id=49fdb184&scoped=true& 235 bytes [built]
             | ./app/javascript/general-stats/views/GeneralStats/Results.vue?vue&type=script&lang=js& 408 bytes [built]
             | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/general-stats/views/GeneralStats/Controls.vue?vue&type=template&id=74f9efce&scoped=true& 2.42 KiB [built]
             |     + 9 hidden modules
           + 174 hidden modules
       
       WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
       This can impact web performance.
       Assets: 
         js/forum-info-4429e1bb40a446e0f818.js (528 KiB)
         js/general-stats-3427483fe34a0fd61d24.js (481 KiB)
         js/general-stats-3427483fe34a0fd61d24.js.map.gz (287 KiB)
         js/forum-info-4429e1bb40a446e0f818.js.map.gz (331 KiB)
         js/forum-info-4429e1bb40a446e0f818.js.map.br (268 KiB)
       
       WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
       Entrypoints:
         forum-info (528 KiB)
             js/forum-info-4429e1bb40a446e0f818.js
         general-stats (481 KiB)
             css/general-stats-48dbb5af.css
             js/general-stats-3427483fe34a0fd61d24.js
       
       
       WARNING in webpack performance recommendations: 
       You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
       For more info visit https://webpack.js.org/guides/code-splitting/
       Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--4-1!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/src/index.js??ref--4-2!node_modules/vue-loader/lib/index.js??vue-loader-options!app/javascript/general-stats/views/GeneralStats.vue?vue&type=style&index=0&id=a4c78080&scoped=true&lang=css&:
           Entrypoint mini-css-extract-plugin = *
           [0] ./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/general-stats/views/GeneralStats.vue?vue&type=style&index=0&id=a4c78080&scoped=true&lang=css& 1.55 KiB {0} [built]
               + 1 hidden module
       Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--4-1!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/src/index.js??ref--4-2!node_modules/vue-loader/lib/index.js??vue-loader-options!app/javascript/general-stats/views/GeneralStats/Controls.vue?vue&type=style&index=0&id=74f9efce&scoped=true&lang=css&:
           Entrypoint mini-css-extract-plugin = *
           [0] ./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/general-stats/views/GeneralStats/Controls.vue?vue&type=style&index=0&id=74f9efce&scoped=true&lang=css& 3.42 KiB {0} [built]
               + 1 hidden module
       
       Asset precompilation completed (54.51s)

[jakeNiemiec]

Can you post package.json and forum-info.js (the part relating to the styles)?

Did you follow this? (I am not an expert on the Vue flow): https://github.com/rails/webpacker/blob/master/docs/css.md#using-css-with-vue-loader

[samstickland]

Sure, this is the package.json

  "name": "hubbado",
  "licence": "UNLICENSED",
  "private": true,
  "scripts": {
    "test": "jest --config=spec/javascript/jest.config.json"
  },
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "axios": "^0.19.0",
    "domready": "^1.0.8",
    "moment": "^2.24.0",
    "pdfobject": "^2.1.1",
    "postcss-preset-env": "^6.5.0",
    "simplebar": "^5.1.0",
    "vue": "^2.6.10",
    "vue-i18n": "^8.15.3",
    "vue-loader": "^15.7.1",
    "vue-smooth-reflow": "^0.1.12",
    "vue-template-compiler": "^2.6.10"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "axios-mock-adapter": "^1.17.0",
    "babel-jest": "^25.0.0",
    "babel-loader": "^8.0.6",
    "babel-preset": "^1.0.15",
    "chance": "^1.1.3",
    "codecov": "^3.6.1",
    "given2": "^2.1.7",
    "jest": "^25.0.0",
    "vue-jest": "https://github.com/vuejs/vue-jest.git#v4.0.0-beta.2",
    "webpack-dev-server": "^3.8.2"
  }
}

and this is forum-info.js:

import domready from 'domready'
import createApp from '../forum-info/app'

domready(() => {
  for (let element of document.querySelectorAll('[data-vue="forum-info"]')) {
    element.vm = createApp(element)
  }
})

And for reference this is general-stats.js which is producing a CSS bundle:

import createApp from '../general-stats/app'

document.addEventListener('DOMContentLoaded', () => {
  for (let element of document.querySelectorAll('[data-vue="general-stats"]')) {
    element.vm = createApp(element)
  }
})

All the CSS is in .Vue files

[samstickland]

There's something odd happening with the vue-loader, I think as the CSS output is a little different for forum-info and general-stats:

       [19] ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/TopicList.vue?vue&type=style&index=0&lang=scss& 716 bytes {0} [built]
       [20] ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=style&index=0&lang=scss& 712 bytes {0} [built]
       [21] ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/general-stats/views/GeneralStats/Controls.vue?vue&type=style&index=0&id=74f9efce&scoped=true&lang=css& 39 bytes {1} [built]
       [24] ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/general-stats/views/GeneralStats.vue?vue&type=style&index=0&id=a4c78080&scoped=true&lang=css& 39 bytes {1} [built]
       [47] ./app/javascript/forum-info/views/LatestTopics/TopicList.vue?vue&type=style&index=0&lang=scss& 776 bytes {0} [built]
       [49] ./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=style&index=0&lang=scss& 768 bytes {0} [built]
       [50] ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/forum-info/views/LatestTopics/index.vue?vue&type=style&index=0&lang=scss& 834 bytes {0} [built]
       [51] ./app/javascript/general-stats/views/GeneralStats/Controls.vue?vue&type=style&index=0&id=74f9efce&scoped=true&lang=css& 874 bytes {1} [built]
       [54] ./app/javascript/general-stats/views/GeneralStats/Results.vue?vue&type=style&index=0&id=49fdb184&lang=scss&scoped=true& 820 bytes {1} [built]
       [56] ./app/javascript/general-stats/views/GeneralStats.vue?vue&type=style&index=0&id=a4c78080&scoped=true&lang=css& 852 bytes {1} [built]

There's no scoped=true for the forum-info bits.. 🤔

[samstickland]

Oh, that as just caused by scoped being missing from the style tags in forum-info.. I added that in and the output is the same now, but there's still no CSS produced.

I have however found that I can reproduce the problem locally by setting extract_css: true for development mode.

Still no closer to finding out why the CSS isn't extracted though... :/

[jakeNiemiec]

Still no closer to finding out why the CSS isn't extracted though

The problem is that MiniCssExtractPlugin is not creating a css file, or its grouping all the css together. Here are a few things I found:

webpack-contrib/mini-css-extract-plugin#113 (comment)
webpack-contrib/mini-css-extract-plugin#85 (comment)
webpack-contrib/mini-css-extract-plugin#113 (comment)
https://stackoverflow.com/questions/50416293/webpack-minicssextractplugin-doesnt-extract-file

It might be a general error with vue-loader.

Can you check to see if general-stats.css or forum-info.js contain any styles that would appear in forum-info.css?

[samstickland]

Nope, no styles there.. I've found that it seems to be interaction with sass-loader, which has been added in order to import some SCSS files containing common variables. If I remove the sass-loader config then css is generated for forum-info. This is the configuration:

config/webpack/loaders/sass.js:

module.exports = {
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        data: '@import "application/base/config";',
        includePaths: ['app/assets/stylesheets'],
      }
    }
  ]
}

and then in config/webpack/environment.js

 const { environment } = require('@rails/webpacker')
 const { VueLoaderPlugin } = require('vue-loader')
 const vue = require('./loaders/vue')
const sass = require('./loaders/sass')

 environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
 environment.loaders.prepend('vue', vue)
environment.loaders.prepend('sass', sass)

[samstickland]

I found a different approach / workaround.

Instead of using the sass-loader configuration above, I added: resolved_paths: ['app/assets/stylesheets'] in webpacker.yml and then manually imported the SCSS I needed in the view component @import '~application/base/config';

This way works with both with extract_css set to false and true, whereas the sass-loader configuration above silently fails to produce forum-info.css when extract_css is true.

[BroiSatse]

Ok, I think I found ultimate solution to the problem. The problem was caused because loaders/sass.js loader chain did not include mini-css-extract loader, as well as some other default weboacker configurations. To get around this, we can create sass configuration same way as webpacker does it:

const getStyleRule = require('@rails/webpacker/package/utils/get_style_rule')

module.exports = getStyleRule(/\.(scss|sass)(\.erb)?$/i, false, [
  {
    loader: 'sass-loader',
    options: {
      sourceMap: true,
      data: '@import "~application/base/config";',
      sassOptions: {
        includePaths: ['app/assets/stylesheets'],
      }
    }
  }
])

The above also requires:

resolved_paths: ['app/assets/stylesheets']

getStyleRule function will automatically prepend few loaders, including mini-css-extract for environment where extract_css is enabled.

[caramori]

I had the same problem with a plain simple vue rails app on Rails 6.0.3.
To reproduce
rails new vuetest2 --webpack=vue
uncomment last section of hello_vue.js
add <%= javascript_pack_tag 'hello_vue' %> to application.html.erb
add app in the html body:

 <div id='hello'>
   {{message}}
   <app></app>
 </div>