NPM Update is Painful
Adam C. |

Updating NPM seems to be very easy. Running 'ncu -u' followed by 'npm install', we can have all our dependencies up to date. However, updating packages without checking breaking changes is very dangerous. I could not find any easy solution, but suggest doing this often and testing your app thoroughly.

Photo by Markus Winkler on Unsplash

Recently I bumped several NPM packages for next-feathers, but I didn't have time to test it. Today I was trying to fix the “auto-saving” bug and found that it had already broken.  I got the following error when I tried CKEditor's demo page:

Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `CKEditorDemo`.

I checked the package.json, there are two major updates that could be related to this:

  1. next: from “9.5.5” → “10.0.2”
  2. @ckeditor/ckeditor5-react: “2.1.0” → “3.0.0”

Usually, the major update (i.e., the first digit increment) includes some breaking change. I checked both repos:

NextJS

There were no breaking changes between version 9 and 10.

CKeditor5-React

BREAKING CHANGES

The onInit property was renamed to onReady and can be called multiple times (after the initialization and after the component is ready when an error occurred).

The entry point of the package has changed. The default import was removed since the package provides more than a single component now. 

 

Use

 

import { CKEditor } from '@ckeditor/ckeditor5-react';

 

Instead of

 

import CKEditor from '@ckeditor/ckeditor5-react';

Pretty clear that we have to use {CKEditor} now because CKEditor is no longer the default import.

I also got another issue as the following:

Unhandled Runtime Error

ReferenceError: React is not defined

This is easy to fix by just adding import React from ‘react’ at the beginning of the file where reports this error. However, I thought NextJS should automatically import ‘React’ for us. There must be something changed. I did upgrade react from V16 to V17, but cannot figure out what causes this.  According to Tim Neutkens co-author of Next.js, 

Next.js automatically adds the React import when JSX is used indeed. However keep in mind that we do still need to import React from 'react' when the React variable is used.

Looks like we have to use import react when the React variable is used, but why it works before? After a few tests, I found that it's because of React's update, for some reason, we have to explicitly import react when using React V17 with NextJS. Maybe we should always do this, after all, only NextJS, as I know doing automatically import.