Cannot read property 'bindings' of null with babel 7+ #2811
Description
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?