Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError: generate is not a function

See original GitHub issue

Description

The page-skeleton-webpack-plugin was installed and configured using the project generated by the @vue/cli 3.0 scaffold, but the skeleton screen could not be generated when the project was run.

使用@vue/cli 3.0脚手架生成的项目，安装并配置了page-skeleton-webpack-plugin，但是在运行项目时无法生成skeleton screen

Steps to reproduce

Generate project using vue/cli 3.0
Install page-skeleton-webpack-plugin and configure it in vue.config.js
Execute npm run serve to run the project
Open the console and click on Preview skeleton page
An error has occurred 😭 -> “[PSG] generate is not a function”

使用vue/cli 3.0生成项目
安装page-skeleton-webpack-plugin，并在vue.config.js进行相应的配置
执行npm run serve运行项目
打开控制台，点击Preview skeleton page
出现错误😭 -> “[PSG] generate is not a function”

Expected behavior:

Correct generation of skeleton screen.

正确的生成skeleton screen

Actual behavior:

An error message 😭 -> “[PSG] generate is not a function” has occurred and the debug skeleton screen cannot be previewed.

出现了错误提示😭 -> “[PSG] generate is not a function”，无法预览调试skeleton screen

Plugin configration

const path = require('path');
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin');

module.exports = {
  crossorigin: 'anonymous',
  integrity: true,
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'),
        staticDir: path.resolve(__dirname, './dist'),
        routes: ['/'],
      }),
    ],
  },
};