ERROR ReferenceError: btoa is not defined

[robertsmieja]

I'm using this plugin with mdx.js - https://mdxjs.com/ and next.js - https://nextjs.org/

The project is located at - https://github.com/robertsmieja/nextjs-md-sandbox

Steps the reproduce:

1. Uncomment the remark-code-screenshot plugin in next.config.js
2. npm run dev

This is the code that seems be causing the issue:

var getCodeScreenshot = function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee(src) {
        var codeType, srcArg, res;
        return _regenerator2.default.wrap(function _callee$(_context) {
            while (1) {
                switch (_context.prev = _context.next) {
                    case 0:
                        codeType = "javascript", srcArg = btoa(src);
                        _context.next = 3;
                        return fetch("https://84wz7ux5rc.execute-api.us-east-1.amazonaws.com/default/screenshot-as-a-service-dev-screenshot-function?type=code&code=" + srcArg + "&codeType=" + codeType);

                    case 3:
                        res = _context.sent;
                        return _context.abrupt("return", res.text());

                    case 5:
                    case "end":
                        return _context.stop();
                }
            }
        }, _callee, this);
    }));

    return function getCodeScreenshot(_x) {
        return _ref.apply(this, arguments);
    };
}();

OS: Windows 10 64-bit Node.js: v12.16.0 npm: 6.13.4

[TicTak21]

+1

[bluprince13]

I had the same issue - also with next.js and mdx. I think it's because btoa is only available on the browser and not with node. I'm not sure how to solve it though.

[bluprince13]

See https://github.com/nodejs/node/issues/3462