Bundle errors

[seghier]

Describe the bug 📝

Hello I try to create a bundle but i got errors.

Reproduction ▶️

No response

Steps to reproduce 🔢

tsc --outFile dist/bundle.js src/index.ts

System Info 💻

Windows 11

Used Package Manager 📦

npm

Error Trace/Logs 📃

src/annotation/DrawManager/index.ts:72:21 - error TS2461: Type 'NodeListOf' is not an array type.

72 group.append(...drawing);

src/core/MaterialManager/index.ts:57:26 - error TS2802: Type 'Set<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[]> | InstancedMesh<BufferGeometry<NormalBufferAttributes>, Material | Material[]>>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

57       for (const mesh of meshes) {

src/core/ScreenCuller/index.ts:258:24 - error TS2802: Type 'IterableIterator' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

258 for (const code of colors.values()) {

src/core/ScreenCuller/index.ts:269:24 - error TS2802: Type 'Set<string>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

269     for (const uuid of this._recentlyHiddenMeshes) {

src/core/ToolsComponent/index.ts:1:1 - error TS6131: Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'.

1 import * as THREE from "three";

src/core/ToolsComponent/index.ts:92:24 - error TS2802: Type 'IterableIterator<Component<any>>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

92     for (const tool of tools) {

src/core/ToolsComponent/index.ts:104:24 - error TS2802: Type 'IterableIterator<Component>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

104 for (const tool of tools) {

src/fragments/FragmentClassifier/index.ts:80:30 - error TS2802: Type 'Set<string>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

80             for (const id of found[guid]) {

src/fragments/FragmentExploder/index.ts:92:28 - error TS2802: Type 'Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

92 for (const id of ids) {

src/fragments/FragmentExploder/index.ts:116:28 - error TS2802: Type 'Set<string>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

116           for (const id of ids) {

src/fragments/FragmentHighlighter/index.ts:263:24 - error TS2802: Type 'Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

263 for (const id of ids[fragID]) {

src/fragments/FragmentHighlighter/index.ts:267:24 - error TS2802: Type 'Set<number>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

267       for (const id of idsNum) {

src/fragments/FragmentHighlighter/index.ts:398:24 - error TS2802: Type 'Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

398 for (const id of ids) {

src/fragments/FragmentHighlighter/index.ts:529:24 - error TS2802: Type 'Set<string>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

529       for (const id of ids) {

src/ifc/IfcJsonExporter/index.ts:74:22 - error TS2802: Type 'Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

74 for (const id of structures) {

src/ifc/IfcPropertiesFinder/index.ts:196:36 - error TS2802: Type 'IterableIterator<[number, QueryGroup]>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

196       for (const [index, group] of groups.entries()) {

src/ifc/IfcPropertiesFinder/index.ts:200:33 - error TS2802: Type 'Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

200 for (const expressID of groupResult) {

src/ifc/IfcPropertiesFinder/index.ts:204:28 - error TS2802: Type 'Set<number>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

204           for (const id of relations) {

src/ifc/IfcPropertiesFinder/index.ts:247:31 - error TS2802: Type 'Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

247 for (const expressID of matchingEntities) {

src/ifc/IfcPropertiesFinder/index.ts:289:14 - error TS2802: Type 'Set<number>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

289           ...this.simpleQuery(model, query as QueryGroup, excludedItems),

src/ifc/IfcPropertiesFinder/index.ts:373:29 - error TS2802: Type 'Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

373 for (const element of uniqueElements) {

src/ifc/IfcPropertiesFinder/index.ts:382:36 - error TS2802: Type 'Map<number, number>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

382     for (const [element, count] of elementsCount) {

src/ifc/IfcPropertiesFinder/src/query-builder.ts:28:34 - error TS2802: Type 'IterableIterator<[number, QueryGroup]>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

28 for (const [index, group] of value.entries()) {

src/ifc/IfcPropertiesFinder/src/query-group.ts:33:34 - error TS2802: Type 'IterableIterator<[number, AttributeQuery | QueryGroup]>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

33     for (const [index, query] of value.queries.entries()) {

src/ifc/IfcPropertiesManager/index.ts:153:33 - error TS2802: Type 'number[] | Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

153 for (const expressID of elementIDs ?? []) {

src/ifc/IfcPropertiesManager/index.ts:443:29 - error TS2802: Type 'any[] | Set<number>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

443     for (const expressID of changes) {

src/ifc/IfcPropertiesProcessor/index.ts:144:27 - error TS2802: Type 'Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

144 for (const index of indices) {

src/ifc/IfcPropertiesProcessor/index.ts:278:32 - error TS2550: Property 'flat' does not exist on type '(TreeView | TreeView[])[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2019' or later.

278     propsList.addChild(...[ui].flat());

src/ifc/IfcPropertiesProcessor/index.ts:303:24 - error TS2802: Type 'any[] | Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

303 for (const id of elementPropsIndexation) {

src/ifc/IfcPropertiesProcessor/index.ts:312:36 - error TS2550: Property 'flat' does not exist on type '(TreeView | TreeView[])[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2019' or later.

312         mainGroup.addChild(...[ui].flat());

src/ifc/IfcPropertiesUtils/index.ts:186:29 - error TS2802: Type 'number[] | Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

186 for (const expressID of expressIDs) {

src/measurement/AngleMeasurement/src/index.ts:91:44 - error TS2550: Property 'flat' does not exist on type 'number[][]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2019' or later.

91     this._lineGeometry.setPositions(points.flat());

src/navigation/EdgesClipper/src/clipping-edges.ts:185:24 - error TS2802: Type 'Set<Mesh<BufferGeometry, Material | Material[]>>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

185 for (const mesh of style.meshes) {

src/navigation/EdgesClipper/src/clipping-fills.ts:351:31 - error TS2802: Type 'Map<number, number[]>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

351     for (const [id, shape] of shapes) {

src/navigation/EdgesClipper/src/edges-plane.ts:38:18 - error TS2340: Only public and protected methods of the base class are accessible via the 'super' keyword.

38 return super.enabled;

src/navigation/EdgesClipper/src/edges-plane.ts:49:11 - error TS2340: Only public and protected methods of the base class are accessible via the 'super' keyword.

49     super.enabled = state;

src/navigation/EdgesClipper/src/edges-plane.ts:56:11 - error TS2340: Only public and protected methods of the base class are accessible via the 'super' keyword.

56 super.visible = state;

src/navigation/EdgesClipper/src/edges-styles.ts:50:24 - error TS2802: Type 'Set<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[]>>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

50     for (const mesh of meshes) {

src/navigation/PostproductionRenderer/src/custom-effects-pass.ts:173:26 - error TS2802: Type 'Set<Mesh<BufferGeometry, Material | Material[]> | InstancedMesh<BufferGeometry, Material | Material[]>>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

173 for (const mesh of style.meshes) {

src/navigation/PostproductionRenderer/src/custom-effects-pass.ts:233:28 - error TS2802: Type 'Set<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[]> | InstancedMesh<BufferGeometry<NormalBufferAttributes>, Material | Material[]>>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

233         for (const mesh of style.meshes) {

src/navigation/PostproductionRenderer/src/custom-effects-pass.ts:258:28 - error TS2802: Type 'Set<Mesh<BufferGeometry, Material | Material[]> | InstancedMesh<BufferGeometry, Material | Material[]>>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

258 for (const mesh of style.meshes) {

src/ui/Dropdown/index.ts:150:27 - error TS2495: Type 'HTMLCollection' is not an array type or a string type.

150       for (const child of list) {

src/ui/ToastNotification/index.ts:63:13 - error TS2340: Only public and protected methods of the base class are accessible via the 'super' keyword.

63 super.visible = active;

src/ui/ToastNotification/index.ts:70:31 - error TS2340: Only public and protected methods of the base class are accessible via the 'super' keyword.

70       setTimeout(() => (super.visible = active), delay);

Found 44 errors in 22 files.

Errors Files 1 src/annotation/DrawManager/index.ts:72 1 src/core/MaterialManager/index.ts:57 2 src/core/ScreenCuller/index.ts:258 3 src/core/ToolsComponent/index.ts:1 1 src/fragments/FragmentClassifier/index.ts:80 2 src/fragments/FragmentExploder/index.ts:92 4 src/fragments/FragmentHighlighter/index.ts:263 1 src/ifc/IfcJsonExporter/index.ts:74 7 src/ifc/IfcPropertiesFinder/index.ts:196 1 src/ifc/IfcPropertiesFinder/src/query-builder.ts:28 1 src/ifc/IfcPropertiesFinder/src/query-group.ts:33 2 src/ifc/IfcPropertiesManager/index.ts:153 4 src/ifc/IfcPropertiesProcessor/index.ts:144 1 src/ifc/IfcPropertiesUtils/index.ts:186 1 src/measurement/AngleMeasurement/src/index.ts:91 1 src/navigation/EdgesClipper/src/clipping-edges.ts:185 1 src/navigation/EdgesClipper/src/clipping-fills.ts:351 3 src/navigation/EdgesClipper/src/edges-plane.ts:38 1 src/navigation/EdgesClipper/src/edges-styles.ts:50 3 src/navigation/PostproductionRenderer/src/custom-effects-pass.ts:173 1 src/ui/Dropdown/index.ts:150 2 src/ui/ToastNotification/index.ts:63

Validations ✅

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a IFC.js components issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• [X] Check that this is a concrete bug. For Q&A join our Community.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[seghier]

Update, i follow these steps: 1- I install yarn 2- Run yarn install 3- Create rollup.config.mjs

// rollup.config.mjs
import resolve from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';

export default {
  input: 'src/index.ts', // Assuming your entry file is named index.ts
  output: {
    file: 'dist/bundle.js', // The output directory and filename for the bundle
    format: 'esm',
  },
  plugins: [
    resolve(),
    typescript({ tsconfig: 'tsconfig.json' }), // Use the correct path to your tsconfig.json
  ],
};

4- Run rollup -c rollup.config.mjs and i got this error:

src/index.ts → dist/bundle.js...
[!] (plugin rpt2) Error: Could not load C:\Users\archi\source\repos\components\node_modules\three\examples\jsm\renderers\CSS2DRenderer (imported by src/core/SimpleRenderer/index.ts): ENOENT: no such file or directory, open 'C:\Users\archi\source\repos\components\node_modules\three\examples\jsm\renderers\CSS2DRenderer'
Error: Could not load C:\Users\archi\source\repos\components\node_modules\three\examples\jsm\renderers\CSS2DRenderer (imported by src/core/SimpleRenderer/index.ts): ENOENT: no such file or directory, open 'C:\Users\archi\source\repos\components\node_modules\three\examples\jsm\renderers\CSS2DRenderer'

[nelsonhp3]

Interesting... I was having a similar problem with web-ifc-three, as illustrated in this issue: web-ifc-three issue #64 Now I've removed web-ifc-three and installed openbim-components and I'm having the same issue as yours.

//app.js
import * as THREE from "three"
import * as OBC from "openbim-components"

const container = document.getElementById('container')
const components = new OBC.Components()
components.scene = new OBC.SimpleScene(components)
components._renderer = new OBC.SimpleRenderer(components,container)
components.camera = new OBC.SimpleCamera(components)
components.raycaster = new OBC.SimpleRaycaster(components)
components.init()

//rollup.config.js
import resolve from "@rollup/plugin-node-resolve"

export default {
  input: "./app.js",
  output: [
    {
      format: "esm",
      file: "./bundle.js",
    },
  ],
  plugins: [resolve()],
}

"package.json"

  "scripts": {
    "watch": "rollup -w -c ./rollup.config.js"
  },
  "dependencies": {
    "@rollup/plugin-node-resolve": "^15.2.3",
    "openbim-components": "^1.1.5",
    "rollup": "^4.0.2",
    "three": "^0.152.2"
  },

[agviegas]

Hey @seghier , can you provide a full minimal repository where we can reproduce this?

Hey @nelsonhp3, are those all the files of your project? For rollup to work with Three.js latest versions (and other libraries), you need to write an extra config file. You can take a look at our config file and our extra config file for reference.

[agviegas]

We are now bundling all our libraries, both as modules and as cjs, so this should be solved. Let us know otherwise!