title: webpacker 5 complains "Failed to mount component: template or render function not defined"
body: <p>I am using @rails/webpacker of version 5.4.3 with webpacker gems of version '~&gt; 5.0'. Previously I was using webpacker 4 and it was working. However, switching to webpacker 5 is creating multiple issues and not sure if it's due to <code>extract_css</code>. If extract_css is false in webpacker.yml I get below issue where it says &quot;Failed to mount component: template or render function not defined&quot;<a href="https://i.stack.imgur.com/sWwIE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sWwIE.png" alt="enter image description here" /></a></p>
  <p>This is how I have my webpack setup</p>
  <p>config/webpack/loaders/vue.js</p>
  <pre><code>const { dev_server: devServer } = require('@rails/webpacker').config;
  
  const isProduction = process.env.NODE_ENV === 'production';
  const inDevServer = process.argv.find((v) =&gt; v.includes('webpack-dev-server'));
  const extractCSS = !(inDevServer &amp;&amp; devServer &amp;&amp; devServer.hmr) || isProduction;
  
  module.exports = {
    test: /\.vue(\.erb)?$/,
    use: [
      {
        loader: 'vue-loader',
        options: { extractCSS, compilerOptions: { whitespace: 'condense' } },
      },
    ],
  };
  </code></pre>
  <p>webpacker.yml</p>
  <pre><code>default: &amp;default
    public_root_path: public
    check_yarn_integrity: false
    source_path: app/javascript
    source_entry_path: packs
    public_output_path: packs
    cache_path: tmp/cache/webpacker
    extract_css: 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
  
    static_assets_extensions:
      - .jpg
      - .jpeg
      - .png
      - .gif
      - .tiff
      - .ico
      - .svg
      - .eot
      - .otf
      - .ttf
      - .woff
      - .woff2
  
    extensions:
      - .vue
      - .js
      - .sass
      - .scss
      - .css
      - .png
      - .svg
      - .gif
      - .jpeg
      - .jpg
  
  development:
    &lt;&lt;: *default
    compile: true
  
    # Reference: https://webpack.js.org/configuration/dev-server/
    dev_server:
      https: false
      host: localhost
      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:
        &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;
      watch_options:
        ignored: &quot;**/node_modules/**&quot;
  
  test:
    &lt;&lt;: *default
    compile: true
    # Compile test packs to a separate directory
    public_output_path: packs-test
  
  staging:
    &lt;&lt;: *default
    # Production depends on precompilation of packs prior to booting for performance.
    compile: false
    # Cache manifest.json for performance
    cache_manifest: true
    webpack_compile_output: false
  
  production:
    &lt;&lt;: *default
    # Production depends on precompilation of packs prior to booting for performance.
    compile: false
    # Cache manifest.json for performance
    cache_manifest: true
    # Extract and emit a css file
    extract_css: true
    webpack_compile_output: false
  </code></pre>
  <p>config/webpack/environment.js</p>
  <pre><code>const { environment } = require('@rails/webpacker');
  const vue = require('./loaders/vue');
  const webpack = require('webpack');
  const VueLoaderPlugin = require('vue-loader/lib/plugin');
  const TerserPlugin = require('terser-webpack-plugin');
  const path = require('path');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  // const { sass } = require('@rails/webpacker/package/rules');
  
  const isEnvProduction = environment.config.mode === 'production';
  const isEnvDevelopment = environment.config.mode === 'development';
  const cssRegex = /\.css$/;
  const cssModuleRegex = /\.module\.css$/;
  
  const customConfig = {
    resolve: {
      fallback: {
        dgram: false,
        fs: false,
        net: false,
        tls: false,
        child_process: false,
      },
    },
    entry: {
      vendor: ['babel-polyfill', 'vue', 'moment', 'axios'],
    },
  };
  
  const getStyleLoaders = (cssOptions) =&gt; {
    const loaders = [
      isEnvDevelopment &amp;&amp; require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
    ].filter(Boolean);
    return loaders;
  };
  
  const customCssLoaderOptions = {
    localIdentName: '[name]__[local]--[hash:base64:5]',
    // minimize: environment.NODE_ENV === 'production',
    modules: true,
  };
  
  environment.splitChunks((config) =&gt; {
    return {
      ...config,
      ...{
        optimization: {
          splitChunks: { chunks: 'all', name: '~' },
          runtimeChunk: true,
        },
      },
    };
  });
  
  environment.config.delete('node.dgram');
  environment.config.delete('node.fs');
  environment.config.delete('node.net');
  environment.config.delete('node.tls');
  environment.config.delete('node.child_process');
  environment.loaders.delete('css');
  environment.config.merge(customConfig);
  
  environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin());
  environment.loaders.append('vue', {
    test: /\.vue$/,
    loader: 'vue-loader',
  });
  
  // Comment this if you need case-sensitive-paths-plugin in local development.
  if (process.env.RAILS_ENV === 'development') {
    environment.plugins.delete('CaseSensitivePaths');
  
    // Only add en.js locale for local development.
    environment.plugins.append('moment', new webpack.ContextReplacementPlugin(/moment[/\\]locale/, /(en).js/));
  }
  
  environment.plugins.prepend('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))));
  environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery',
    })
  );
  
  const config = environment.toWebpackConfig();
  
  config.resolve.alias = {
    jquery: 'jquery/src/jquery',
  };
  
  let sassLoader = environment.loaders.get('sass').use.find((item) =&gt; item.loader === 'sass-loader');
  sassLoader = {
    ...sassLoader,
    options: {
      ...sassLoader.options,
      sassOptions: {
        ...sassLoader.options.sassOptions,
        includePaths: ['./node_modules'],
      },
    },
  };
  
  // const CSSLoader = environment.loaders.get('sass').use.find(el =&gt; el.loader === 'css-loader')
  // CSSLoader.options = {...CSSLoader.options, customCssLoaderOptions}
  
  // let miniCssExtractPlugin = environment.plugins.get('MiniCssExtract');
  // console.log('miniCssExtractPlugin', miniCssExtractPlugin)
  
  environment.loaders.append('vue', vue);
  
  environment.config.merge({
    optimization: {
      minimize: false, // should be isProduction
      minimizer: [
        new TerserPlugin({
          test: /\.js(\?.*)?$/i,
        }),
      ],
    },
    resolve: {
      alias: {
        app: path.resolve(__dirname, '../../app/'),
      },
    },
    module: {
      rules: [
        {
          oneOf: [
            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: false,
                modules: {
                  mode: 'icss',
                },
              }),
              sideEffects: true,
            },
          ],
        },
      ].filter(Boolean),
    },
  });
  
  module.exports = environment;
  </code></pre>
  <p>If I turn extract_css to true in default section and recompile I get this issue</p>
  <blockquote>
  <p>Webpacker can't find construction_project_home_module.css in
  'public/packs/manifest.json. Possible causes:'</p>
  <ol>
  <li>You want to set webpacker.yml value of compile to true for your environment    unless you are using the <code>webpack -w</code> or the
  webpack-dev-server.</li>
  <li>webpack has not yet re-run to reflect updates.</li>
  <li>You have misconfigured Webpacker's config/webpacker.yml file.</li>
  <li>Your webpack configuration is not creating a manifest.</li>
  </ol>
  </blockquote>
  <p>I am not sure what's causing such issue and what's the recommended approach for handling extract_css. Could anyone please check my webpack config and help me solve my issue? Since <code>extract_css</code> gave multiple type of issue so I presented both of them so that it will be easier for the one who wants to help me solve this issue.</p>
  <p>These are the version of the package used;</p>
  <p>webpacker ~&gt; 5.0
  @rails/webpacker 5.4.3
  webpack 5.4.3
  webpack-dev-server 4.9.0
  vue 2.5.13
  rails 5.2.7</p>