Trouble creating TypeScript extensions (within Next.js SSR)

My problem is an intersection between remirror and module loading (with Next.js). It may not be a bug per-se, but it is something I’ve only encountered with this library.

I realize I risk getting this issue closed and told to open it at Next.js, but my hope in posting here is that we can clear up how one should ingest the core types to write extensions in TypeScript.

The core idea: I’m running into a situation where importing modules from e.g. @remirror/core the objects are exported classes. But with e.g. the default babel/typescript setup with Next.js, the classes are compiled to function classes, and we get

TypeError: Class constructor NodeExtension cannot be invoked without 'new'

Here’s some code that shows what I mean:

// A Next.js app with Typescript as described here: https://github.com/zeit/next-plugins/tree/master/packages/next-typescript
// pages/index.tsx
import { NodeExtension } from "@remirror/core"; // loads two different modules

class TitlePlaceholder extends NodeExtension {}

console.log("NodeExtension: ", NodeExtension); // is an ES6 `class` during SSR
console.log("TitlePlaceholder: ", TitlePlaceholder); // is a function class

// const a = new TitlePlaceholder();
// gives => TypeError: Class constructor NodeExtension cannot be invoked without 'new'

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

You can find this complete repo here.

---

One thing I tried was using a custom webpack module rule to use babel-loader for remirror:

// see: https://github.com/zeit/next-plugins/tree/master/packages/next-typescript
// next.config.js
const webpack = (config, { dev, isServer }) => {
  config.module.rules.push({
    test: /\.js$/,
    include: /node_modules\/@remirror/,
    use: {
      loader: "babel-loader",
      options: {
        presets: [
          [
            "@babel/preset-env",
            {
              debug: true,
              forceAllTransforms: true,
              targets: {
                ie: "11"
              }
            }
          ]
        ]
      }
    }
  });

  return config;
};

const withTypescript = require("@zeit/next-typescript");
module.exports = withTypescript({ webpack });

The result is:

• babel classTransformer runs over all remirror classes such as NodeExtension
• however the initial SSR still receives a class (causing an error)
• but the client-side actually receives NodeExtension as a function class (!) (the desired result) (runnable branch here)

I know I’m on thin ice asking about this, because at that point it seems to be related to the Next.js SSR.

That said it’s a vanilla Next.js setup and I can’t help but wonder if these issues could be solved by publishing an ES5-style package.

If anyone has any suggestions on how to resolve these module issues, I’d be deeply grateful.

[ifiokjr]

@jashmenn I’ve noticed that an unintended side effect of the changes made to fix this bug, is a 30% increase in the size of the @remirror/core library, from 37.5kb to 48.8kb.

I’ll keep an eye on this as it may be possible to achieve the desired outcome (build compatibility with next.js and other platforms), without adding the unwanted extra build code.

[jashmenn]

🙏 Thank you so much. I struggled w/ this for hours and your fix works perfectly.

Remirror is amazing, btw! It’s a near-perfect structuring of Prosemirror with React. Thanks for sharing it!