Sapper和Svelte滚动条示例

C队

遵循以下用法: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
  }
};
里奇·哈里斯

就在这里。我们将尽快更新模板,但与此同时,您可以按照此问题中的步骤操作

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章