Seeming incompatibility with Babel7

[DougMidgley]

Looking to build an example template using express, webpack 4 and babel 7 but am struggling with some of the webpack aspects.
Code visible here : https://github.com/DougMidgley/slds-react-template
It seems that when compiling some very basic example that Class Properties used in the SDLS Components are causing the following error

ERROR in ./node_modules/@salesforce/design-system-react/components/button/index.jsx 36:20
Module parse failed: Unexpected token (36:20)
You may need an appropriate loader to handle this file type.
|  */
| class Button extends React.Component {
>       static displayName = BUTTON;
| 
|       static propTypes = {
 @ ./src/App.jsx 21:0-87 43:66-72
 @ ./src/index.js

As per the repo you can see that the webpack plugin for managing class properties is there and it is handling it correctly for the App.jsx component.

I tried adding @salesforce/babel-preset-design-system-react to the babel presets, but this was throwing another error which seems to relate to incompatibilities between Babel 6 and Babel 7 (the present is designed for Babel 6).

.babelrc

{
    "presets": ["@salesforce/babel-preset-design-system-react"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

ERROR in ./src/App.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\scope\index.js:864:13)
    at BlockScoping.updateScopeInfo (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:364:17)
    at BlockScoping.run (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:330:12)
    at PluginPass.BlockStatementSwitchStatementProgram (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:70:24)
    at newFn (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\visitors.js:193:21)
    at NodePath._call (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\path\context.js:53:20)
    at NodePath.call (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\path\context.js:40:17)
    at NodePath.visit (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\path\context.js:88:12)
    at TraversalContext.visitQueue (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\context.js:118:16)
    at TraversalContext.visitSingle (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\context.js:90:19)
    at TraversalContext.visit (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\context.js:146:19)
    at Function.traverse.node (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\index.js:94:17)
    at traverse (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\traverse\lib\index.js:76:12)
    at transformFile (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\core\lib\transformation\index.js:88:29)    at runSync (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\core\lib\transformation\index.js:45:3)
    at runAsync (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\core\lib\transformation\index.js:35:14)
    at process.nextTick (C:\Users\douglas.midgley\workspace\react-express-template\node_modules\@babel\core\lib\transform.js:34:34)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./src/index.js 11:11-31

Basically looking to try and understand why this happening

[interactivellama]

Apologies for the delay, I lost this notification in my emails.

We have Babel 7 running in the library today. Do these settings work for you?
https://github.com/salesforce/design-system-react/blob/master/.babelrc#L1

It uses: "@babel/preset-react"

		"@babel/plugin-proposal-object-rest-spread",
		"@babel/plugin-proposal-class-properties",
		"@babel/plugin-proposal-export-default-from",
		"@babel/plugin-proposal-export-namespace-from"

There's also a no preset option, too. You can change the imports to named imports and get transpiled modules. import { Button } from '@salesforce/design-system-react';

Here is an in-progress branch of Babel/Webpack 4 that should help also. It uses the babel.config.js type of config.

https://github.com/interactivellama/design-system-react/blob/storybook-upgrade-5/babel.config.js

[stale]

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.