remirror: Uncaught TypeError: module.exportDefault is not a function

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

meteor create remirror
cd remirror
meteor npm add remirror @remirror/react @remirror/pm @remirror/styles --save
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>
  );
};

run npm run
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)

Screenshot from 2021-09-04 20-43-08

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (16 by maintainers)

Most upvoted comments

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

Copy node_modules/jsx-dom to any directory
Update package.json file: set both main and module keys to lib/index.cjs.js
Pack the whole jsx-dom directory (i.e. tar czf jsx-dom-6.4.23.tar.gz jsx-dom)
Add file you just created to your Meteor app directory (don’t forget to commit it to the repo too)
Run meteor npm i --save ./path/to/jsx-dom-6.4.23.tar.gz
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.

megawebmaster on Mar 10, 2022

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).

ocavue on Feb 4, 2022