require not defined for @jscad/csg and @jacad/stl-serializer package required for toJscadSTL function

[VasanthAtGitHub]

I have encountered an issue "require is not defined" while importing the @jscad/csg and @jacad/stl-serializer package which is required for toJscadSTL function. The website was built in typescript and i found that the issue occured in the package. Kindly help me to fix this issue and my main objective is to create a 3D model. I have already created the 2D model and i need to create a 3D model for the view. Please help

[danmarshall]

Can you describe your build and/or runtime environment? For example, are you using a <script> tag to load libraries in a browser? Or are you using node.js ?

[VasanthAtGitHub]

Yeah sure. Actually, We have used React JS for the front end and we have initiated the makerjs in typescript to create the models and displayed the models in the front end by importing the typescript class. Also, We have installed the makerjs libraries via yarn and the backend is written in Laravel. As of now, we are trying to create the 3D model using toJscadSTL() in typescript and we have shared the ts.config.json file below for your reference.

ts.config.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "allowJs": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "skipLibCheck": true
  },
  "files": [

    "./dev_server.ts"

  ],
}

here is how we have imported the @jscad/csg and @jscad/stl-serializer libraries in our ts file which is required as an argument for the toJscadSTL()

import * as csg from '../../../../../../packages/makerjs/docs/external/jscad/csg';
import * as serializer from '../../../../../../packages/makerjs/docs/external/jscad/stl-serializer';


export default class PartsModel {

  protected model_object;
  protected exported_canvas;

  protected export(): void {
  
      const dummyStatusCallback = (progress: any) => {
        console.log(progress);
      };

      const options = {
        statusCallback: dummyStatusCallback,
      };

      

      const exported_canvas = Builder.makerjs.exporter.toJscadSTL(
        csg.CAG,
        serializer.serialize,
        this.cad_object,
        options
      );

      this.exported_canvas = exported_canvas;

    }
}

Please review it and it would to be very helpful for us to move further. Thank you

[danmarshall]

Are you using a bundler, like webpack for example? Also, I'm unsure how you've installed the makerjs package. My guess is you've installed it via node.js as in the readme. But now I'm doing too much guessing 😂
Using the reference ../../../../../../packages/makerjs/docs/external/jscad/csg is suspect. You should be using @jscad/csg if you're in a node.js environment.

[VasanthAtGitHub]

We have installed the maker js via yarn and imported the makerjs as import MakerJs from "makerjs" in the typescript file. Without any problem we have created the 2D view of the object using toSvg(). While creating the 3D view of the object, based on the documentation we need to pass 4 arguments to the toJscadSTL().

toJscadSTL(CAG: typeof CAG, stlSerializer: StlSerializer, modelToExport: IModel, options?: IJscadCsgOptions): string | ArrayBuffer[]

As for first two paramertes we have tried installing @jscad/csg and @jscad/stl-serializer and importing them in the typescript file. As it doesn't work we have directly imported them using relative path to those packages which we cloned from the git.

As we are using the package in the browser environment. based on your previous comments we can't use these packages @jscad/csg and @jscad/stl-serializer in environments other than node.js environment. Is it possible to create a 3D model in a react application (Browser environment)? If so please suggest a way to integrate the 3D view of a model for browser environment. Also, we are using Es6 JS syntax for our project

[danmarshall]

Thanks for the reply. These facts are helping to understand your environment:

• yarn
• react
• browser
• es6

Now, can you tell me which bundler you are using, if any? Each bundler may have its own way of addressing module resolution. If you don't know what a bundler is, here's a few examples:

• webpack
• esbuild
• parcel
• vite

At some point, there's a <script> tag in the browser. You might have manually coded it, or a bundler has put it there. If you're able to add your own, try:

<script src="https://maker.js.org/external/jscad/csg.js"></script>
<script src="https://maker.js.org/external/jscad/stl-serializer.js"></script>

It's worth noting that the Jscad libraries that Maker.js is referencing are now out of date, so you'll need to refer to older versions. At the time Maker.js was written, the Jscad project was going through its major update to v2. Here's the versions at that time:

• @jscad/csg: 0.3.7
• @jscad/stl-serializer: 0.1.0

Thanks for your patience! It's probably time for a Maker.js to update to the latest :)

[jsonxzst]

Hi @danmarshall we are using vite (i am colleague of frank)

Basically our project struture is:

• Backend Laravel For API

• Frontend React

• Parts Builder - Typescript using makerjs

We are using vite for building assets

Below is builder.ts file content

import MakerJs from "makerjs"
import Utils from "./utils/utils"
import Parts from "./parts/parts"

export default class Builder {

  public readonly makerjs
  public readonly utils: Utils
  public readonly parts: Parts

  constructor() {

    this.makerjs = MakerJs

    this.utils = new Utils()

    this.parts = new Parts()

  }
  
}

we can get the makerjs reference using Builder

const builder = new Builder()

builder.makerjs

Package.json file

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "check": "vite build --debug",
    "preview": "vite preview",
    "gulp": "gulp"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "autoprefixer": "^10.4.13",
    "axios": "^1.2.3",
    "del": "6.1.1",
    "fontawesome-4.7": "^4.7.0",
    "gulp": "^4.0.2",
    "laravel-vite-plugin": "^0.7.2",
    "lodash": "^4.17.19",
    "postcss": "^8.4.21",
    "sass": "^1.57.1",
    "tailwindcss": "^3.2.4",
    "vite": "^4.2.1"
  },
"dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@material-ui/core": "^4.12.4",
    "@mui/icons-material": "^5.11.0",
    "@mui/lab": "^5.0.0-alpha.117",
    "@mui/material": "^5.11.6",
    "@vitejs/plugin-react": "^3.0.1",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "antd": "^5.3.2",
    "bootstrap": "^5.2.3",
    "gulp-copy": "^4.0.1",
    "gulp-flatten": "^0.4.0",
    "gulp-rename": "^2.0.0",
    "makerjs": "^0.18.0",
    "opentype.js": "^1.3.4",
    "primeicons": "^6.0.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^18.2.0",
    "react-phone-number-input": "^3.2.16",
    "react-router": "^6.7.0",
    "react-router-dom": "^6.7.0",
    "react-toastify": "^9.1.1",
    "styled-components": "^5.3.9",
    "three": "^0.156.1"
  }

[danmarshall]

I've created a sample repo which shows a minimal working example: https://github.com/danmarshall/makerjs-jscad-vite

Notable points:

• in package.json loaded specific (old) versions of the Jscad libraries. Now that Jscad is stable, I should create a new API.
• Using import statements in sample code:

import { CAG } from '@jscad/csg';
import * as stlSerializer from '@jscad/stl-serializer';

const stl = makerjs.exporter.toJscadSTL(CAG, stlSerializer, star, { extrude: 50 });

[danmarshall]

Also, here is the <script> tag version, for those not using a bundler:

• example: https://maker.js.org/external/jscad/
• source: https://github.com/microsoft/maker.js/blob/master/docs/external/jscad/index.html