Nextjs fail on second dev load with TypeError: Cannot create property 'message' on symbol 'Symbol(skip)'

[glassdimlygr]

Environment

{
  "name": ...,
  "private": true,
  "workspaces": [
    "myWorkspace"
  ],
  "scripts": {
    ...
  },
  "resolutions": {
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@contentstack/venus-components": "2.2.4",
    "@wyw-in-js/babel-preset": "0.5.4",
    "@wyw-in-js/transform": "0.5.4",
    "@wyw-in-js/webpack-loader": "0.5.4",
    "@wyw-in-js/rollup": "0.5.4",
    "@wyw-in-js/processor-utils": "0.5.4",
    "linaria": "6.2.0",
    "@linaria/core": "6.2.0",
    "@linaria/react": "6.2.1",
    "@linaria/stylelint": "6.2.0"
  },
  "dependencies": {
    "@elastic/apm-rum": "5.12.0",
    "@elastic/apm-rum-react": "1.4.4",
    "@juggle/resize-observer": "3.4.0",
    "@storybook/client-logger": "^8.2.9",
    "canvas": "2.11.2",
    "chart.js": "4.4.3",
    "chartjs-plugin-datalabels": "2.2.0",
    "cookies-next": "2.1.2",
    "cors": "2.8.5",
    "csv-parser": "3.0.0",
    "dayjs": "1.11.9",
    "debug": "4.3.4",
    "deepmerge": "4.3.1",
    "dompurify": "3.1.5",
    "dotenv": "16.4.5",
    "downshift": "9.0.6",
    "email-validator": "2.0.4",
    "eslint-config-next": "14.1.2",
    "inversify": "6.0.1",
    "is-mergeable-object": "1.1.1",
    "keen-slider": "6.8.6",
    "linaria": "6.2.0",
    "nconf": "0.12.1",
    "net": "1.0.2",
    "next": "14.2.4",
    "next-seo": "6.1.0",
    "normalize.css": "8.0.1",
    "pino": "7.11.0",
    "pino-pretty": "7.6.1",
    "postcss": "8.4.27",
    "prettier": "3.2.5",
    "prop-types": "15.8.1",
    "query-string": "7.1.3",
    "querystring": "0.2.1",
    "rambda": "8.3.0",
    "react": "18.3.1",
    "react-circular-progressbar": "2.1.0",
    "react-dom": "18.3.1",
    "react-imask": "6",
    "react-is": "18.2.0",
    "react-router-dom": "6.22.2",
    "react-ssr-prepass": "1.5.0",
    "react-style-object-to-css": "1.1.2",
    "redaxios": "0.5.1",
    "redis": "4.6.12",
    "reflect-metadata": "0.1.13",
    "require-from-string": "2.0.2",
    "slugify": "1.6.6",
    "tls": "0.0.1",
    "ts-results": "3.3.0",
    "uid": "2.0.2",
    "zod": "3.22.0"
  },
  "devDependencies": {
    "@babel/core": "7.24.0",
    "@babel/plugin-proposal-decorators": "7.20.13",
    "@babel/preset-env": "7.20.2",
    "@babel/preset-typescript": "7.18.6",
    "@babel/runtime": "7.23.8",
    "@commitlint/cli": "19.0.3",
    "@commitlint/config-conventional": "19.0.3",
    "@digitalroute/cz-conventional-changelog-for-jira": "8.0.1",
    "@emotion/react": "11.11.4",
    "@guaranteed-rate/contentstack-bulk-publish-entries-assets": "git+ssh://[email protected]:Guaranteed-Rate/contentstack-bulk-publish-entries-assets.git#v1.1.1",
    "@guaranteed-rate/eslint-config-inception": "git+ssh://[email protected]:Guaranteed-Rate/eslint-config-inception.git#2.0.2",
    "@linaria/core": "6.2.0",
    "@linaria/react": "6.2.1",
    "@linaria/stylelint": "6.2.0",
    "@next/bundle-analyzer": "14.2.4",
    "@storybook/addon-actions": "^8.2.9",
    "@storybook/addon-controls": "^8.2.9",
    "@storybook/addon-docs": "^8.2.9",
    "@storybook/addon-essentials": "^8.2.9",
    "@storybook/addon-interactions": "^8.2.9",
    "@storybook/addon-knobs": "8.0.1",
    "@storybook/addon-links": "^8.2.9",
    "@storybook/addon-mdx-gfm": "^8.2.9",
    "@storybook/addon-themes": "^8.2.9",
    "@storybook/addon-viewport": "^8.2.9",
    "@storybook/builder-webpack5": "^8.2.9",
    "@storybook/core-events": "^8.2.9",
    "@storybook/jest": "0.2.3",
    "@storybook/manager-api": "^8.2.9",
    "@storybook/manager-webpack5": "6.5.16",
    "@storybook/nextjs": "^8.2.9",
    "@storybook/react": "^8.2.9",
    "@storybook/test": "^8.2.9",
    "@storybook/test-runner": "0.19.1",
    "@storybook/testing-library": "0.2.2",
    "@storybook/theming": "^8.2.9",
    "@stylelint/postcss-css-in-js": "0.38.0",
    "@testing-library/dom": "10.4.0",
    "@testing-library/jest-dom": "6.4.8",
    "@testing-library/react": "16.0.0",
    "@testing-library/react-hooks": "8.0.1",
    "@testing-library/user-event": "14.5.2",
    "@types/adm-zip": "0.5.5",
    "@types/axios": "0.14.0",
    "@types/command-exists": "1.2.3",
    "@types/cors": "2.8.17",
    "@types/debug": "4.1.12",
    "@types/dompurify": "3.0.5",
    "@types/express": "4.17.21",
    "@types/fs-extra": "11.0.4",
    "@types/gauge": "5",
    "@types/google.maps": "3.55.3",
    "@types/jest": "29.5.12",
    "@types/js-yaml": "4.0.9",
    "@types/json-diff": "1.0.3",
    "@types/node": "20.11.23",
    "@types/prop-types": "15",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@types/redis": "4.0.11",
    "@types/uuid": "8.3.4",
    "@typescript-eslint/eslint-plugin": "7.1.0",
    "@typescript-eslint/parser": "7.1.0",
    "@typescript-eslint/scope-manager": "7.16.0",
    "@typescript-eslint/typescript-estree": "7.16.0",
    "@wyw-in-js/babel-preset": "0.5.4",
    "@wyw-in-js/transform": "0.5.4",
    "@wyw-in-js/webpack-loader": "0.5.4",
    "adm-zip": "0.5.10",
    "babel-jest": "29.7.0",
    "babel-loader": "8.3.0",
    "babel-plugin-module-resolver": "5.0.0",
    "babel-plugin-transform-typescript-metadata": "0.3.2",
    "bun": "1.1.18",
    "chalk": "4.1.2",
    "chromatic": "11.0.0",
    "colors.js": "1.2.4",
    "command-exists": "1.2.9",
    "commitizen": "4.3.0",
    "concurrently": "8.2.2",
    "core-js": "3.36.0",
    "css-loader": "6.10.0",
    "cypress": "11.2.0",
    "emotion": "11.0.0",
    "enhanced-resolve": "5.15.1",
    "eslint": "8.57.0",
    "eslint-import-resolver-custom-alias": "1.3.2",
    "eslint-import-resolver-typescript": "3.6.1",
    "eslint-plugin-cypress": "2.15.1",
    "eslint-plugin-import": "2.29.1",
    "eslint-plugin-jest": "28.8.0",
    "eslint-plugin-jsx-a11y": "6.8.0",
    "eslint-plugin-no-relative-import-paths": "1.5.3",
    "eslint-plugin-react": "7.33.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-testing-library": "6.2.0",
    "fs-extra": "11.2.0",
    "gauge": "5.0.1",
    "http-server": "14.1.1",
    "husky": "9.0.11",
    "isomorphic-fetch": "3.0.0",
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "jest-environment-node": "29.7.0",
    "jest-expect-message": "1.1.3",
    "js-yaml": "4.1.0",
    "json-diff": "1.0.6",
    "kubernetes-types": "1.26.0",
    "lint-staged": "15.2.7",
    "mini-css-extract-plugin": "2.8.1",
    "next-with-linaria": "0.7.0",
    "nock": "13.5.4",
    "node-version-checker": "2.0.0",
    "nodemon": "3.1.0",
    "octokit": "3.1.2",
    "patch-package": "8.0.0",
    "postcss-jsx": "0.36.4",
    "postcss-syntax": "0.36.2",
    "raw-loader": "4.0.2",
    "react-docgen-typescript-plugin": "1.0.5",
    "storybook": "^8.2.9",
    "string-width": "7.1.0",
    "style-dictionary": "3.9.2",
    "style-loader": "3.3.4",
    "styled-components": "5.3.11",
    "stylelint": "14.16.1",
    "stylelint-config-recommended": "7.0.0",
    "tsconfig-paths": "4.2.0",
    "typescript": "5.3.3",
    "utility-types": "3.11.0",
    "wait-on": "7.2.0",
    "webfonts-loader": "7.5.2",
    "webpack": "5.88.2",
    "webpack-cli": "4.10.0",
    "webpack-config-dump-plugin": "3.0.3",
    "webpack-merge": "5.9.0",
    "webpack-shell-plugin-next": "2.3.1",
    "yargs-parser": "21.1.1"
  },
  "packageManager": "[email protected]",
  "engines": {
    "node": ">= 20.8.1",
    "npm": "please-use-yarn",
    "yarn": ">= 4.0.0"
  },
  "engineStrict": true
}

babel config

/* eslint-disable @typescript-eslint/no-var-requires */
const aliases = require('./babel.aliases.js');

module.exports = function (api) {
  // Disable Babel caching
  // api.cache(false);

  return {
    presets: [
      'next/babel',
      '@wyw-in-js'
    ],
    plugins: [
      [
        'module-resolver',
        {
          alias: aliases,
        }
      ],
      'babel-plugin-transform-typescript-metadata',
      [
        '@babel/plugin-proposal-decorators',
        {
          legacy: true
        }
      ]
    ]
  };
};

We have a workspace "myWorkspace" that is a child of this build (wanting to move to a monorepo soon).

{
  "name": "..",
  "version": "2.0.0-alpha.57",
  "repository": "...",
  "files": ["dist"],
  "types": "./dist/react-components/src/index.d.ts",
  "dependencies": {
    "chart.js": "4.4.3",
    "chartjs-plugin-datalabels": "^2.2.0",
    "cookies-next": "4.2.1",
    "downshift": "9.0.6",
    "normalize.css": "8.0.1",
    "phone": "3.1.39",
    "postcss": "8.4.28",
    "prop-types": "15.8.1",
    "qs": "6.11.2",
    "react-circular-progressbar": "2.1.0",
    "react-imask": "6",
    "react-loading-skeleton": "3.4.0",
    "react-style-object-to-css": "1.1.2",
    "react-svg": "16.1.34",
    "redaxios": "0.5.1",
    "uid": "2.0.2",
    "zod": "3.23.8"
  },
  "peerDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@babel/core": "7.24.0",
    "@babel/plugin-transform-runtime": "7.23.7",
    "@babel/preset-env": "7.23.8",
    "@babel/preset-react": "7.23.3",
    "@babel/preset-typescript": "7.23.3",
    "@babel/runtime": "7.23.8",
    "@linaria/core": "6.2.0",
    "@linaria/react": "6.2.0",
    "@linaria/stylelint": "6.1.0",
    "@rollup/plugin-babel": "6.0.4",
    "@rollup/plugin-commonjs": "26.0.1",
    "@rollup/plugin-json": "6.1.0",
    "@rollup/plugin-node-resolve": "15.2.3",
    "@rollup/plugin-replace": "5.0.7",
    "@types/fs-extra": "11.0.4",
    "@types/react-svg": "5.0.0",
    "@wyw-in-js/babel-preset": "0.5.0",
    "@wyw-in-js/rollup": "0.5.0",
    "@wyw-in-js/transform": "0.5.0",
    "autoprefixer": "10.4.15",
    "babel-plugin-module-resolver": "4.1.0",
    "fs-extra": "11.2.0",
    "nock": "13.5.4",
    "postcss-import": "14.1.0",
    "postcss-jsx": "0.36.4",
    "postcss-syntax": "0.36.2",
    "rollup": "3",
    "rollup-plugin-postcss": "4.0.2",
    "typescript": "5.3.3",
    "vite": "5.3.1"
  }
}

node --version
v20.11.1

yarn --version
4.3.1

MacOS

Description

When we run next dev, sometimes I get:

 ⨯ ./components/atoms/DropdownLinks/DropdownLinks.styles.js
TypeError: Cannot create property 'message' on symbol 'Symbol(skip)'
    at run.next (<anonymous>)
    at Generator.next (<anonymous>)
    at internalTransform.next (<anonymous>)
Import trace for requested module:
./components/atoms/DropdownLinks/DropdownLinks.styles.js
./components/atoms/DropdownLinks/DropdownLinks.tsx
./components/atoms/DropdownLinks/index.ts
./react-components/src/organisms/Header/components/Navigation.tsx
./react-components/src/organisms/Header/Header.tsx
./components/layouts/page-layouts/ArticleLayout.tsx
./components/layouts/page-layouts/index.ts
 ⨯ ./components/atoms/DropdownLinks/DropdownLinks.styles.js
TypeError: Cannot create property 'message' on symbol 'Symbol(skip)'
    at run.next (<anonymous>)
    at Generator.next (<anonymous>)
    at internalTransform.next (<anonymous>)
Import trace for requested module:
./components/atoms/DropdownLinks/DropdownLinks.styles.js
./components/atoms/DropdownLinks/DropdownLinks.tsx
./components/atoms/DropdownLinks/index.ts
./react-components/src/organisms/Header/components/Navigation.tsx
./react-components/src/organisms/Header/Header.tsx
./components/layouts/page-layouts/ArticleLayout.tsx
./components/layouts/page-layouts/index.ts

This happens after teh build completes, when the page loads.

Here are some details:
If I run this command I the problem is resolved on the first run:
"rm -rf .next && rm -rf node_modules .yarn/install-state.gz myWorkspace/node_modules && yarn install && cd myWorkspace && yarn install && next dev"

Refresh page, no error. Go to any page, no error.

If I kill the process and run next dev then load a page, the problem is back.

Things tried

1. Install linaria 6.1.0/1 and wyw 0.4.1. Same problem.
2. Install linaria 6.2.1 and friends and wyw 0.5.0/1/2/3/4/5 Same problem.
3. Delete .next between builds
4. Disable babel cache with api.cache(false)

Reproducible Demo

We are working on a reproducible demo. I know we have a complicated list of dependencies.

Do you have any thoughts for us @Anber ? As in, how might a build work after nuking node modules and reinstalling, then fail when the command is attempted a second time? I'm fine if this is a downstream issue, I just want to figure out how to resolve. Thank you for you work in Linara and innovation in wyw-in-js. We use it on an enterprise-level site.

[glassdimlygr]

Fixed.

    presets: [
      'next/babel',
     -'@wyw-in-js'
     +'@linaria'
    ],