Error on web-ifc-three instalation in a Next.js app

[gabrielwebphy]

If i have a next.js app i install web-ifc-three, the following screen will appear:

[gabrielwebphy]

I also tested it with a React app (create-react-app). The setup worked fine, and the errors that prevented me from opening the Next app were just warnings while I was compiling. But when I tried to load the model with the IFCLoader, the following error appeared (the following images are the part of the code that resulted in the error, the compiling warnings and the error in the website console):

[sinedie]

There is a workaround is in the discord server: https://discord.com/channels/799990228336115742/1091078047228235877

Just need to transpile packages

[yukiyokotani]

I think the package.json for web-ifc-three is wrong. web-ifc-three refers to an ESM named IFCLoader.js in the "main" property of package.json. However, according to the Node.js specification, if you want the file to be loaded as an ESM, the extension must be .mjs or the value of the "type" field must be "module". web-ifc-three satisfies neither of these requirements. Therefore, Next.js is mistakenly reading web-ifc-three as CommonJS.

[yukiyokotani]

As a further problem, I tried rewriting the web-ifc-three's package.json to reference the IFCLoader.umd.cjs included with web-ifc-three in the "main" property, but this UMD is trying to load an ESM 'three/examples/jsm/utils/BufferGeometryUtils' (By the way, this can't solved without the .js extension, so I actually changed it to 'three/examples/jsm/utils/BufferGeometryUtils.js'.) with require, which also results in an error.

[antonyadhiban]

I am using the following post-install script as a workaround to avoid build issues in my angular application.

`const fs = require('fs'); const path = require('path');

const filePath = path.join(__dirname, 'node_modules/.pnpm/[email protected][email protected]/node_modules/web-ifc-three/IFCLoader.js'); let fileContent = fs.readFileSync(filePath, 'utf8');

fileContent = fileContent.replace( "from 'three/examples/jsm/utils/BufferGeometryUtils'", "from 'three/examples/jsm/utils/BufferGeometryUtils.js'" );

fs.writeFileSync(filePath, fileContent);`