Rollup unexpectedly generates a file for reactive state

Question

I'm kinda of new to rollup, and been having several issues with it over the last couple of weeks.

I'm currently using rollup to build Lit components to production. And for some unknown reason, when it generates a file which contains, what I believe is the reactive state for every component - query-assigned-elements-78bcb1b1.js. Every component that has reactive state then imports this file.

I need to do not output this file, and keep the state in the actual files, since the components needs to be used alone, without any dependencies and imports.

rollup-config.mjs:

...

export default (args) => {
  const isProd = args.prod ? true : false;
  const isDev = args.dev ? true : false;

  console.log(
    `Building ${
      isProd ? 'production' : isDev ? 'development' : 'local'
    } build..`
  );
  const distProd = 'dist';
  const distDev = 'dev/dist';
  const distLocal = 'dev/components';
  let envPath = isProd ? distProd : isDev ? distDev : distLocal;
  let build = [
    {
      input: ['src/**/[!_]*.ts'],
      output: {
        dir: envPath,
      },
      plugins: [
        resolve(),
        multiInput.default({
          relative: 'src/',
        }),
        commonjs(),
        typescript({
          compilerOptions: {
            outDir: envPath,
            sourceMap: false,
            declaration: false,
            declarationMap: false,
            inlineSources: false,
          },
        }),
        template(),
        terser({
          ecma: 2017,
          module: true,
          warnings: true,
        }),
        copy({
          patterns: '**/assets/*.{svg,png,jpg,gif,webp}',
          rootDir: './src',
        }),
      ],
      preserveEntrySignatures: 'strict',
    },
  ];
  return build;
};

Every component then has import{r as t,_ as e,e as o,n as i,s as r,$ as a}from"../query-assigned-elements-78bcb1b1.js";. Any suggestions would be greatly appreciated.

user_2523007 · Answer

The issue appears to occur when the input of the rollup config is too broad:

input: ['src/**/[!_]*.ts']

If each individual lit element is placed in its own separate folder, rollup needs to be applied to each lit element individually. If rollup input is too broad (in the sense that it takes all elements as an input), it will see that the given dependency (query-assigned-elements) is used across all of the given elements, and instead of embedding it individually in each file, it creates a separate external file (query-assigned-elements-78bcb1b1.js) and references is in import.

Changing input to something like

 input: ['./src//[!_]*.ts']

and running rollup for each element separately fixes the issue.

Rollup unexpectedly generates a file for reactive state

1 Answers