Unrecognized option 'resolve'

[Gotterbild]

I'm considering using Svelte 3 as a replacement to JQuery. As an example for myself how that could work, I am trying to implement simple filter (text input that filters elements by name). I want to plant this filter deep inside existing HTML layout (actually, Handlebars layout).

Here's my webpack config:

{
  resolve: {
    alias: {
      App: path.resolve(__dirname, 'app/'),
    },
    mainFields: ['svelte', 'browser', 'module', 'main'],
  },
  entry: {
    app: './app/app.js',
    vendor: ['jquery', 'what-input'],
    main: './scss/main.scss',
  },
  output: {
    filename: `./js/[name]-${release_id}.bundle.min.js`,
    sourceMapFilename: `./maps/[name]-${release_id}.map`,
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: false,
            hotReload: false, // svelte 3 not yet supported
          },
        },
      },
      // Transpire JS to es2015
      // Babel required for Foundation6. http://foundation.zurb.com/sites/docs/javascript.html
      {
        test: /\.js$/,
        // exclude: /(node_modules)/,
        // Excluding node_modules also excludes processing external dependencies
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['env', {
                targets: {
                  browsers: browserslist,
                },
                useBuiltIns: true,
                debug: false,
              }],
            ],
          },
        }],
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          // use: ['css-loader', 'sass-loader']
          use: [
            { loader: 'css-loader', options: { sourceMap: true } }, // Load CSS into Webpack
            // postcss-loader autoprefixes CSS
            // Not sure if needed. Installed based on usage notes here: http://foundation.zurb.com/sites/docs/sass.html
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [
                  precss,
                  autoprefixer,
                  postcssPresetEnv(),
                ],
              },
            },
            // Compiles Sass to CSS
            {
              loader: 'sass-loader',
              options: {
                includePaths: ['node_modules/motion-ui/src'],
                sourceMap: true,
                outputStyle: 'compact',
              },
            },
          ],
        }),
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        use: 'url-loader?limit=100000',
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    new ExtractTextPlugin(`./css/[name]-${release_id}.css`),
  ],
}

My component file is called diagrams-filter.svelte and looks as dumb as it could be:

This is a Filter

<script>
  console.log('filter fired')
</script>

I import this component like this:

import DiagramsFilter from './diagrams-filter.svelte'

const data = getData()

const filter = new DiagramsFilter({
  target: document.querySelector('DiagramsFilter'),
  props: {
    l: data.l,
    l_prefix: data.l_prefix,
    diagrams: data.pages,
  },
})

And in my Handlebars template I have an element with DiagramsFilter id:

<div id="DiagramsFilter"></div>

What am I doing wrong? Or maybe I'm trying to do something that is not possible? Or maybe I'm trying to do something that is just not yet supported? Or it is just a bug?

Any advice will be appreciated. Thank you.

[Gotterbild]

To help investigating the issue, I've created a boilerplate of my project: https://github.com/Gotterbild/svelte-webpack-handlebars-koa-template

To run it, you need to:

1. Create .env file from .env_exmaple
2. Run docker-compose up (requires docker and docker-compose)
3. Project will be available on localhost:3000
4. /assets/app/home-page.js has few lines commented. Comment them out to see error.

[creaven]

document.querySelector('DiagramsFilter') should be document.querySelector('#DiagramsFilter') (or getElementById)

[0gust1]

It seems that, like us, you use webpack3 (I saw ExtractTextPlugin). Your error message looks like ours, too. So your issue is maybe related to ours : #89

What is the version of webpack you use ?

[Gotterbild]

@creaven Yes, there was error in querySelector, but that wasn't the case. I've fixed it, but initial error stays the same. Looks like it breaks before reaching to the line with querySelector.

@0gust1 I've checked my webpack version and it is 2.7.0. So, the issue is not with webpack 3 in my case. However, your error looks somewhat similar (Unrecognized option 'N'), so maybe it is related.

Yes, we use ExtractTextPlugin, but I can't see any console errors related to it. It looks like working properly:

But I'm not sure. Maybe some webpack plugin is the source of error. Can you post your webpack config, so we can compare plugins we're using and configuration options? I understand webpack 3 is a bit different, but who knows.

[0gust1]

@Gotterbild Yes, I think so. I made some analysis/debug of the code yesterday (more details below). I even have a pull request in progress. It could help a lot if you could test it on your side ! 😄

In your project, could you replace temporarily the content of node_modules/svelte-loader/index.js by this code : https://github.com/0gust1/svelte-loader/blob/fix/webpack3_and_svelte3/index.js and try building again ?

Explanation :

• in a webpack <=3.x config + svelte v3 , the loader pass a misconfigured option object to the svelte compiler and makes it choke (because the svelte v3 compiler check the content of the option object before using it)
• You don't have this problem with webpack >= 4.x + svelte v3, because webpack changed some things in the generic loader engine that makes the svelte-loader pass correct options with to the compiler.
• You don't have this problem with webpack <= 3.x + svelte v2, because the svelte v2 compiler is less strictier about the content of the option object it digests.

btw, I talked about ExtractTextPlugin, but it's unrelated to the bug, that's just the way I saw you were not using webpack4.

It's also not a problem in webpack configuration file by itself, but more a nasty bug related to the differences in webpack internal loader engine between webpack <4 and 4

[Gotterbild]

@0gust1 It was a bit hacky as my setup is inside a docker container and node modules are cached, but I've managed to replace content of svelte-loader/index.js with yours. Webpack builds succesfully after. Looks like you're located the issue correctly. I didn't test if Svelte works as I have no time for it right now, but at a glance looks like your change fixes the issue.

[Gotterbild]

@0gust1 I've found a second to test if Svelte works as expected with your changes in place and it works like charm.

[0gust1]

@Gotterbild the PR was merged ! tell us if it does the job. Thanks for your help and your time.

[Gotterbild]

@0gust1 Sorry, but it seems that GitHub didn't send me a notification about your message. But I did receive notification that this issue was closed so here I am.

Two months have passed and we upgraded webpack to v4, so I can't test it with actual code. Also, I'm a bit busy to blow off the dust from older release versions of our project. And worth mention that we decided to use Vue in place of Svelte for several reasons. Anyway, it worked two months ago when I tested it, so why wouldn't it work now?

To sum up everything listed, I won't test it. Sorry :)