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选项，以便捆绑外部组件（即由编译器处理），而不是在运行时导入的（客户端）预编译版本