CODEWITHSUNDEEP
reactjstypescriptbabeljsnext.js
Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 4748

regeneratorRuntime is not defined rete.js

Well i am able to find a solution for my problem. I am trying to use Rete.js in Next.js with Typescript. I am seeing the following error:

regeneratorRuntime is not defined

Here are my configuration's

package.json

"dependencies": {
    "@types/next": "^9.0.0",
    "@types/react": "^16.9.19",
    "next": "^9.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "rete": "^1.4.3-rc.1",
    "rete-area-plugin": "^0.2.1",
    "rete-connection-plugin": "^0.9.0",
    "rete-dock-plugin": "^0.2.1",
    "rete-react-render-plugin": "^0.2.0"
  },
"devDependencies": {
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@types/node": "^13.7.1",
    "typescript": "^3.7.5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": [
      "dom",
      "es2017"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

.babelrc

{
    "presets": ["next/babel"],
    "plugins": [
        [
          "@babel/plugin-transform-runtime",
          {
            "absoluteRuntime": false,
            "corejs": false,
            "helpers": true,
            "regenerator": true,
            "useESModules": false,
            "version": "7.0.0-beta.0"
          }
        ]
    ]
 }

I have also tried to install core-js and regenerator-runtime and tried it as:

import "core-js/stable";
import "regenerator-runtime/runtime";

But nothing worked for me. Can you suggest something that can resolve my issue.

Upvotes: 3

Views: 1221

Answers (1)

Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 4748

There is no need for core-js and regenerator-runtime to be installed. @babel/plugin-transform-runtime is providing the runtime that is required. I was just missing a basic thing, not adding the @babel/preset-env. I was supposing that next/babel includes all the things required for .babelrc file but that was not the case. Here is the final .babelrc file that worked for me.

{
    "presets": [
        "@babel/preset-env",
        "next/babel"
      ],
      "plugins": [
        ["@babel/plugin-transform-runtime"]
      ]     
}

Upvotes: 1

Related Questions