Generating code with babel-plugin-codegen: Module not found: Can't resolve 'fs'

Question

I'm trying to generate a component during the build based on some params using babel-plugin-codegen (https://github.com/kentcdodds/babel-plugin-codegen). I've spent hours and this is where I'm at now: it looks like my component is successfully generated through babel-cli, but not during build-time. I get an error: Module not found: Can't resolve 'fs'.

Here is my repo: https://github.com/abimatov/babel-macro-demo

Here are my detailed steps:

1. I created a new Next.js project (https://nextjs.org/docs): npx create-next-app@latest
2. Started the application: npm run dev
3. Ran npm i @babel/core --save-dev, npm i @babel/cli --save-dev, npm i babel-plugin-macros --save-dev, npm install --save-dev babel-plugin-preval, npm install --save-dev babel-plugin-codegen
4. Created a .babelrc file with the following contents:

{
  "presets": ["next/babel"],
  "plugins": ["macros", "preval", "codegen"]
}

5. My pages/index.js looks something like this:

import codegen from 'babel-plugin-codegen';


export default function Home() {
  const CodegenComponent = codegen.require('../components/codegenDemo');
  return <>
    <CodegenComponent />
  </>;
}

6. My codegenDemo.js looks like this:

module.exports = (input) => `<div>${input}</div>`;

7. I run npx babel .\pages\index.js and the output looks right-ish to me:

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = Home;
var _react = _interopRequireDefault(require("react"));
var _babelPluginCodegen = _interopRequireDefault(require("babel-plugin-codegen"));
var __jsx = _react["default"].createElement;
function Home() {
  var CodegenComponent = __jsx("div", null, "undefined");
  return __jsx(_react["default"].Fragment, null, __jsx(CodegenComponent, null));
}

8. I run npm run dev and go to localhost:3000

Expected result: I should see the CodegenComponent rendered (basically, just <div></div>).

Actual result: An error that Module not found: Can't resolve 'fs'

Answer 1

Solution:

codegenDemo.js:

module.exports = (input) => `const CodegenComponent = () => <div>${input}</div>`;

pages/index.js:

import /* codegen(123) */ '../components/codegenDemo';
export default function Home() {
  return <>
    <CodegenComponent />
  </>;
}