Пример скроллера Sapper и Svelte

после использования на: https://github.com/sveltejs/svelte-scroller

Я получаю ошибку

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.

Есть ли дополнительный шаг конфигурации веб-пакета, который мне нужно сделать, чтобы заставить svelte-scroller работать в Sapper?

* ОБНОВИТЬ * Если это будет полезно для кого-то еще, вот мои обновленные файлы конфигурации веб-пакета. они скопированы ниже. Я новичок в webpack, поэтому очень признателен за помощь, которую предложил Рич. Надеюсь, это избавит кого-то от душевной боли.

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
  }
};

1
863
1

Ответ:

Решено

Да, есть. Мы скоро обновим шаблон, но пока вы можете заставить его работать, выполнив шаги в Эта проблема:

  • Добавьте опцию resolve.mainFields: ['svelte', 'module', 'browser', 'main'] как в клиентскую, так и в серверную конфигурации.
  • Удалите опцию exclude из конфигурации svelte-loader, чтобы разрешить внешний компонент
  • Измените опцию externals в конфигурации сервера так, чтобы внешний компонент был связан (т.е. обрабатывался компилятором), а не предварительно скомпилированная версия (на стороне клиента), импортированная во время выполнения.