lit: [labs/virtualizer] The problem with compiling dist files .js and map.js files when using webpack

Which package(s) are affected?

Virtualizer (@lit-labs/virtualizer)

Description

When I added lib in package.json and run my webpack bundler, the virtualizer lib code didn’t compile into dist folder in index.js file. But some files were compiled in root project directory like: vendors-node_modules_lit-labs_virtualizer_layouts_flow_js.js vendors-node_modules_lit-labs_virtualizer_layouts_flow_js.js.map

I can’t understand why all libs which I added in package.json file are built correctly in the dist folder beside virtualizer lib.

Reproduction

I have package.json file: { “name”: “wc-building-reports”, “version”: “1.0.0”, “scripts”: { “lint”: “eslint . --ext .ts”, “lint:fix”: “yarn lint --fix”, “demo”: “wds --open /demo/ --watch”, “dev”: “webpack --env code=development --mode=development --watch”, “build:prod”: “webpack --env code=production --mode=production”, “build:stage1”: “webpack --env code=stage-1 --mode=production”, “build:stage2”: “webpack --env code=stage-2 --mode=production”, “build:stage3”: “webpack --env code=stage-3 --mode=production”, “clean”: “del-cli packages/dist packages/*.d.ts”, “test”: “wtr”, “test:watch”: “yarn test --watch”, “test:coverage”: “yarn test --coverage”, “test:coverage:watch”: “yarn test --coverage --watch”, “prepare”: “husky install” }, “type”: “module”, “license”: “ISC”, “dependencies”: { “@lit-labs/virtualizer”: “^2.0.5”, “@trustbooks/shared-web-components-controls”: “1.0.538”, “@trustbooks/wc-pagination”: “1.0.10”, “clsx”: “^2.0.0”, “lit”: “^2.8.0”, “lit-context”: “^1.0.15”, “tslib”: “^2.6.1” }, “devDependencies”: { “@open-wc/testing”: “^3.1.8”, “@rollup/plugin-commonjs”: “^22.0.0”, “@rollup/plugin-replace”: “^5.0.2”, “@types/node”: “^17.0.40”, “@typescript-eslint/eslint-plugin”: “^5.61.0”, “@typescript-eslint/parser”: “^5.61.0”, “@web/dev-server”: “^0.3.0”, “@web/dev-server-esbuild”: “^0.4.1”, “@web/dev-server-rollup”: “^0.5.2”, “@web/test-runner”: “^0.16.1”, “@web/test-runner-playwright”: “^0.10.1”, “css-loader”: “^6.8.1”, “cz-conventional-changelog”: “^3.3.0”, “del-cli”: “^4.0.1”, “dotenv-webpack”: “^8.0.1”, “eslint”: “^7.17.0”, “eslint-config-airbnb-base”: “^15.0.0”, “eslint-config-prettier”: “^8.10.0”, “eslint-plugin-import”: “^2.28.0”, “eslint-plugin-lit”: “^1.8.3”, “eslint-plugin-prettier”: “^4.0.0”, “eslint-plugin-wc”: “^1.5.0”, “fork-ts-checker-webpack-plugin”: “^8.0.0”, “glob”: “^8.0.3”, “husky”: “^7.0.0”, “prettier”: “^2.6.2”, “pretty-quick”: “^3.1.3”, “sass”: “^1.64.2”, “sass-loader”: “^13.3.2”, “sinon”: “^15.2.0”, “to-string-loader”: “^1.2.0”, “ts-loader”: “^9.4.4”, “typescript”: “^5.1.6”, “webpack”: “^5.88.2”, “webpack-cli”: “^4.9.2”, “webpack-dev-server”: “^4.15.1” }, “config”: { “commitizen”: { “path”: “cz-conventional-changelog” } } }

webpack config: import Dotenv from “dotenv-webpack”; import ForkTsCheckerWebpackPlugin from “fork-ts-checker-webpack-plugin”; import glob from “glob”; import path from “path”; import url from “url”;

const filename = url.fileURLToPath(import.meta.url); const dirname = path.dirname(filename);

const entryObject = glob.sync(“./packages/*”).reduce((entries) => { // eslint-disable-next-line no-param-reassign entries[path.join(“packages”, “dist”, “index”)] = ./packages/index.ts;

return entries; }, {});

export default (env) => ({ entry: entryObject, module: { rules: [ { test: /.m?js/, resolve: { fullySpecified: false, }, }, { test: /.ts$/, use: “ts-loader”, }, { test: /.scss$/, use: [ { loader: “to-string-loader” }, { loader: “css-loader” }, { loader: “sass-loader” }, ], }, ], }, output: { filename: “[name].js”, sourceMapFilename: “[name].js.map”, path: dirname, }, resolve: { extensions: [“.ts”, “.js”, “.scss”], }, devtool: “source-map”, plugins: [ new Dotenv({ path: ./.env.${env.code}, }), // run TSC on a separate thread new ForkTsCheckerWebpackPlugin({ typescript: { // diagnosticOptions: { // semantic: true, // syntactic: true, // }, mode: “write-references”, build: true, }, }), ], });

How I import this file: import { virtualize } from "@lit-labs/virtualizer/virtualize.js";

Workaround

I have not found a workaround

Is this a regression?

No or unsure. This never worked, or I haven’t tried before.

Affected versions

I use “@lit-labs/virtualizer”: “^2.0.5”,

Browser/OS/Node environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Node: v18.12.0 npm: 8.19.2