Error: Can't find variable VARIABLE_NAME

[samouss]

Hi,

I try to setup my test workflow with babel-plugin-rewire but I'm encounter some trouble.
I'm using it in Karma and I use the version 1.0.0-beta-5.

I have the following module:

export function getDisplay(value: string): string {
  return value;
};

export default { getDisplay };

Which will be transpile to (I cut the file for the example):

function _get__(variableName) {
  return _RewiredData__ === undefined || _RewiredData__[variableName] === undefined ? _get_original__(variableName) : _RewiredData__[variableName];
}

function _get_original__(variableName) {
  switch (variableName) {
    case 'getDisplay':
      return getDisplay;
  }

  return undefined;
}

return: {
  execute: function() {
     function getDisplay(value) {
       return value;
     }

     _export('getDisplay', getDisplay);

    _DefaultExportValue = {
       getDisplay: _get__('getDisplay')
     };

     _export('default', _DefaultExportValue);
  },
};

Okay, so when the function _get__ will be called with value 'getDisplay', it'll check if an override exist, if it does, it return the override. If the override doesn't exist it return the original value which in my case is function getDisplay.

But the function getDisplay is not available when we make the switch in _get__original__, thus an error is throw.

I see in other files, that you moves unexported functions at the top of the file.

Why don't do it with exported functions too ?

[speedskater]

@samouss Good point. I was not aware that exported functions are not inside of a closure. Are you using any other plugins beside the rewire plugin?

[samouss]

I'm using it with transform-es2015-modules-systemjs.

I transpiles my files without him and the variables are available.

Is there any possibility to support this format ?

[speedskater]

@samouss I have to look deeper into it, but i am planning to support it.

[speedskater]

@samouss could you possibly change the order in which you apply your plugins (babel-plugin-rewire first)?

[samouss]

I tried, but it's doesn't do anything.

[GreenGremlin]

I'm having a similar issue. I'm exporting named functions as well as a default export. What I see is that in the transpiled version the exports property is set to the function variable before that variable is defined.

// reducePropsToState is not yet defined, so exports.reducePropsToState is `undefined`
exports.reducePropsToState = reducePropsToState;

// a little further down, reducePropsToState id defined
var reducePropsToState = _reducePropsToStateOrig;
// at this point reducePropsToState and _reducePropsToStateOrig are defined
// exports.reducePropsToState, however is not.

My src looks something like this:

export function reducePropsToState(propsList) {
  ...
}
export default withSideEffect(
  reducePropsToState,
  handleStateChangeOnClient,
  mapStateOnServer
)(Meta);

[GreenGremlin]

Relevant items from package.json

{
    "babel": "^5.8.21",
    "babel-core": "^5.8.22",
    "babel-eslint": "^4.1.6",
    "babel-loader": "^5.4.0",
    "babel-plugin-object-assign": "^1.2.1",
    "babel-plugin-react-transform": "^1.1.1",
    "babel-plugin-rewire": "^0.1.22",
    "webpack": "^1.12.2"
}

[speedskater]

sorry for the delay, but I have to ship the babel 6 api before. So it will take some more time till we get the System.js issues. But it won't be forgotten.

[danawoodman]

Seems like this may have actually been forgotten?

[danawoodman]

I've found that if I use webpack + babel + babel-plugin-rewire and I import a module it fails with Can't find variable: <modulename>.

For example, this works:

const assert = require('assert')

Where as this fails:

import assert from 'assert'

[danawoodman]

@speedskater here is a sample repo that shows the issue:
https://github.com/danawoodman/webpack-babel-rewire-bug-example

[speedskater]

@danawoodman Thank your for bringing this issue up again. sorry for the delayed answer but I have been on holidays over the last 3 weeks. tomorrow in the evening I think I will find some time to have a look at your example. I will then let you know how we can proceed with this issue.

[danawoodman]

Thanks @speedskater! Really love this module and am sad I can't use it 😄

[speedskater]

@danawoodman i just reviewed your project and it seems that the problem is a conflicting configuration between the webpack config file and the .babelrc file. I created a PR for your sample project containing the fix.
Regarding the original problem with system-js i hope i can tackle it before christmas.

[danawoodman]

Thanks @speedskater !