Gatsby: netlify-identity-widget always included in bundle, adding 166k

[Undistraction]

Description

netlify-identity-widget is always included in the app bundle, despite gataby-plugin-netlify-cms being configured not to use it. Even then it shouldn't be included in the app bundle as it is only used on the admin page.

Repro based on gatsby-starter-netlify-cms: https://github.com/Undistraction/gatsby-netlify-cms-bug-repro

To replicate

1. git clone https://github.com/Undistraction/gatsby-netlify-cms-bug-repro.git
2. cd gatsby-netlify-cms-bug-repro
3. npm install
4. npm build
5. npm run report

Result

netlify-identity-widget is included in the app bundle, adding 166k.

Expected

netlify-identity-widget should not be included in any bundle. Even if configured to use identity, it should only be included in the bundle for the /admin/ page.

Discussion

The only import or reference to netlify-identity-widget is in the plugin's cms.identity.js which should be conditionally loaded from its gatsby-node.js and netlify-identity-widget.js.
Looks like the plugin's gatsby-node.js _does_ receive the config correctly and _doesn't_ include cms.identity.js in the entries, however netlify-identity-widget is still included in the bundle.

By commenting out the following lines in the plugin's gatsby-browser.js, I can prevent netlify-identity-widget from being added to the bundle.

if (enableIdentityWidget && (routes.test(hash) || errorRoute.test(hash) || accessTokenRoute.test(hash))) {
    Promise.resolve().then(function () {
      return (0, _interopRequireWildcard2["default"])(require("netlify-identity-widget"));
    }).then(function (_ref2) {
      var netlifyIdentityWidget = _ref2["default"];
      netlifyIdentityWidget.on("init", function (user) {
        if (!user) {
          netlifyIdentityWidget.on("login", function () {
            document.location.href = __PATH_PREFIX__ + "/" + publicPath + "/";
          });
        }
      });
      netlifyIdentityWidget.init();
    });
  }

Not that without these lines commented out, I can place a console.log that confirms that enableIdentityWidget is false as expected, and that the promise body of the if is never run. However gatsby still includes netlify-identity-widget in the bundle.

Looks like something has changed recently in gatsby core which means that dynamic importing is not working correctly.

Relevant Libs

• "gatsby": "^2.15.14"
• "gatsby-plugin-netlify-cms": "^4.1.14"
• "netlify-cms-app": "^2.9.7"

Plugin config

{
    resolve: `gatsby-plugin-netlify-cms`,
    options: {
      htmlTitle: `Admin`,
      enableIdentityWidget: false,
    },
  }

There is an old, possibly related bug: https://github.com/gatsbyjs/gatsby/issues/9209

Environment

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.15.14 => 2.15.14 
    gatsby-cli: ^2.7.7 => 2.7.7 
    gatsby-image: ^2.0.20 => 2.0.29 
    gatsby-link: ^2.0.14 => 2.0.14 
    gatsby-plugin-catch-links: ^2.0.12 => 2.0.12 
    gatsby-plugin-favicon: ^3.1.6 => 3.1.6 
    gatsby-plugin-google-tagmanager: ^2.1.2 => 2.1.2 
    gatsby-plugin-manifest: ^2.2.5 => 2.2.5 
    gatsby-plugin-netlify-cms: ^4.1.14 => 4.1.14 
    gatsby-plugin-node-fields: ^2.0.1 => 2.0.1 
    gatsby-plugin-page-creator: ^2.0.4 => 2.0.7 
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.6 
    gatsby-plugin-react-helmet-canonical-urls: ^1.2.0 => 1.2.0 
    gatsby-plugin-sharp: ^2.2.11 => 2.2.11 
    gatsby-plugin-sitemap: ^2.0.5 => 2.0.5 
    gatsby-plugin-styled-components: ^3.0.4 => 3.0.6 
    gatsby-plugin-svgr: ^2.0.2 => 2.0.2 
    gatsby-react-router-scroll: ^2.0.1 => 2.0.4 
    gatsby-remark-autolink-headers: ^2.1.1 => 2.1.1 
    gatsby-remark-component-parent2div: ^1.2.3 => 1.2.3 
    gatsby-remark-copy-linked-files: ^2.0.12 => 2.0.12 
    gatsby-remark-embed-video: ^1.4.0 => 1.7.0 
    gatsby-remark-images: ^3.0.1 => 3.0.4 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.1 
    gatsby-remark-responsive-iframe: ^2.1.1 => 2.1.1 
    gatsby-remark-smartypants: ^2.0.9 => 2.0.9 
    gatsby-remark-unwrap-images: ^1.0.1 => 1.0.1 
    gatsby-source-filesystem: ^2.0.8 => 2.0.21 
    gatsby-transformer-json: ^2.1.5 => 2.1.8 
    gatsby-transformer-remark: ^2.3.12 => 2.3.12 
    gatsby-transformer-sharp: ^2.2.5 => 2.2.5 
  npmGlobalPackages:
    gatsby-cli: 2.4.15

[lfeddern]

@Undistraction did you manage to find a way to get netlify-identity-widget out of your bundles? Is there a way of using null loader to exclude it in the webpack config?

[Undistraction]

@lfeddern We didn't want the CMS on production (we have a workflow that involves promoting changes on staging to production) so I just checked NODE_ENV in my gatsby-config.js and only include Netlify CMS if not production.

[Undistraction]

@erquhart any idea why the CMS is being baked into the bundle?

[erquhart]

Sounds like dynamic importing isn't working. We'll take a look soon.

[bjrn]

Temporary workaround: If not using netlify-identity-widget at all, one can use null-loader to exclude it like so (in webpack.config.js):

module: {
  rules: [
    {
      test: /netlify-identity-widget/,
      use: 'null-loader',
    }
  ],
},

complete example for Gatsby:

// in gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, actions, rules }) => {
  const config = {
    module: {
      rules: [
        {
          test: /netlify-identity-widget/,
          use: 'null-loader',
        },
      ],
    },
  };
  actions.setWebpackConfig(config);
};

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Undistraction]

Why are you trying to close a verified bug gatsbot? Still a bug.

[erquhart]

cc/ @erezrokah (can't assign you until your first PR gets merged and you're made a member)

[erezrokah]

I'm going to hit this once I'm done with https://github.com/gatsbyjs/gatsby/issues/18245

[erezrokah]

This was supposed to be fixed by https://github.com/gatsbyjs/gatsby/pull/9565

[zslabs]

This still shows up in our frontend bundle with the latest versions of Gatsby and all plugins.

[erezrokah]

Hi @zslabs, I checked again with the repo in the issue description (after updating the plugin) and couldn't reproduce. Do you mind sharing a reproduction?

[zslabs]

@erezrokah Appreciate the reply. Here is a WebPageTest result; if you search for netlify-identity-widget, you'll see it in the resources. For a bit more context, here's how two of the Netlify plugins I utilize on our Gatsby site are configured inside of gatsby-config.js:

    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
        manualInit: true,
      },
    },
    {
      resolve: 'gatsby-plugin-netlify', // Make sure to keep it last in the array
    },

[erezrokah]

@zslabs the widget is included by default, to disable it you should configure:

{
  resolve: 'gatsby-plugin-netlify-cms',
  options: {
    modulePath: `${__dirname}/src/cms/cms.js`,
    manualInit: true,
    enableIdentityWidget: false
  },
},
{
  resolve: 'gatsby-plugin-netlify', // Make sure to keep it last in the array
},

[zslabs]

Appreciate the quick reply! I may be misunderstanding the description of this field:

enableIdentityWidget is true by default, allowing Netlify Identity to be used without configuration, but you may need to disable it in some cases, such as when using a Netlify CMS backend that conflicts. This is currently known to be the case when using the GitLab backend, but only when using implicit OAuth.

Does this mean if I disable it, when visiting /admin the widget JS will not be included there? I'm basically looking to disable on the rest of the site, as we are only using it at the /admin path.

[erezrokah]

I need to update that description as the identity widget no longer blocks GitLab implicit auth when using the CMS.
Regardless, if you're using Netlify Identity you need the widget both in your site and in the CMS (under /admin).

You need it for your site since email verification links redirect to the root site by default.
You can change that here https://docs.netlify.com/visitor-access/identity/identity-generated-emails/#email-templates, and to completely disable the widget from your site (and not the CMS) you can add the following to gatsby-node.js:

const webpack = require(`webpack`)

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new webpack.IgnorePlugin({
        resourceRegExp: /^netlify-identity-widget$/,
      }),
    ],
  })
}

[zslabs]

I really appreciate the insight into that @erezrokah !