Sapper 和 Svelte 滚动条示例

Question

以下用法： 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.

是否需要执行额外的 webpack 配置步骤才能让 svelte-scroller 在 Sapper 中工作？

* 更新 * 如果它对其他人有帮助，这里是我更新的 webpack 配置文件。它们被复制在下面。我是 webpack 的新手，所以我非常感谢 Rich 提供的帮助，希望这可以让其他人免于心痛。

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

Answer 1

是的，有。我们会尽快更新模板，但与此同时，您可以按照 this issue:

中的步骤进行操作

向客户端和服务器配置添加 resolve.mainFields: ['svelte', 'module', 'browser', 'main'] 选项
从 svelte-loader 配置中删除 exclude 选项，以便解析外部组件
修改服务器配置中的 externals 选项，以便捆绑外部组件（即由编译器处理），而不是在运行时导入（客户端）预编译版本

Sapper 和 Svelte 滚动条示例

Sapper and Svelte scroller example

svelte

client.config.js

server.config.js: