Sapper and Svelte scroller example

Question

following the usage on: https://github.com/sveltejs/svelte-scroller

I get the error

UnhandledPromiseRejectionWarning: TypeError: _sveltejs_svelte_scroller__WEBPACK_IMPORTED_MODULE_1___default.a.data is not a function
    at Object.App._render (webpack:///./app/App.html?:56:75)
    at Object.App.render (webpack:///./app/App.html?:30:17)
    at /Users/tim.clulow/Documents/_git/cssandstuff-sapper/node_modules/sapper/dist/src/middleware.ts:252:13
(node:52144) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:52144) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Is there an extra webpack config step I need to do to get svelte-scroller to work in Sapper?

* UPDATE * If it's helpful for anyone else here are my updated webpack config files. they are copied below. I'm rather new to webpack so I'm really appreciative for the help Rich offered, hopefully this will save someone else the heartache.

client.config.js

const webpack = require('webpack');
const config = require('sapper/webpack/config.js');

const mode = process.env.NODE_ENV;
const isDev = mode === 'development';

module.exports = {
  entry: config.client.entry(),
  output: config.client.output(),
  resolve: {
    extensions: ['.js', '.json', '.html'],
    mainFields: ['svelte', 'module', 'browser', 'main']
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: 'svelte-loader',
          options: {
            hydratable: true,
            hotReload: true
          }
        }
      }
    ]
  },
  mode,
  plugins: [
    isDev && new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.browser': true,
      'process.env.NODE_ENV': JSON.stringify(mode)
    }),
  ].filter(Boolean),
  devtool: isDev && 'inline-source-map'
};

server.config.js:

const config = require('sapper/webpack/config.js');
const pkg = require('../package.json');

module.exports = {
  entry: config.server.entry(),
  output: config.server.output(),
  target: 'node',
  resolve: {
    extensions: ['.js', '.json', '.html'],
    mainFields: ['svelte', 'module', 'browser', 'main']
  },

  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: 'svelte-loader',
          options: {
            css: false,
            generate: 'ssr'
          }
        }
      }
    ]
  },
  mode: process.env.NODE_ENV,
  performance: {
    hints: false // it doesn't matter if server.js is large
  }
};

Rich Harris Rich Harris · Accepted Answer · 2018-05-14T14:44:05

Yes, there is. We'll update the template soon but in the meantime you can get it working by following the steps in this issue:

Add a resolve.mainFields: ['svelte', 'module', 'browser', 'main'] option to both client and server configs
Remove the exclude option from the svelte-loader config, so that the external component gets resolved
Modify the externals option in the server config so that the external component is bundled (i.e. processed by the compiler), rather than the (client-side) pre-compiled version being imported at runtime

Sapper and Svelte scroller example

client.config.js

server.config.js:

1 Answers