Uncaught TypeError: module.exportDefault is not a function

[StorytellerCZ]

Summary

When importing from most packages in Meteor (Babel compiler) I get the error

Uncaught TypeError: module.exportDefault is not a function

on client and I'm unable to proceed.

Steps to reproduce

1. meteor create remirror
2. cd remirror
3. meteor npm add remirror @remirror/react @remirror/pm @remirror/styles --save
4. Replace the content in imports/ui/Hello.jsx with:

import React from 'react';
import { useRemirror } from '@remirror/react';

export const Hello = () => {
  return (
    <div>
      TEST
    </div>
  );
};

5. run npm run
6. Navigate in browser to localhost:3000 and you will see a blank page with the error in the console.

I have tried to recompile the package with Meteor build system, but without success.

Expected results

Error should not happen and imports should work normally.

Actual results

Application crashes with Uncaught TypeError: module.exportDefault is not a function

Possible Solution

Further testing revealed that import and use of: import { AllStyledComponent } from '@remirror/styles/styled-components'; works fine, so this might be a good start to look on what is different in package bundling between that one compare to the other ones.

Screenshot(s)

[ocavue]

Thank you for raising this. I will take a look.

[ocavue]

I can reproduce it but I have no idea why this happens. I will create an issue in meteor and see if someone from meteor could help.

[StorytellerCZ]

Closing as this is an issue with ESM support in Meteor.

[strdr4605]

Is there a way to solve this from the Remirror side? At least temporary!

[ocavue]

@strdr4605 Could you open a new issue with a mini reproduction? Thanks!

[strdr4605]

The steps to reproduce are the same. Do I really need to open a new issue? Maybe reopen this one?

[ocavue]

If you have the module.exportDefault is not a function error when using Meteor, according to this comment, seems that we don't have any way to fix this error directly for now.

I can think of one workaround. You can create a separate git repo for your React editor component. This git repo is an NPM package that imports Remirror as a dependency as well as some of your own code. When building this package, embed the dependencies into the output file (for example, you can use ESbuild and the --bundle option). So remirror is in your devDependencies instead of dependencies inside your package.json. In the end, you will get a new NPM package that only contains one big JS file.

By doing that, you can not only split up the complex editor logic, but also removed these exports fields in package.json which is not supported by Meteor (Because your Meteor project doesn't require remirror directly).

[strdr4605]

If you have the module.exportDefault is not a function error when using Meteor, according to this comment, seems that we don't have any way to fix this error directly for now.

I can think of one workaround. You can create a separate git repo for your React editor component. This git repo is an NPM package that imports Remirror as a dependency as well as some of your own code. When building this package, embed the dependencies into the output file (for example, you can use ESbuild and the --bundle option). So remirror is in your devDependencies instead of dependencies inside your package.json. In the end, you will get a new NPM package that only contains one big JS file.

By doing that, you can not only split up the complex editor logic, but also removed these exports fields in package.json which is not supported by Meteor (Because your Meteor project doesn't require remirror directly).

Thanks for the explanation, I will see if this option works for my use case.

[strdr4605]

While working on a POC, I wasn't able to configure a separate package with remirror editor. I tried webpack, rollup, esbuild, but all result in a You might have more than one copy of React in the same app Error.
As I spend too much time on this probably will have to find another solution🙁.
Maybe someone will figure it out!

[megawebmaster]

Just to let you know: the easiest solution I found is to override jsx-dom package (that generates this problem).

1. Copy node_modules/jsx-dom to any directory
2. Update package.json file: set both main and module keys to lib/index.cjs.js
3. Pack the whole jsx-dom directory (i.e. tar czf jsx-dom-6.4.23.tar.gz jsx-dom)
4. Add file you just created to your Meteor app directory (don't forget to commit it to the repo too)
5. Run meteor npm i --save ./path/to/jsx-dom-6.4.23.tar.gz
6. Add an override to your package.json file:

  "overrides": {
    "@remirror/extension-react-tables": {
      "jsx-dom": "$jsx-dom"
    }
  },

I attached a prepared package for you (you can skip step 1-3 in this case). I didn't add any bloatware or I don't intend to harm your code, but you do it on your own responsibility 👍

jsx-dom-6.4.23.tar.gz

EDIT: In case it doesn't work please make sure that package-lock.json doesn't contain jsx-dom resolution for @remirror/extension-react-tables package.

[strdr4605]

Hey @megawebmaster, it worked so far. Thanks for the solution!

[strdr4605]

I found out that https://github.com/proteriax/jsx-dom also has CommonJS version jsx-dom-cjs. Although only v7 and v8 are available.

Tested:

npm i jsx-dom-cjs@7

 "overrides": {
    "@remirror/extension-react-tables": {
      "jsx-dom": "$jsx-dom-cjs"
    }
  },

No issues so far!

[megawebmaster]

@strdr4605 - I was worried that there might be some issues due to different major version, so I decided to have an override (which is specific for Meteor only). I'm glad you found another solution that works for you 💪

P.S. Another solution is to add only required packages to your package.json (if you're not using React tables extension).

[strdr4605]

I don't use React tables extension. But it's a dependency of @remirror/react.

[megawebmaster]

I ditched @remirror/react in favor of listing all the packages I need. In my case:

    "@remirror/core": "^1.3.5",
    "@remirror/extension-bidi": "^1.0.15",
    "@remirror/extension-bold": "^1.0.15",
    "@remirror/extension-emoji": "^1.0.18",
    "@remirror/extension-events": "^1.0.16",
    "@remirror/extension-hard-break": "^1.0.15",
    "@remirror/extension-history": "^1.0.15",
    "@remirror/extension-italic": "^1.0.15",
    "@remirror/extension-link": "^1.1.14",
    "@remirror/extension-list": "^1.2.16",
    "@remirror/extension-mention-atom": "^1.0.19",
    "@remirror/extension-paragraph": "^1.0.15",
    "@remirror/extension-placeholder": "^1.0.18",
    "@remirror/extension-positioner": "^1.1.17",
    "@remirror/extension-strike": "^1.0.15",
    "@remirror/extension-trailing-node": "^1.0.15",
    "@remirror/extension-underline": "^1.0.15",
    "@remirror/pm": "^1.0.11",
    "@remirror/react-core": "^1.0.22",
    "@remirror/react-hooks": "^1.0.23",

[strdr4605]

@megawebmaster

I tried

import { Remirror, useHelpers, useRemirror } from '@remirror/react-core';
import { useKeymap } from '@remirror/react-hooks';

export const MyEditor = () => {
  const { manager, state, setState } = useRemirror({
    extensions: () => [new BoldExtension()],
    content: '<p>I love <b>Remirror</b></p>',
    selection: 'start',
    stringHandler: 'html'
  });

but I get Context error: https://remirror.io/docs/errors/#rmr0200

[megawebmaster]

@strdr4605 - isn't the context issue caused by useKeymap or useHelpers? If you want to use them you need to create children components.

import { Remirror, useHelpers, useRemirror } from '@remirror/react-core';
import { useKeymap } from '@remirror/react-hooks';

const Helpers = () => {
  const available = useHelpers();

  // Do something with helpers
};

export const MyEditor = () => {
  const { manager, state, setState } = useRemirror({
    extensions: () => [new BoldExtension()],
    content: '<p>I love <b>Remirror</b></p>',
    selection: 'start',
    stringHandler: 'html'
  });

  return (
    <Remirror manager={manager} initialContent={state}>
      <Helpers />
    </Remirror>
  );
};