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

[evanmcd]

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.

[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.

[interactivellama]

Since you are new, I will ask, did you npm install @salesforce/babel-preset-design-system-react?

If that doesn't work, I do know plenty of folks that do use the named import version without issue. The primary reason that I recommend the source code version is that there are so many different ways to build things, and so many engineers that want to micro-optimize things their own way, and I don't want to debug folks webpack configs. 😉 I can just say, uh here's the source, go to town with your own build.

[interactivellama]

The repo itself is using the babel plugin for storybook, so you might look there. I'm going to close this issue, since the named import version shouldn't require babel presets. Feel free to re-open with new information and to hopefully post what the issue was so other can learn. 🎉

[evanmcd]

Hey @interactivellama thanks for the response. I've ended up just importing the main SLDS CSS and a static resource, rather than getting it into webpack, and am now using the named import version instead of the source code.

It's working, so... I'm good with it.

Thanks.

[davidakerr]

Adding the babel preset to a fresh create react app breaks serviceWorker.js
TypeError: Cannot read property 'bindings' of null

[interactivellama]

I guessing we have old Babel presets.

The preset config is located at
https://github.com/salesforce/design-system-react/tree/master/preset

But eventually will be moved to https://github.com/salesforce/babel-preset-design-system-react

[davidakerr]

@interactivellama I'm trying to use the master branch in my project in order to add some features to the input elements (I find the way the components are written to be easier to work with). I get the error:

Failed to compile
./node_modules/@salesforce/design-system-react/components/index.js
SyntaxError: C:\projects\master-test-cra\node_modules\@salesforce\design-system-react\components\index.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (4:8):

  2 | /* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  3 | 
> 4 | export SLDSSettings from './settings';
    |        ^
  5 | export Settings from './settings';
  6 | 
  7 | export SLDSIconSettings from './icon-settings';

Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.

Do I have any hope of using the master branch ?

[interactivellama]

That's the first line that has a default export in the library, which means https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from is probably not working.

There are three versions of the preset. You might try 3.0. Currently this library is installing 1.0

"@salesforce/babel-preset-design-system-react": "^1.0.0",

[CrazyByDefault]

Hi,

We've been running into the same issues as above while trying to use the preset:

ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null

Like you mentioned @interactivellama, the preset seems to be a wrapper for outdated Babel presets. Why not simply ask users to use the presets in their own .babelrc and not serve this package? As such I don't see the use of it, except requiring additional maintenance.

[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?

[interactivellama]

@CrazyByDefault Link to your issue comment added in readme. Thank you! https://github.com/salesforce/design-system-react/blob/master/README.md#transpile-with-babelrc-settings

[cemcakirlar]

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",
                        ]
                    }
                },
            ]
        }

[shannonio]

Does anyone know the equivalent changes that might need to be made to get this to work with Parcel instead of webpack?

I am experiencing these same issues and have tried updating my babelrc to no avail and still getting this error on every compile:

🚨  /Users/sbertucci/Development/Lifespark/family-app/salesforce/node_modules/@salesforce/design-system-react/components/data-table/index.jsx:1134:3: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (1134:3)
  1132 |
  1133 | 		let component = (
> 1134 | 			<React.Fragment>
       | 		^
  1135 | 				<TableContext.Provider
  1136 | 					value={this.getTableContext(this.state, this.getKeyboardNavigation())}
  1137 | 				>

[0xW1sKy]

for anyone else struggling this even after reading the full series of comments above, here is my working config
Note: i'm not using any .babelrc files.

<APP_ROOT>/webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
    entry: {
        bundle: './public/src/index.js'
    },
    resolve: {
        extensions: [
            '',
            '.js',
            '.jsx'
        ]
    },
    devtool: 'source-map',
    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].js',
        publicPath: '/'
    },
    module: {
        rules: [{
                test: /\.jsx?$/,
                include: [
                    path.join(__dirname, 'node_modules/@salesforce/design-system-react'),
                ],
                loader: require.resolve('babel-loader'),
                options: {
                    presets: [
                        [
                            "@babel/preset-env",
                            {
                                "modules": "commonjs",
                                "targets": {
                                    "node": "current"
                                }
                            }
                        ],
                        "@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
                                    }
                                ]
                            ]
                        }
                    ]
                }
            },
            {
                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]'
            }
        ]
    },
    stats: {
        warningsFilter: [/Failed to parse source map/],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': { NODE_ENV: JSON.stringify('production') }
        }),
        new ExtractTextPlugin('[name].css')
    ]
};

<APP_ROOT>/packages.json

    "dependencies": {
        "@salesforce-ux/design-system": "^2.19.0",
        "@salesforce/design-system-react": "^0.10.50",
        "react": "^16.13.1",
        "react-dom": "^16.13.1"
    },
    "devDependencies": {
        "@babel/core": "^7.20.5",
        "@babel/preset-env": "^7.20.2",
        "@babel/preset-react": "^7.18.6",
        "@expo/webpack-config": "^0.17.3",
        "@salesforce/babel-preset-design-system-react": "^3.0.0",
        "babel-loader": "^9.1.0",
        "react-scripts": "^5.0.1",
        "eslint": "^7.32.0",
        "eslint-plugin-react-hooks": "^4.2.0"
    },