require is not defined after using plugin-transform-runtime

Question

I am trying to create a simple ui window, where i can quickly test react code. So the idea is that i am typing react jsx code into the window and in the other window i am getting app rendered from that code.

Input (with react jsx code) is sent to the nodejs process that converts it to normal js code that can be processed with in browser react library. The problem i am having is with this error regeneratorRuntime is not defined.

my current code:

const babel = require("@babel/core");

// body comes from window input

console.log(
    babel.transform(body, {
        "presets": ["@babel/env", "@babel/react"],
        "plugins": ["@babel/plugin-proposal-class-properties"]
    }).code
);

I read few topics about this error and most seem to recommend to add "@babel/plugin-transform-runtime"

so it becomes:

console.log(
    babel.transform(body, {
        "presets": ["@babel/env", "@babel/react"],
        "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
    }).code
);

However at this point code returned by babel transform contains these at beginning:

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

But since this code is processed by browser it throws error Uncaught ReferenceError: require is not defined

How can this be solved to feed browser with already "ready" code that doesnt contain any requires?

user_5590857 · Answer

Basically to run the plugin-transform-runtime, you will need some kind of bundler. Have a look at babelify.

user_8370370 · Answer

I had this issue while testing a module meant for both web and node targets (front and backend). When the bundle was ready, pasting it on the browser console to check the functionality threw up the exact same eror.

Things that worked for me when I had this issue:

Check the version of Nodejs in your system. if you see type: module in your package.json this would throw an error on require usage since it is expecting es6 import. If you see, try changing it to type: commonjs or remove it from package.json
Yes @babel/polyfill which is now @babel/plugin-transform-runtime has all the builtins, helpers to support Promise, Symbol, Set, and other ES6 builtins. Earlier we relied on Bluebird to backup Promise in browsers. Babel runtime and Babel plugin transform runtime needs a check.
As an alternative you could try @babel/register to run files using babel on the fly. The require hook will bind itself to the node’s require and will automatically compile files at runtime.
If you're using nodeexternals then it would expect node's require function. Set the target as umd
Add this "modules": "commonjs" to your .babelrc file.
I had to specify libraryTarget: 'umd' in the webpack.config output. It is needed for nodeExternals as well if used. The UMD (Universal module definition) format allows JavaScript modules to be imported using commonjs.

The last step 6 may or may not be applicable for you, but for me steps 1,2,3 and 6 resolved all issues.

require is not defined after using plugin-transform-runtime

2 Answers