How to use the fuse-box.StyledComponentsPlugin function in fuse-box

const renderer = (name, port) => {
  const cfg = getRendererConfig('electron', name);

  cfg.plugins.push(getWebIndexPlugin(name));
  cfg.plugins.push(JSONPlugin());
  cfg.plugins.push(getCopyPlugin());
  cfg.plugins.push(StyledComponentsPlugin());

  const fuse = FuseBox.init(cfg);

  if (!production) {
    fuse.dev({ httpServer: true, port, socketURI: `ws://localhost:${port}` });
  }

  const app = fuse.bundle(name).instructions(`> [renderer/${name}/index.tsx]`);

  if (!production) {
    app.hmr({ port, socketURI: `ws://localhost:${port}` }).watch();

    if (name === 'app') {
      return fuse.run().then(() => {
        const child = spawn('npm', ['start'], {
          shell: true,

Sparky.task('default', async () => {
  await new Builder({
    name: 'app',
    instructions: '> site/index.tsx +src/index.ts',
    watchFilter: path => !path.match('.*.site') || !path.match('.*.src'),
    devServerOptions: {
      httpServer: true,
      port: 8000,
    },
    plugins: [
      !production && StyledComponentsPlugin(),
      CopyPlugin({
        files: ['*.woff2', '*.svg'],
        dest: 'site-assets',
        resolve: production ? './site-assets' : '/site-assets',
      }),
      WebIndexPlugin({
        target: `index.html`,
        template: `site/resources/pages/index.html`,
        path: production ? '.' : '/',
      }),
    ],
  }).init();
});

const renderer = name => {
  const cfg = getRendererConfig('electron');

  cfg.plugins.push(getWebIndexPlugin(name));

  cfg.plugins.push(JSONPlugin());
  cfg.plugins.push(getCopyPlugin());
  cfg.plugins.push(StyledComponentsPlugin());

  const fuse = FuseBox.init(cfg);

  let instructions = `> [renderer/views/${name}/index.tsx]`;

  if (production) {
    instructions = `> renderer/views/${name}/index.tsx -node-vibrant -electron -electron-extensions -styled-components -node-bookmarks-parser`;
  }

  const app = fuse.bundle(name).instructions(instructions);

  if (!production) {
    if (name === 'app') {
      fuse.dev({ httpServer: true });

      app.hmr().watch();

const renderer = (name, port) => {
  const cfg = getRendererConfig('electron');

  cfg.plugins.push(getWebIndexPlugin(name));

  cfg.plugins.push(JSONPlugin());
  cfg.plugins.push(getCopyPlugin());
  cfg.plugins.push(StyledComponentsPlugin());

  const fuse = FuseBox.init(cfg);

  const app = fuse
    .bundle(name)
    .instructions(
      `> [${
        name == 'app' ? '/renderer' : '/renderer/externals'
      }/${name}/index.tsx]`,
    );

  if (!production) {
    if (name === 'app') {
      fuse.dev({ httpServer: true }, server => {
        const app = server.httpServer.app;
        app.get('/undefined', function(req, res) {

Sparky.task('renderer', async () => {
  await new Builder({
    name: 'app',
    target: 'electron',
    instructions: '> [renderer/index.tsx]',
    watch: 'renderer/**',
    devServerOptions: {
      httpServer: true,
    },
    plugins: [
      !production && StyledComponentsPlugin(),
      CopyPlugin({
        files: ['*.woff2', '*.svg', '*.png'],
        dest: 'assets',
        resolve: production ? './assets' : '/assets',
      }),
      WebIndexPlugin({
        target: `index.html`,
        template: `src/renderer/resources/pages/index.html`,
        path: production ? '.' : '/',
      }),
    ],
  }).init();

  if (!production) {
    spawn('npm', ['start'], {
      shell: true,