Webpack build failing with "Cannot read property 'bindings' of null"

I’m seeing some unusual behavior when add the design-system-react to my build. When it is not present, this builds successfully as expected:

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Test from './Test';

ReactDOM.render(<Test/>, document.getElementById('app'));

When I add path.join(__dirname, 'node_modules/@salesforce/design-system-react') to my webpack config and "@salesforce/babel-preset-design-system-react" to my babelrc file, the build fails with the error in the subject.

Oddly, if I remove the import of the Test component and use

ReactDOM.render(<p>Hi from index</p>, document.getElementById('app')); in my index file, the compile is successful.

Here are the relevant files:

webpack.config.js

const path = require('path');
const webpack = require('webpack'); // doesn't seem to be used
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: [
            '.js',
            '.jsx'
        ]
    },
    module: {
        rules: [
            {
                test:/\.(jsx?)$/,
                exclude: /node_modules/,
                include: [
                    path.join(__dirname, 'src'),
                    path.join(__dirname, 'node_modules/@salesforce/design-system-react')
                ],
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract(
                    'style-loader',
                    'css-loader?url=false&outputStyle=expanded&sourceMap=true&sourceMapContents=true'
                )
            },
            {
                test: /\.(svg|gif|jpe?g|png)$/,
                loader: 'url-loader?limit=10000'
            },
            {
                test: /\.(eot|woff|woff2|ttf)$/,
                loader: 'url-loader?limit=30&name=assets/fonts/webfonts/[name].[ext]'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new ExtractTextPlugin('[name].css')
    ]
}

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react", "@salesforce/babel-preset-design-system-react"]
}

src/Test.js

import React from 'react';

class Test extends React.Component {
    render() {
        return(
            <p>Hi from test</p>
        );
    }
}

export default Test;

I’m fairly new to babel and webpack so hope it’s not something obvious I’m missing.

I’ve looked through the existing open and closed issues, but can’t find anything similar. Hoping someone can help as I’d really like to use this library with a current project.

Thanks.

[cakirlarc]

As the source code of preset at https://github.com/salesforce/design-system-react/blob/master/preset/index.js evolved

Here is an update for @CrazyByDefault 's sample solution. I hope it helps people like me diving into this library.

In your webpack config, add these rules/options for babel-loader:

        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    include: [
                        'node_modules/@salesforce/design-system-react',
                    ].map(
                        someDir => path.resolve(
                            process.cwd(),
                            someDir
                        )
                    ),
                    loader: require.resolve('babel-loader'),
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react",
                        ]
                    }
                },
            ]
        }

[CrazyByDefault]

Hi, an update for those looking to build them in webpack and not use named imports

We were able to build using these presets, which are simply the updated babel7+ valid versions of the packages that the salesforce wrapper tries to import here https://github.com/salesforce/design-system-react/blob/master/preset/index.js

In your webpack config, add these options for babel-loader:

loader: 'babel-loader',
options: {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-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
              }
          ]
        ]
    }
  ]
}

and you should be good!

@interactivellama maybe this should be added to the main README instead of importing the now outdated preset?