Unexpected Token when importing react-native-fetch-blob

Question

We are trying to import the react-native-fetch-blob package package using the following code:

const RNFetchBlob = require('react-native-fetch-blob');
const firebase = require('firebase');

However, when we try and build, we get a Syntax Error for Unexpected token import as follows.

C:\Users\ ...\node_modules\react-native-fetch-blob\index.js:5
import {
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\ ...\build\cloud\file.js:159:243) at Module._compile (module.js:541:32)

We are using ES6 and our .babelrc file looks as follows

"plugins": [
    ["transform-runtime", {
        "polyfill": false,
        "regenerator": true
    }]
],
"presets": ["react-native","es2015",]

Is there a solution to this? Any help would be greatly appreciated!

Thanks!

have you found a solution to your problem? I am facing a similar issue with my tests throwing this error. — David Schumann
– David Schumann, Commented Aug 28, 2018 at 14:29

FoxShaunR · Accepted Answer · 2018-11-14 00:08:23Z

2

I was able to work around this problem by creating a mock for react-native-fetch-blob (rn-fetch-blob, in my case). The mock suggested here worked for me: https://github.com/wkh237/react-native-fetch-blob/issues/212#issuecomment-340706825

As @scerelli I also wanted the mock to happen in a separate place so it can be used by all tests. Placing the following code in /mocks/react-native-fetch-blob.js seems to work for me:

const existsMock = jest.fn(); existsMock.mockReturnValueOnce({then: jest.fn()});

export default {
DocumentDir: () => {},
ImageCache: {
    get: {
        clear: () => {},
    },
},
fs: {
    exists: existsMock,
    dirs: {
        MainBundleDir: () => {},
        CacheDir: () => {},
        DocumentDir: () => {},
    },
    },
};

It's a variation of @SoundBlaster solution, just in a global mock file. With that I don't need to import or implicitly mock anything in the test code.

answered Nov 14, 2018 at 0:08

FoxShaunR

337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Katz Over a year ago

I had to make the folder root/__mocks__/rn-fetch-blob.js

Collectives™ on Stack Overflow

Unexpected Token when importing react-native-fetch-blob

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related