Breaking with latest react-native v0.43.3

[seanavery]

Using the latest react-native version, the custom transformer is not working: throwing an error transformer.transform is not a function.

Everything works when reverting back to 0.42.0

[wswoodruff]

@philikon, @seanavery Did either of you get this working on 0.43.4?

[sixman9]

The answer appears to be suggested in this React-Native-transformer issue post (react-native-sm-transformer@Github). I Google searched:

"transformer.transform is not a function"

The issue link and its mentioned post suggest:

• An API change, in React Native's Transformer declaration, between v0.42.x and v0.43.x (module.exports to module.exports.transform).
• Changing the package/namespace declaration for Transformer usage.
• Possible callback signature changes, with a link into the React Native code base
• An alternative packaging strategy, if the above doesn't work, using Haul/Webpack

As a disclaimer, I'm a React Native newbie (May 2017), my interest is using some Node libraries in a mobile app - I'm not sure I could, currently, help in repairing this issue, further than leaving these clues (apologies).

/cc @philikon @seanavery @wswoodruff

[GumboFroehn]

Try these changes in transformer.js:

function transform(src, filename, options) {
  const babelConfig = Object.assign({}, babelRC, {
    filename,
    sourceFileName: filename,
  });
  const result = babel.transform(src, babelConfig);
  return {
    ast: result.ast,
    code: result.code,
    map: result.map,
    filename: filename,
  };
}

module.exports.transform = transform;

[sixman9]

For clarity, is its that in addition to the current:

module.exports = function(data, callback)

or does your module.exports.transform = transform line replace this latter, existing, function declaration (I'm not at a desktop to try out your code)?

/cc @GumboFroehn

[wswoodruff]

@sixman9 and others on this thread:
I've had success with this as the export for the transformer file:

const babelTransformer = require('./babel-transformer');

module.exports.transform = function(src, filename, options) {

    const extension = String(filename.slice(filename.lastIndexOf('.')));
    let result;

    try {

        switch (extension) {

            case '.js':
            case '.jsx':
                result = babelTransformer(src, filename);
                break;
            
            default:
                result = babelTransformer(src, filename);
                break;
        }

    } catch (e) {

        throw new Error(e);
        return;
    }

    return {
        ast: result.ast,
        code: result.code,
        map: result.map,
        filename
    };
};

You don't need to do that switch statement there, I was trying to transform .css files with Css2ReactNative

And babel-transformer exports:

module.exports = (src, filename) => {

    const babelConfig = Object.assign({}, babelRC, {
        filename,
        sourceFileName: filename
    });

    const result = babel.transform(src, babelConfig);
    return {
        ast: result.ast,
        code: result.code,
        map: result.map,
        filename
    };
}

[wswoodruff]

I'm still running into issues with Buffer like #5, but progress!

[wswoodruff]

Ok I got it working on react-native 0.44.1. You can see my solution here:
https://github.com/wswoodruff/strangeluv-native/blob/fa6c260ef0b2f3ad4400c27d075649ecd9bb71b8/config/transformers.js
and here: https://github.com/wswoodruff/strangeluv-native/blob/fa6c260ef0b2f3ad4400c27d075649ecd9bb71b8/config/babel-transformer.js

Also, if you run into problems with crypto.pbkdf2Sync.toString, I made a shim and explain how to implement it here: https://github.com/mvayngrib/react-native-crypto/issues/14#issuecomment-306072211

[wswoodruff]

Please let me know if this works for any of you guys! @seanavery @sixman9 @GumboFroehn @philikon

[taipa-ibl]

@wswoodruff

I try like your solution but it get error like this.
Did i have some wrong setting ?
PS: This is problem on RN 0.45.1

[taipa-ibl]

Sorry...i forgot to import global.js into source.
Now, i am able to run Crypto on RN 0.45.1

Thank you bro.

[tslater]

After making those changes, I get a syntax error, but I can't tell where it is! Is anyone else having this issue? Any advice on how to find it?

SyntaxError unknown: Unexpected token, expected , (1:8)

ABI19_0_0RCTFatal
-[ABI19_0_0RCTBatchedBridge stopLoadingWithError:]
__34-[ABI19_0_0RCTBatchedBridge start]_block_invoke_2
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
0x0

[wswoodruff]

Hmm, @tslater Looks like a syntax error, expecting a comma somewhere. That stacktrace is not very helpful at all =( you might want to take your app back to before you added that code and give it another shot. Alternatively, did you try the .babelrc file I mentioned here? #4 (comment)

[jjzazuet]

Hi. I'm currently struggling to access crypto functionality in a React Native project. Is this library still incompatible with RN 0.50.X ?? Thanks for your time!

[flyskywhy]

@jjzazuet , for RN 0.50.X , you need modified https://github.com/wswoodruff/strangeluv-native/blob/fa6c260ef0b2f3ad4400c27d075649ecd9bb71b8/config/transformers.js from @wswoodruff above with:

replace

function(src, filename, options)

to

function({src, filename, options})

[lattice0]

Just had to do all this. For anyone with problems, just look at my file tree: https://github.com/lucaszanella/jscam/tree/ff5cd76caae3ff92a4a9d3d6ff585c6f1c0ca8d8/src/jscam

Also would be good to update this info on this repo because react-native has changed a lot since then