ParseError: 'import' and 'export' may appear only with 'sourceType: module'

[jeff1evesque]

Just FYI, to implement your codebase using React D3 Speedometer example, I kept getting the following error:

Now using node v14.21.2 (npm v6.14.17)
Updating aws-exports.js with desired values
Notice: compiling javascript

> [email protected] build:browserify /Users/jeff1evesque/application/frontend/jsx
> browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] content.jsx > content.js


/Users/jeff1evesque/application/frontend/jsx/node_modules/react-gauge-chart/node_modules/d3/src/index.js:1
export * from "d3-array";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:browserify: `browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] content.jsx > content.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build:browserify script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jeffreylevesque/.npm/_logs/2023-02-25T19_10_11_438Z-debug.log
Notice: reset/undoing aws-exports configuration

So, I did some quick googling, and found a SO suggestion to use a package that has been outdated 5-6 years ago. Now, when I try to build the same project, I get a new error:

Now using node v14.21.2 (npm v6.14.17)
Updating aws-exports.js with desired values
Notice: compiling javascript

> [email protected] build:browserify /Users/jeff1evesque/application/frontend/jsx
> browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react es2015 ] ] content.jsx > content.js

Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/jeff1evesque/application/frontend/jsx/node_modules/babel-preset-es2015/lib/index.js while parsing file: /Users/jeff1evesque/application/frontend/jsx/content.jsx
    at createDescriptor (/Users/jeff1evesque/application/frontend/jsx/node_modules/@babel/core/lib/config/config-descriptors.js:159:11)
    at createDescriptor.next (<anonymous>)
    at evaluateSync (/Users/jeff1evesque/application/frontend/jsx/node_modules/gensync/index.js:251:28)
    at /Users/jeff1evesque/application/frontend/jsx/node_modules/gensync/index.js:31:34
    at Array.map (<anonymous>)
    at Function.sync (/Users/jeff1evesque/application/frontend/jsx/node_modules/gensync/index.js:31:22)
    at Function.all (/Users/jeff1evesque/application/frontend/jsx/node_modules/gensync/index.js:210:24)
    at Generator.next (<anonymous>)
    at createDescriptors (/Users/jeff1evesque/application/frontend/jsx/node_modules/@babel/core/lib/config/config-descriptors.js:101:41)
    at createDescriptors.next (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:browserify: `browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react es2015 ] ] content.jsx > content.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build:browserify script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jeff1evesque/.npm/_logs/2023-02-25T19_15_51_296Z-debug.log
Notice: reset/undoing aws-exports configuration

[jeff1evesque]

Since I'm using babel7, and now also babel6 for your module, it's a bit of a mess. But, then again it's unfortunately not working.

[jeff1evesque]

I downgraded this module in my package.json:

"react-gauge-chart": "^0.4.1",

To the following:

"react-gauge-chart": "^0.3.0",

And it worked. However, if I tried version 0.4.0, it still generated the same error:

Now using node v14.21.2 (npm v6.14.17)
Updating aws-exports.js with desired values
Notice: compiling javascript

> [email protected] build:browserify /Users/jeff1evesque/application/frontend/jsx
> browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] content.jsx > content.js


/Users/jeff1evesque/application/frontend/jsx/node_modules/react-gauge-chart/node_modules/d3/src/index.js:1
export * from "d3-array";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:browserify: `browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] content.jsx > content.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build:browserify script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jeff1evesque/.npm/_logs/2023-02-25T20_58_56_978Z-debug.log
Notice: reset/undoing aws-exports configuration

[jeff1evesque]

I just realized that as a byproduct of having react-gauge-chart at version 0.3.0, I inherit "Resizing the window sets needle back to original position" problem (where mobile scroll also resets the needle).