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

Question

I have a Next.js website and I'm trying to import glsl via import glsl from "babel-plugin-glsl/macro", but I'm encountering the error TypeError: Cannot read properties of undefined (reading 'uid').

I got this error while trying to work around another error (related to accessing the fs module by the said package).

According to the plugin's usage instructions, you can include it in your .babelrc file and that's it. When doing that, I got the error Module not found: Can't resolve 'fs'.

I solved the error above by trying an alternative usage method indicated by the plugin's creator: adding the babel-plugin-macros package. Now after adding this package and including in the .babelrc file, I get the error TypeError: Cannot read properties of undefined (reading 'uid') — which I'm unable to debug since it's not coming from any file I author.

I even tried importing it via getServerSideProps but I got the same error.

=============================================================================

// test.js
import glsl from "babel-plugin-glsl/macro"

const TestPage = () => {
  console.log(glsl)

  return <div>Test Page</div>
}

export default TestPage

// export async function getServerSideProps() {
//   const glsl = require("babel-plugin-glsl/macro")

//   return {
//     props: {
//       glsl
//     }
//   }
// }

// .babelrc
{
  "plugins": ["glsl", "macros"],
  "presets": ["next/babel"]
}

{
  ...
  "dependencies": {
    "@radix-ui/react-accordion": "^0.1.6",
    "@react-three/drei": "^9.5.3",
    "@react-three/fiber": "^8.0.12",
    "baffle": "^0.3.6",
    "gsap": "^3.9.1",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-tabs": "^3.2.2",
    "three": "^0.139.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "babel-plugin-glsl": "^1.0.0",
    "babel-plugin-macros": "^3.1.0",
    "glslify": "^7.1.1",
    "sass": "^1.43.3"
  }
}