Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Debug issue #61

Open
madeInLagny opened this issue Feb 28, 2023 · 0 comments
Open

Debug issue #61

madeInLagny opened this issue Feb 28, 2023 · 0 comments

Comments

@madeInLagny
Copy link

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant