Unhandled Runtime Error ReferenceError: module is not defined

[60pfennig]

Hi,
I have tried installing pandaCSS in two different Next.js projects and in both I get an error. I followed exactly the installation guide in the docs.

Stack:

Unhandled Runtime Error

ReferenceError: module is not defined
Call Stack
<unknown>
webpack-internal:///./styled-system/helpers.mjs (487:30)
./styled-system/helpers.mjs
file:/Users/fkall/Code/Bit-now/admin/.next/static/chunks/pages/_app.js (496:1)
options.factory
/_next/static/chunks/webpack.js (685:31)
__webpack_require__
file:/Users/fkall/Code/Bit-now/admin/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (354:21)
<unknown>
webpack-internal:///./styled-system/css/css.mjs (9:89)
./styled-system/css/css.mjs
file:/Users/fkall/Code/Bit-now/admin/.next/static/chunks/pages/_app.js (441:1)
options.factory
/_next/static/chunks/webpack.js (685:31)
__webpack_require__
file:/Users/fkall/Code/Bit-now/admin/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (354:21)
<unknown>
webpack-internal:///./styled-system/css/index.mjs (2:85)
./styled-system/css/index.mjs
file:/Users/fkall/Code/Bit-now/admin/.next/static/chunks/pages/_app.js (474:1)
options.factory
/_next/static/chunks/webpack.js (685:31)

Package JSON:

{
  "name": "nextjs-admin-template",
  "private": true,
  "description": "Admin dashboard template based on nextjs with @paljs/ui component package",
  "version": "0.1.0",
  "author": "Ahmed Elywa",
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "29.2.0",
    "@ckeditor/ckeditor5-react": "3.0.2",
    "@paljs/admin": "^4.0.13",
    "@paljs/icons": "1.0.5",
    "@paljs/ui": "1.1.1",
    "@tinymce/tinymce-react": "3.12.6",
    "@types/axios": "^0.14.0",
    "@types/date-fns": "^2.6.0",
    "@types/styled-system": "^5.1.18",
    "axios": "^0.24.0",
    "babel-plugin-styled-components": "^1.13.2",
    "bitcoinjs-message": "^2.2.0",
    "date-fns": "^2.27.0",
    "file-saver": "^2.0.5",
    "next": "^11.1.2",
    "react": "17.0.2",
    "react-csv": "^2.2.2",
    "react-dom": "17.0.2",
    "react-hot-toast": "^2.4.1",
    "styled-components": "5.3.1"
  },
  "keywords": [
    "react",
    "component",
    "styled",
    "oah"
  ],
  "license": "MIT",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "rerun": "next build && next start --port ${PORT-3002}",
    "start": "next start --port ${PORT-3002}",
    "export": "yarn build && next export -o _static",
    "prepare": "husky install && panda codegen"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/paljs/nextjs-admin-template"
  },
  "bugs": {
    "url": "https://github.com/paljs/nextjs-admin-template/issues"
  },
  "devDependencies": {
    "@pandacss/dev": "^0.15.5",
    "@types/node": "16.7.10",
    "@types/react": "17.0.19",
    "@types/react-dom": "17.0.9",
    "@types/react-select": "4.0.17",
    "@types/styled-components": "5.1.13",
    "@typescript-eslint/eslint-plugin": "4.30.0",
    "@typescript-eslint/parser": "4.30.0",
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.25.1",
    "husky": "7.0.2",
    "prettier": "2.3.2",
    "pretty-quick": "3.1.1",
    "react-live": "2.3.0",
    "typescript": "4.4.2"
  }
}

Thank you for your help! :)

[astahmer]

hey, can you make it in a minimal repro ? would be very helpful to debug !