Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

svelte-loader@3.0.0 breaks emitCss?

See original GitHub issue

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!