Babelify error: 'import' and 'export' may appear only with 'sourceType: module'

[cagross]

Hello. I am using Browserify with a Babelify transform to bundle two JS files--in one of them I require fetch-mock. The Browserify command is:

node_modules/.bin/browserify www/js/functions.js test/tape.test.js -t [ babelify ] --outfile test/test-bundle.js

It is failing with the error:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (4819:0) while parsing C:\Users\snarl\my_project\node_modules\fetch-mock\esm\client.js while parsing file: C:\Users\snarl\my_project\node_modules\fetch-mock\esm\client.js

I know this is probably something to ask the Babelify devs, but I've done so and have not hear anything. So I'm just wondering if you have encountered anything like this before, or might you know how to troubleshoot? Here is what I've tried so far:

--From this previous Babelify issue, I tried installing the package babel-preset-es2015 then running the command:

node_modules/.bin/browserify www/js/functions.js test/tape.test.js -t [ babelify --presets [ es2015 ] ] --outfile test/test-bundle.js

The previous error was gone, but it failed with a new error:

Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\snarl\my_project\node_modules\babel-preset-es2015\lib\index.js while parsing file: C:\Users\snarl\my_project\test\tape.test.js

A few Stack Overflow posts (example) seemed to indicate that this was because I was using the package babel-preset-es2015, and had to eschew it in favor of a different package; @babel/preset-env I've removed the old package, and installed the new package. But the Browserify command is back to failing with the original import/export error.

--With @babel/preset-env installed, I tried three different configurations in my project's babel.config.js file (see pastebin here), but none had any effect on the issue. Those suggestions were taken from the @babel/preset-env page.

--With @babel/preset-env installed, I tried using the following command from the command line, but there was no change in the result.

node_modules/.bin/browserify www/js/functions.js test/tape.test.js -t [ babelify --presets [ es2015 ] ] --outfile test/test-bundle.js

--I posted to the Babelify GitHub issues (see here), but after two weeks there has not been a reply (only one other person to confirm the same issue).

---

• To see the code in each of my JS files, please see this pastebin.
• If you would like me to try to prepare a simplified GitHub repo which reproduces the issue, so you can clone and test, let me know and I can do so.
• I am using fetch-mock v9.10.6, Browserify v16.5.1, and Babelify v10.0.0.

Thanks in advance.

[wheresrhys]

It sounds like you need to try require('fetch-mock/es5/client'), or maybe one of the other builds detailed in this part of the docs http://www.wheresrhys.co.uk/fetch-mock/#usageimporting

[cagross]

It sounds like you need to try require('fetch-mock/es5/client'),

OK I gave this a shot, and it seems to have resolved the issue. The Browserify command seems to complete without issue. Thanks very much for that.

So I learn though, why in this case did I have to specify a path of fetch-mock/es5/client? My typical course of action is to just add require() and pass to it the name of the NPM package. Is that not always the best (or proper) course of action?

@nicolas-hili This may interest you.

---

edit: Sorry @wheresrhys, I may have spoken too soon. With the edit I mentioned above, my Browserify command does indeed create a test-bundle.js file. But if I execute that file with Node (node test/test-bundle.js), it fails with:

var theGlobal = typeof window !== 'undefined' ? window : self;
ReferenceError: self is not defined

Note that I've simplified my files/commands, so that my Browserify command now bundles a single file:

node_modules/.bin/browserify test/tape.test.js -t [ babelify ] --outfile test/test-bundle.js

and the file tape.test.js contains only a single line:

const fetchMock = require('fetch-mock/es5/client')

I'm happy to create a separate issue for this, if you think it is unrelated to the original issue I was having.

[wheresrhys]

Couple of questions

• I was assuming you're running the tests in a web browser. Is this true? If it is, why are you trying to run the test bundle in node rather than using some test runner 9like karama or puppeteer) to run the test bundle in the browser?
• What version of node are you using?

[cagross]

Thanks for the reply, and sorry for the delay.

I was assuming you're running the tests in a web browser. Is this true?

No, I'm running them from the command line in Node.

What version of node are you using?

v13.13.0

[wheresrhys]

I don't really understand why you're using browserify in that case. If your tests are being run in nodejs you shouldn't need to use any bundling tool. It'd be good if you could share a repo I can take a look at

[cagross]

So sorry for the delay, and thanks for your continued help. I want to prepare a repo for you, and share it, along with my justification for using Browserify in this case. I may need a few days on that though, so leave this issue open for a few more days if you can.

Thanks.

[cagross]

OK I'm back. I haven't created the test repo yet. But for now I want to explain why I'm bundling files in this case. The reason I’m bundling the files with Browserify is twofold. Note that my code uses ES6 modules:

1. My app is built using the Cordova framework. But it turns out that Cordova does not support ES6 modules (see post here). So my solution was to continue using ES6 modules, yet bundle/transform my files using Browserify/Babelify, before building them into the resulting app.

2. To carry out unit testing from Node, I have to require my unit testing package (tape) using commonJS module format. But since the files I want to test use ES6 module format instead of commonJS module format, my solution was to bundle/transform the files using Browserify/Babelify, then run unit tests on the resulting file.

I’m not sure how to get around either of those. If for some reason I could figure out a solution to the second, then perhaps I could forego bundling when it comes to unit testing.

Thoughts? If it would still help for you to see a simple repo illustrating everything I’ve described, I’m happy to do so—please let me know.

[wheresrhys]

I see. Tricky.

My first advice would be to ditch browserify and use something more modern ( I like rollup.js, but webpack is fine too ).

[cagross]

OK thanks for that. I'm actually playing around with a workaround--one in which I don't bundle the files at all. This seems to be working for now. To do that, I had to manually set type: module in my package.json file, so I'll have to figure out if that's a sustainable long term solution.

Anyway, thanks for being patient with me. If for some reason I need to revisit bundling, I'll have a look at rollup or webpack. Let's consider this resolved then.