Skip to content

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

New issue
New issue
Closed
Closed
Webpack build failing with "Cannot read property 'bindings' of null"#1621
Labels
needs-clarity
@evanmcd

Description

@evanmcd
evanmcd
opened on Oct 25, 2018

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.

Activity

welcome

welcome commented on Oct 25, 2018

@welcome
welcomebot
on Oct 25, 2018

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

interactivellama commented on Nov 1, 2018

@interactivellama
interactivellama
on Nov 1, 2018
Contributor

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

interactivellama commented on Nov 1, 2018

@interactivellama
interactivellama
on Nov 1, 2018
Contributor

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

interactivellama
closed this as completedon Nov 1, 2018
interactivellama
added
needs-clarity
on Nov 1, 2018
evanmcd

evanmcd commented on Nov 5, 2018

@evanmcd
evanmcd
on Nov 5, 2018
Author

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

davidakerr commented on Jun 3, 2019

@davidakerr
davidakerr
on Jun 3, 2019

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

interactivellama

interactivellama commented on Jun 3, 2019

@interactivellama
interactivellama
on Jun 3, 2019
Contributor

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

davidakerr commented on Jun 4, 2019

@davidakerr
davidakerr
on Jun 4, 2019

@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

interactivellama commented on Jun 20, 2019

@interactivellama
interactivellama
on Jun 20, 2019
Contributor

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

CrazyByDefault commented on Jul 21, 2019

@CrazyByDefault
CrazyByDefault
on Jul 21, 2019

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

CrazyByDefault commented on Jul 21, 2019

@CrazyByDefault
CrazyByDefault
on Jul 21, 2019

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

interactivellama commented on Jul 22, 2019

@interactivellama
interactivellama
on Jul 22, 2019 · edited by interactivellama
Contributor

@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

tfuda
mentioned this on Feb 5, 2020
sankalp-jhingran
mentioned this on Mar 30, 2021
cemcakirlar

cemcakirlar commented on May 5, 2022

@cemcakirlar
cemcakirlar
on May 5, 2022 · edited by 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

shannonio commented on Jun 22, 2022

@shannonio
shannonio
on Jun 22, 2022 · edited by 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

0xW1sKy commented on Nov 29, 2022

@0xW1sKy
0xW1sKy
on Nov 29, 2022

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"
    },
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs-clarity

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @evanmcd@interactivellama@shannonio@cemcakirlar@0xW1sKy

        Issue actions
          Webpack build failing with "Cannot read property 'bindings' of null" · Issue #1621 · salesforce/design-system-react