Cannot read property 'bindings' of null with babel 7+

[sankalp-jhingran]

I am trying to use server side rendering for design-system-react. It works fine till I include design-system-react and its preset.
I am getting below trace and errors when compiling with npm run webpack

Trace: The node type SpreadProperty has been renamed to SpreadElement
at Object.isSpreadProperty (/Users/sankalp.jhingran/Documents/forum/node_modules/@babel/types/lib/validators/generated/index.js:4672:11)
at hasSpread (/Users/sankalp.jhingran/Documents/forum/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js:38:13)

ERROR in ./src/pages/about.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/sankalp.jhingran/Documents/forum/src/pages/about.jsx: Cannot read property 'bindings' of null
at Scope.moveBindingTo (/Users/sankalp.jhingran/Documents/forum/node_modules/@babel/traverse/lib/scope/index.js:944:13)

ERROR in ./src/pages/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/sankalp.jhingran/Documents/forum/src/pages/index.jsx: Cannot read property 'bindings' of null

webpack.config

loader: 'babel-loader',
                    options: {
                        "presets": [
                            "@babel/preset-env",
                            "@babel/preset-react",
                            "@salesforce/babel-preset-design-system-react"
                        ],
                        "plugins": [
                            "@babel/plugin-proposal-object-rest-spread",
                            "@babel/plugin-proposal-export-default-from",
                            "@babel/plugin-proposal-export-namespace-from",
                            [
                                "@babel/plugin-proposal-class-properties",
                                {
                                    "loose": true
                                }
                            ]
                        ]
                    }

.babelrc.js

const presets =
  [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    [
      "@babel/preset-react"
    ],
      [
          "@salesforce/babel-preset-design-system-react"
      ]
  ]

const plugins = [
  "@babel/plugin-proposal-class-properties",
]

package.json

"devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.4",
    "@babel/node": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-export-default-from": "^7.12.13",
    "@babel/polyfill": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-file-loader": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-require-ignore": "^0.1.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "@salesforce/babel-preset-design-system-react": "^3.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "nodemon": "^2.0.2",
    "raw-loader": "^4.0.1",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@salesforce-ux/design-system": "^2.14.3",
    "@salesforce/design-system-react": "^0.10.31",
    "body-parser": "^1.19.0",
    "compression": "^1.7.4",
    "ejs": "^3.0.1",
    "express": "^4.17.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }

As per this issue comment, the design-system-react should support babel 7+.

I have also tried to use

Any ideas on how to get past this?

[welcome]

Thanks for opening your first issue! 👋
If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

[sankalp-jhingran]

@interactivellama any insights here? thanks!

[sankalp-jhingran]

Able to resolve the issue by removing the "@salesforce/babel-preset-design-system-react" preset from design-system-react and using only "@babel/preset-env", "@babel/preset-react" for babel. Closing this issue.

[interactivellama]

Thank you for the call out. I will update the docs to recommending use the presents instead of the "provided preset" which is for Babel 6 only.