Import error in generateMeshBVHWorker (Needle and NextJS integration)

[th33ahn]

Hi! So I’m having issues integrating needles into my existing NextJs project. To my knowledge I have added everything that is mentioned in the nextjs-sample. I’ve attached images of the project structure and error.

Everything seems to build properly but the error occurs when a request is made to the webpage.

[needle-assistant (Needle Engine Assistant)]

Hi th33ahn! I’m an AI-powered assistant here to help you. I can provide support regarding Needle Engine, three.js, and basic Unity or Blender help.

To assist you better with your import error, please share your OS, Needle Engine version, and Next.js version. Just reply with the details, and I’ll be glad to help!

2 replies left - GPT 4O
thread_d6cIWylBSJoe5qBas5q8Ilu6
Reply to this message to continue the conversation

[th33ahn]

Needles version: 3.47.2-beta.3
Next version: 14.2.5

[needle-assistant (Needle Engine Assistant)]

Thank you for providing the details, th33ahn. Given that you’re experiencing an import error in the generateMeshBVHWorker, here are some steps to troubleshoot the integration issue:

1. Install Necessary Dependencies: Ensure all necessary dependencies for Needle Engine and Next.js are correctly installed. You can check your package.json for any missing dependencies.

2. Check Import Statements: Make sure the import statements for Needle Engine in your Next.js files are correctly formatted and that the paths are valid.

3. Inspect File Structure: Verify that the project structure aligns with the example structure provided in the Next.js sample. Any discrepancies might lead to import errors.

4. Server Logs: Examine the server logs during a request to identify specific errors. This might provide more insights into what’s going wrong.

5. Network Exceptions: Sometimes, network issues can impact loading resources. Ensure that your environment has the necessary access.

If the error persists, please share any specific error messages displayed when the webpage is accessed. This information will help diagnose the issue more accurately.

1 replies left - GPT 4O
thread_d6cIWylBSJoe5qBas5q8Ilu6
Reply to this message to continue the conversation

[marcel (marwi)]

Hi, this will be fixed in the next engine version.

Until then you can modify your next.config.js to include the following:

// add this to the top
const { resolve } = require("path");

// modify your webpack config to include the loader:

module.exports = async () => {
      // .......
      // <your current config>
      config.module.rules.push({
          test: /generateMeshBVH.worker\.js$/,
          loader: resolve(__dirname, 'meshBVHWorker.cjs')
      });
      return config;
    }
  }, { modules: { webpack } });

and then create a file named meshBVHWorker.cjs e.g. in your root directory and copy paste the following code:

/**
 * @param {string} source
 */
module.exports = function (source, _map) {
    if (source.includes("Modified by Needle")) return source;
    console.log("Transform mesh-bvh-worker")
    return `// Modified by Needle
const workerCode = ${JSON.stringify(source)};
const blob = new Blob([workerCode], { type: 'application/javascript' });
const workerUrl = URL.createObjectURL(blob);
export default function() {
    return new Worker(workerUrl, { type: 'module' });
};`;
};