rematch: TypeError: fe.default is not a function (@rematch/immer)

Versions: “@rematch/core”: “^1.0.0-alpha.1”, “@rematch/immer”: “^0.1.0”

Errors:

Uncaught (in promise) TypeError: fe.default is not a function
    at t.(:3000/anonymous function) (http://localhost:3000/static/js/bundle.js:896:11752)
    at rematch-immer.umd.js:1
    at computeNextEntry (<anonymous>:1:34000)
    at recomputeStates (<anonymous>:1:34300)

When I:

import { init } from '@rematch/core';
import immerPlugin from '@rematch/immer';
import regex from './regex';

const immer = immerPlugin();

const store = init({
  models: {
    regex,
  },
  plugins: [immer],
});

export default store;


// regex.js
import uuid from 'uuid/v4';

export default {
  state: {
    ID: {
      example: [],
      regex: {},
      result: {},
    },
    byID: {},
  },
  reducers: {
    addExample(state, payload) {
      console.log('payload');
      
      const ID = uuid();
      state.ID.example.push(ID);
      state.byID[ID] = {
        text: payload,
        regex: [],
      };
      return state;
    },
  },
  effects: {},
};

// App.js
const mapDispatch = ({ regex: { addExample } }) => ({
  addExample,
});

@connect(() => ({}), mapDispatch)
export default class App extends Component {
...
  render() {
    console.log(this.props.addExample());
...
}

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 17 (8 by maintainers)

Commits related to this issue

Update the npm install guide The default version installed by `npm install @rematch/immer@next` was `0.1.0`, and it would get an error like [issues349](https://github.com/rematch/rematch/issues/349) ... — committed to 2hu12/rematch by 2hu12 6 years ago
Update the npm install guide for @rematch/immer The default version installed by `npm install @rematch/immer` was `0.1.0`, and it would get an error like [issues349](https://github.com/rematch/rematc... — committed to 2hu12/rematch by 2hu12 6 years ago

Most upvoted comments

@huyansheng3 Try @rematch/immer@next

linonetwo on May 21, 2018

Looks like adding "esModuleInterop": true to the immer plugin’s tsconfig.json fixes this.

This all seems to be caused by something weird that immer itself does; it exports an attribute called default containing the produce function. This seems to really confuse rollup when creating UMD modules.

You can see what’s happening by comparing the source of the UMD modules;

Without `esModuleInterop`;

function produce(...) {
  // some code here
}

var immer_module = /*#__PURE__*/Object.freeze({
  setAutoFreeze: setAutoFreeze,
  setUseProxies: setUseProxies,
  default: produce
});

var immer_1 = ( immer_module && produce ) || immer_module;

// some more code here

immer_1.default(...); // oh no! immer_1 is actually the produce function

With `esModuleInterop`;

function produce(...) {
  // some code here
}

var immer_module = /*#__PURE__*/Object.freeze({
  setAutoFreeze: setAutoFreeze,
  setUseProxies: setUseProxies,
  default: produce
});

var require$$0 = ( immer_module && produce ) || immer_module;

var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
};

// this is the magic! a "default" attribute is returned containing the "produce" function
var immer_1 = __importDefault(require$$0);

I’ve not tried importing this elsewhere (i.e. the es6 and cjs builds), but the tests seem to pass fine.

I’ve opened #378 to add the esModuleInterop setting.

jackwilsdon on May 16, 2018