Gatsby: "registerPreviewStyle" error with gatsby-plugin-netlify-cms

[kennedyrose]

Description

The latest gatsby-plugin-netlify-cms doesn't seem to work with the latest netlify-cms.

Steps to reproduce

Install [email protected] and [email protected] and load up the /admin/ page.

Expected result

User should see the admin page with no console errors

Actual result

A blank screen with the following error is seen when loading up the Netlify CMS admin page:

cms.js:10 Uncaught TypeError: Cannot read property 'registerPreviewStyle' of undefined
    at Object.<anonymous> (cms.js:10)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (bootstrap:83)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.6.0 - /var/folders/qv/2cfwn7m13jb4rpxhm9trf1yczc9jvk/T/yarn--1553291763090-0.49216429764230507/node
    Yarn: 1.13.0 - /var/folders/qv/2cfwn7m13jb4rpxhm9trf1yczc9jvk/T/yarn--1553291763090-0.49216429764230507/yarn
    npm: 6.5.0-next.0 - ~/.nvm/versions/node/v11.6.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: 55.0.3
    Safari: 11.1.2
  npmPackages:
    gatsby: ^2.2.0 => 2.2.0 
    gatsby-image: ^2.0.0-rc.1 => 2.0.34 
    gatsby-link: ^2.0.0-rc.2 => 2.0.16 
    gatsby-plugin-canonical-urls: ^2.0.0-rc.1 => 2.0.12 
    gatsby-plugin-emotion: ^4.0.1 => 4.0.6 
    gatsby-plugin-esca-css: ^1.0.3 => 1.0.3 
    gatsby-plugin-favicon: ^3.1.4 => 3.1.5 
    gatsby-plugin-feed: ^2.0.8 => 2.0.15 
    gatsby-plugin-google-analytics: ^2.0.0-rc.1 => 2.0.17 
    gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4 
    gatsby-plugin-netlify: ^2.0.0-rc.2 => 2.0.13 
    gatsby-plugin-netlify-cms: ^3.0.0-rc.1 => 3.0.16 
    gatsby-plugin-netlify-cms-paths: ^1.0.1 => 1.2.1 
    gatsby-plugin-polyfill-io: ^1.0.5 => 1.1.0 
    gatsby-plugin-prefetch-google-fonts: ^1.2.0 => 1.4.0 
    gatsby-plugin-react-helmet: ^3.0.10 => 3.0.10 
    gatsby-plugin-remove-trailing-slashes: ^2.0.0-rc.1 => 2.0.10 
    gatsby-plugin-robots-txt: ^1.3.0 => 1.4.0 
    gatsby-plugin-sharp: ^2.0.0-rc.3 => 2.0.29 
    gatsby-plugin-sitemap: ^2.0.10 => 2.0.10 
    gatsby-plugin-webpack-size: ^0.0.3 => 0.0.3 
    gatsby-remark-copy-linked-files: ^2.0.0-rc.1 => 2.0.11 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^3.0.1 => 3.0.10 
    gatsby-remark-smartypants: ^2.0.0-rc.1 => 2.0.9 
    gatsby-source-filesystem: ^2.0.1-rc.1 => 2.0.27 
    gatsby-transformer-remark: ^2.3.6 => 2.3.6 
    gatsby-transformer-sharp: ^2.1.1-rc.2 => 2.1.17 

[bjrn]

I get this too, at first I thought it had something to do with us having a custom config setup, running manualInit: true etc.

(note about the versions: I think your version of gatsby-plugin-netlify-cms resolves to 3.0.16, not 3.0.0-rc.1)

[bjrn]

in node_modules/gatsby-plugin-netlify-cms/cms.js,
registerPreviewStyle is called via the default export:
_netlifyCms.default.registerPreviewStyle('cms.css');

but logging the module console.log(_netlifyCms);, indicates that default ought to be left out from that call … _netlifyCms.registerPreviewStyle('cms.css'); works.

Likely a deeper issue behind this, like mismatching babel configurations or so …

[erikdstock]

I haven't looked deeply into this but anecdotally i have two projects, both on [email protected].
One works with [email protected]. The other with [email protected] is throwing this error. Running yarn upgrade netlify-cms on the good repo bumped me to 2.8.0, which throws the same error.

[bjrn]

yes, can confirm that downgrading to [email protected] helped. I am also using netlify-cms-backend-fs for local development, which I accidentally bumped to 0.4.x (not compatible with [email protected]) ...
[email protected] works fine though.

[matthewlehner]

I believe this has something to do with the changes in netlify/netlify-cms#2215

Looks like the cms.js that is output by webpack during the Gatsby build process is transpiled in a way isn't compatible with the ES module config.

[fabrice102]

I have the same issue if I use https://github.com/netlify-templates/gatsby-starter-netlify-cms/commit/0706a8fddfa1de1c8c41ed296af3f04b82eac7a1 (last commit of gatsby-starter-netlify-cms on the branch master) and do:

rm yarn.lock
yarn
npm run start

However, if I do not remove yarn.lock, everything works properly.

[wardpeet]

is there an easy way to reproduce it? Like a demo repo or can I reproduce it with cloning our default starter and installing those 2 plugins?

[kennedyrose]

Yes, you can reproduce with the Gatsby starter and those 2 plugins.

[talves]

I will be working on this issue with @erquhart (Shawn). We should have it all stable as soon as possible. Please downgrade the netlify-cms version until we get a beta released to test against. We may be making changes to the plugin also and will notify here. Thanks for your patience on this.

[talves]

@bjrn you are correct, netlify-cms-backend-fs is in beta and those changes will not work without a proper build configuration for the es modules on gatsby-plugin-netlify-cms. I am working on those changes also.

[bjrn]

great to hear @talves — feel free to ping me if I can help out in any way there, be it testing or setting up examples. Using netlify-cms-backend-fs in dev mode is such an improvement to our workflow when building content structures

[talves]

@kennedyrose I was able to replicate what you are seeing on v2.8.0. We made a change and published it to beta.

Can you try it out for us by running yarn add netlify-cms@beta ? It should install [email protected]. Thanks for letting us know if this works or not. If so it will go out in the latest published version once we do some more testing.

[bjrn]

@talves @kennedyrose I did a quick check just now, and can confirm it works in my setup with 2.8.1-beta.1 👍

The devtools console reports the following versions in use (running dev mode):

netlify-cms 2.8.1-beta.1
netlify-cms-core 2.10.1-beta.1

[talves]

@bjrn Thanks for checking. I will update when the fix release is ready. Those versions are the correct ones for the fix.

[wardpeet]

@talves anything we can assist with or do you got this? 💪

[talves]

@wardpeet should be all good. the proposed release of netlify-cms will take care of this error based on tests. Improvements will eventually go into gatsby-plugin-netlify-cms, but those are still being decided on for a bundle with react as external dependencies.

[talves]

Here is the PR (https://github.com/netlify/netlify-cms/pull/2252) for the new proposed build of NetlifyCMS that would be supporting the single instance of react (as peer) for the gatsby-plugin-netlify-cms .

@wardpeet the library in that PR is what would be used by us Gatsby users who want to use the plugin for netlify cms. We should be releasing that as a beta tomorrow for testing. Just keeping you updated. If you see invariant errors from the netlify cms plugin, it will get solved once we put it in place. The new library would be put into the plugin as a peer dependency in place of the netlify-cms library. This is where we were heading when the 2.8.0 version of netlify cms snuck into the wild. 😀

[talves]

[email protected] (latest) is now available. This should resolve this issue. Please ping me if any issues.

@bjrn working on a PR for the plugin with a new (different) peer dependency, so then you will be able to use the new netlify-cms-backend-fs. It will probably be a major version upgrade of 'gatsby-plugin-netlify-cms`, since the peer dep changes.

OR You can also try out @talves/[email protected] which will be the changes proposed for mentioned PR.

Thanks for the patience everyone.

[talves]

@wardpeet I think this is resolved.

I have also submitted a PR for the update to the plugin. https://github.com/gatsbyjs/gatsby/pull/13036

[wardpeet]

@talves, I've tested this and version 2.9 works! Thanks a bunch, hopefully we can get your other PR in too.