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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With