svelte-loader@3.0.0 breaks emitCss?

[levex]

Hello!

I have a simple MPA project that I'm working on using Webpack 4.

Here's the webpack.config.js that I used:

const path = require('path');
const glob = require('glob');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: devMode }),
        new OptimizeCSSAssetsPlugin({})
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
      'app2': glob.sync('./vendor/**/*.js').concat(['./js/app2.js']),
    },
    output: {
      filename: '[name].js',
      chunkFilename: '[name].[id].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'
    },
    resolve: {
      alias: {
        svelte: path.resolve('node_modules', 'svelte')
      },
      extensions: ['.mjs', '.js', '.svelte'],
      mainFields: ['svelte', 'browser', 'module', 'main'],
    },
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: {
      rules: [
        {
          test: /\.(html|svelte)$/,
          exclude: /node_modules/,
          use: {
            loader: 'svelte-loader',
            options: {
              emitCss: true,
            },
          },
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.[s]?css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                url: false,
              },
            },
            'sass-loader',
          ],
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
    ]
    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
  }
};

js/app2.js is then something along the lines of:

import css from "../css/app2.scss";
import "phoenix_html"

import App from './ui/App.svelte';

const app = new App({
  target: document.body,
  props: {
    name: 'Hello GitHub'
  }
});

window.app = app;

export default app;

So I am not sure what's going wrong here but using svelte-loader@3.0.0 causes the following issue during webpack --mode development:

ERROR in ./js/ui/App.svelte                                     
Module not found: Error: Can't resolve '/Users/lkurusa/src/x/app/assets/js/ui/App.svelte.0.css' in '/Users/lkurusa/src/x/app/assets/js/ui'
resolve '/Users/lkurusa/src/x/app/assets/js/ui/App.svelte.0.css' in '/Users/lkurusa/src/x/app/assets/js/ui' 
  using description file: /Users/lkurusa/src/x/app/assets/package.json (relative path: ./js/ui)                       
    using description file: /Users/lkurusa/src/x/app/assets/package.json (relative path: ./js/ui/App.svelte.0.css)
      no extension                                                                                                              
        /Users/lkurusa/src/x/app/assets/js/ui/App.svelte.0.css doesn't exist                                          
      .js                                                                                                                       
        /Users/lkurusa/src/x/app/assets/js/ui/App.svelte.0.css.js doesn't exist
      .json                                                                                                                     
        /Users/lkurusa/src/x/app/assets/js/ui/App.svelte.0.css.json doesn't exist                                     
      as directory                                                                                                              
        /Users/lkurusa/src/x/app/assets/js/ui/App.svelte.0.css doesn't exist                                          
[/Users/lkurusa/src/x/app/assets/js/ui/App.svelte.0.css]
[/Users/lkurusa/src/x/app/assets/js/ui/App.svelte.0.css.js]                                                           
[/Users/lkurusa/src/x/app/assets/js/ui/App.svelte.0.css.json]                                                         
 @ ./js/ui/App.svelte 42:0-43:1                                                                                                 
 @ ./js/app2.js                                            
 @ multi ./js/app2.js  

Reverting svelte-loader to 2.13.6 fixes the issue.

Maybe I'm doing something wrong - I'm not really a web developer. :-)

Thanks!

[non25]

What do you have in style tag in App.svelte ? 🤔

Edit: Maybe you should update webpack minor version to the latest, because 3.0.0 uses webpack-specific feature (query-strings) in emitCss.

[levex]

Just a simple h2 { color: blue; }

I'll try updating the minor version, thanks!

[non25]

@levex doing that solved your issue? If so, close this please.

[levex]

@levex doing that solved your issue? If so, close this please.

Hi, I haven't yet had the chance to look at this, sorry. I'll take a look later today and get back here.

[levex]

It appears that upgrading Webpack has resolved this issue. :-) Thanks @non25 for your help!