Issue with typescript compilation when in fresh Next.js app

[jakeberg]

Getting typescript compilation error when building in fresh Next.js app. Node version: v20.9.0

 ⨯ ./node_modules/@gorules/jdm-editor/dist/index.d.ts
Module parse failed: Unexpected token (30:7)
| import { z } from 'zod';
| 
> export declare const anyNodeSchema: z.ZodObject<z.objectUtil.extendShape<{
|     type: z.ZodString;
|     content: z.ZodOptional<z.ZodNullable<z.ZodAny>>;

Import trace for requested module:
./node_modules/@gorules/jdm-editor/dist/index.d.ts
./node_modules/@gorules/jdm-editor/dist/ lazy ^.*$ strict namespace object
./node_modules/@gorules/jdm-editor/dist/index-CoGe-6L0.js
./node_modules/@gorules/jdm-editor/dist/jdm-editor.js

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": [
    "node_modules", "node_modules/@gorules/jdm-editor/dist/**/*.d.ts"
  ]
}

package.json

{
  "name": "jdm-editor-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@gorules/jdm-editor": "^1.18.0",
    "next": "14.2.14",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.14",
    "typescript": "^5"
  }
}

[jakeberg]

It looks like this is a breaking error that started in 1.17.0. However, all previous versions have a non-breaking error that says:

 TypeError: Cannot read properties of undefined (reading 'ace')

[amitdharmapurikar]

I'm facing same issue.

[jakeberg]

I want to add to this issue that the "GraphSimulator" does not seem to display the results in the "Response" area. Could this be because of "ace" missing? I noticed that Ace is being used to render the values.

Simulation is also not rendering response in StoryBook - https://gorules.github.io/jdm-editor/?path=/story/decision-graph--simulator&globals=backgrounds.grid:!false

[jakeberg]

I'm facing same issue.

FYI, was never able to get this package to fully work with Next.js. It looks like this package only works with something like Vite - https://vite.dev/

[nimbit-software]

I got it working with nextjs ill share an example tomorrow

[freshway]

I got it working with nextjs ill share an example tomorrow

@nimbit-software please, have you published this?.

I´m just working on a project with the same requirements. Thanks in advance.

[stefan-gorules]

We've had similar issues with Next.js but latest releases should have solved them. For example, import is being done:

const DecisionGraph = dynamic(
  async () => {
    const { DecisionGraph } = await import('@gorules/jdm-editor');
    return DecisionGraph;
  },
  { ssr: false },
);

Note the ssr being disabled. Let me know if this works for you.

We utilise this in our solution pages, e.g. https://gorules.io/use-cases/company-analysis, and our website is built on Next.js (version 15).

[padmakarkasture]

issue

in the next js i am getting this issue for version 1.23.3

⨯ ./node_modules/@gorules/jdm-editor/dist/style.css:5:1
Module not found: Invalid generator object. Asset Modules Plugin has been initialized using a generator object that does not match the API schema.
 - generator has an unknown property 'filename'. These properties are valid:
   object { binary?, dataUrl? }
   -> Generator options for asset/inline modules.

tried

I have also imported dependencies dynamically

const DecisionGraph = dynamic(
    async () => {
      const { DecisionGraph } = await import('@gorules/jdm-editor');
      return DecisionGraph;
    },
    { ssr: false },
  );

  const JdmConfigProvider = dynamic(
    async () => {
      const { JdmConfigProvider } = await import('@gorules/jdm-editor');
      return JdmConfigProvider;
    },
    { ssr: false },
  );

  const GraphSimulator = dynamic(
    async () => {
      const { GraphSimulator } = await import('@gorules/jdm-editor');
      return GraphSimulator;
    },
    { ssr: false },
  );

do anyone faced this issue and solved it please help me here thanks in advance.