Turning on Svelte's dev causes "Uncaught (in promise) Error: 'target' is a required option"

[jhechtf]

The full text of the issue is

index.mjs?017d:1558 Uncaught (in promise) Error: 'target' is a required option
    at new SvelteComponentDev (index.mjs?017d:1558)
    at new Dashboard (dashboard.svelte?6e88:435)
    at Array.ut (yrv.es.js?4cd2:1)
    at it (yrv.es.js?4cd2:1)
    at Object.p (yrv.es.js?4cd2:1)
    at q (yrv.es.js?4cd2:1)
    at B (yrv.es.js?4cd2:1)

I initially thought this was due to the fact that I had created a wrapper component for the index / routes setup, so I instead moved the page in question to simply use the router / route elements directly with the same results.

My webpack config is

const { resolve } = require('path');
const { ProvidePlugin } = require('webpack');
const CssPlugin = require('mini-css-extract-plugin');
const HtmlPlugin = require('html-webpack-plugin');

const fromRoot = (...args) => resolve(process.cwd(), ...args);
const fromSrc = (...args) => fromRoot('src', ...args);

const { NODE_ENV = 'development' } = process.env;

module.exports = {
  target: 'web',
  mode: NODE_ENV,
  resolve: {
    extensions: ['.svelte', '.mjs', '.js', '.json'],
    alias: {
      '@': fromSrc('.'),
      'svelte': fromRoot('node_modules', 'svelte'),
      'config': fromRoot('configs/browser_config.json')
    }
  },
  entry: {
    dashboard: fromSrc('dashboard.js')
  },
  output: {
    path: fromRoot('dist'),
    filename: '[name].[hash].js',
    chunkFilename: '[id].js'
  },
  devServer: {
    host: '0.0.0.0',
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            dev: true, // setting to false or removing this line removes the error.
          }
        }
      },
      {
        test: /\.css$/,
        use: [{
          loader: CssPlugin.loader,
          options: {
            hot: NODE_ENV === 'development'
          }
        }, 'css-loader', 'postcss-loader']
      }
    ]
  },
  plugins: [
    new CssPlugin(),
    new HtmlPlugin({
      template: fromSrc('index.html')
    })
  ]
};

The place where the router is used looks like this

<script>
  import {Router, Route} from 'yrv';
  import ErrorPage from './_404.svelte';
  import Dashboard from '../components/dashboard.svelte';
  
  const routes = [
    {
      component: Dashboard,
      exact: true,
      path: '/'
    },
    {
      component: ErrorPage,
      fallback: true
    }
  ];
</script>

<!-- Creates an index route with an errorpage fallback -->
<Router>
  <Route
    component={Dashboard}
    exact={true},
    path="/"
  />
  <Route
    component={ErrorPage}
    fallback={true}
  />
</Router>

[pateketrueke]

I don't think aliasing svelte was a good idea actually. 🤔

[jhechtf]

Well, I copied that line from the config in the example repo's webpack config

[pateketrueke]

Are you omitting the mainFields settings then?

Looking at the docs of svelte-loader seems to be a requirement.

[jhechtf]

I am omitting it because including it breaks my build.

[pateketrueke]

Please take a look at this comment as it seems very related.

[jhechtf]

Just to confirm, removing the exclude: /node_modules/ was what fixed it for my setup.