Skip to content

Debug issue #61

@madeInLagny

Description

@madeInLagny

Hi,

I am using rollup, following open-wc config to build my project:

import nodeResolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import html from '@web/rollup-plugin-html';
import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
import esbuild from 'rollup-plugin-esbuild';
import { generateSW } from 'rollup-plugin-workbox';
import path from 'path';
import copy from 'rollup-plugin-copy';
import replace from '@rollup/plugin-replace';
import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';

const newv = new Intl.DateTimeFormat('fr', {
  dateStyle: 'short',
  timeStyle: 'short',
}).format(new Date());

console.log('Version:', newv);

export default {
  input: 'index.html',
  output: {
    entryFileNames: '[hash].js',
    chunkFileNames: '[hash].js',
    assetFileNames: '[hash][extname]',
    format: 'es',
    dir: 'dist',
  },
  external: ['rgbcolor', 'raf'],
  preserveEntrySignatures: false,

  plugins: [
    replace({
      preventAssignment: true,
      __version__: newv,
      __dev__: 'prod',
    }),
    dynamicImportVars({
      exclude: 'controllers/utils.js',
    }),
    /** Enable using HTML as rollup entrypoint */
    html({
      minify: true,
      injectServiceWorker: true,
      serviceWorkerPath: 'dist/sw.js',
    }),
    /** Resolve bare module imports */
    nodeResolve(),
    /** Minify JS, compile JS to a lower language target */
    esbuild({
      minify: true,
      target: ['chrome100', 'firefox98', 'safari15.4'],
    }),
    importMetaAssets(),
    /** Minify html and css tagged template literals */
    babel({
      plugins: [
        [
          require.resolve('babel-plugin-template-html-minifier'),
          {
            modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
            failOnError: false,
            strictCSS: true,
            htmlMinifier: {
              collapseWhitespace: true,
              conservativeCollapse: true,
              removeComments: true,
              caseSensitive: true,
              minifyCSS: true,
            },
          },
        ],
      ],
    }),
    /** Create and inject a service worker */
    generateSW({
      globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
      navigateFallback: '/index.html',
      // where to output the generated sw
      swDest: path.join('dist', 'sw.js'),
      // directory to match patterns against to be precached
      globDirectory: path.join('dist'),
      // cache any html js and css by default
      globPatterns: ['**/*.{html,js,css,webmanifest,json}'],
      runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
    }),
    copy({
      targets: [
        {
          src: 'IEImage.png',
          dest: 'dist',
        },
        {
          src: 'IE.html',
          dest: 'dist',
        },
        {
          src: 'manifest.json',
          dest: 'dist',
        },
        {
          src: 'well-known/**/*.json',
          dest: 'dist/well-known',
        },
      ],
      hook: 'buildStart',
      flatten: false,
    }),
  ],
};

I get the following error during the build process:

babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers
[babel-plugin-template-html-minifier] Could not minify CSS: Invalid character(s) 'babel-plugin-template-html-minifier:ritvkkwq4gs ' at 1:1. Ignoring.
[babel-plugin-template-html-minifier] Could not minify CSS: Invalid property name '// Inspired by https' at 2:22. Ignoring.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\jocep\Documents\Google Drive\fitty.me\fitty-app\node_modules\@firebase\firestore\dist\index.esm2017.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\jocep\Documents\Google Drive\fitty.me\fitty-app\node_modules\@firebase\database\dist\index.esm2017.js as it exceeds the max of 500KB.

What does ritvkkwq4gs stand for? How can I trace where the error lies in my code ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions