'import' and 'export' may appear only with 'sourceType: module' (14:0)

Inizia con il comando browserify nell’issue e analizza il fallimento del parsing in node_modules/react-native/index.js durante l’importazione di @gorhom/bottom-sheet da moomoo.jsx. Riproduci la build con e senza questo import, quindi determina quale modifica è necessaria affinché il JSX venga compilato correttamente senza rimuovere l’import.

Description

(stargate) monkeypoo@TubeToob crap-code % ./deploy --js                                          
Now using node v14.21.2 (npm v6.14.17)
Notice: compiling javascript

> [email protected] build:browserify /Users/monkeypoo/doghouse/crap-code/jsx
> browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] moomoo.jsx > moomoo.js

Error: Parsing file /Users/monkeypoo/doghouse/crap-code/jsx/node_modules/react-native/index.js: 'import' and 'export' may appear only with 'sourceType: module' (14:0)
    at Deps.parseDeps (/Users/monkeypoo/doghouse/crap-code/jsx/node_modules/module-deps/index.js:519:15)
    at getDeps (/Users/monkeypoo/doghouse/crap-code/jsx/node_modules/module-deps/index.js:447:44)
    at /Users/monkeypoo/doghouse/crap-code/jsx/node_modules/module-deps/index.js:430:38
    at ConcatStream.<anonymous> (/Users/monkeypoo/doghouse/crap-code/jsx/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (events.js:412:35)
    at finishMaybe (/Users/monkeypoo/doghouse/crap-code/jsx/node_modules/readable-stream/lib/_stream_writable.js:630:14)
    at endWritable (/Users/monkeypoo/doghouse/crap-code/jsx/node_modules/readable-stream/lib/_stream_writable.js:638:3)
    at ConcatStream.Writable.end (/Users/monkeypoo/doghouse/crap-code/jsx/node_modules/readable-stream/lib/_stream_writable.js:594:41)
    at DuplexWrapper.onend (/Users/monkeypoo/doghouse/crap-code/jsx/node_modules/readable-stream/lib/_stream_readable.js:577:10)
    at Object.onceWrapper (events.js:519:28)
    at DuplexWrapper.emit (events.js:412:35)
    at endReadableNT (/Users/monkeypoo/doghouse/crap-code/jsx/node_modules/readable-stream/lib/_stream_readable.js:1010:12)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:browserify: `browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] moomoo.jsx > moomoo.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/monkeypoo/.npm/_logs/2023-08-29T22_50_26_611Z-debug.log
(stargate) monkeypoo@TubeToob crap-code %

React Native Version

0.72.4

Output of npx react-native info

(stargate) monkeypoo@TubeToob crapcode % npm info react-native

[email protected] | MIT | deps: 36 | versions: 1500
A framework for building native apps using React
https://github.com/facebook/react-native#readme

bin: react-native

dist
.tarball: https://registry.npmjs.org/react-native/-/react-native-0.72.4.tgz
.shasum: 97b57e22e4d7657eaf4d1f62a678511fcf9bdda7
.integrity: sha512-+vrObi0wZR+NeqL09KihAAdVlQ9IdplwznJWtYrjnQ4UbCW6rkzZJebRsugwUneSOKNFaHFEo1uKU89HsgtYBg==
.unpackedSize: 59.6 MB

dependencies:
@jest/create-cache-key-function: ^29.2.1             @react-native/gradle-plugin: ^0.72.11                stargate64-js: ^1.1.2                                    jsc-android: ^250231.0.0                             
@react-native-community/cli-platform-android: 11.3.6 @react-native/js-polyfills: ^0.72.1                  deprecated-react-native-prop-types: 4.1.0            memoize-one: ^5.0.0                                  
@react-native-community/cli-platform-ios: 11.3.6     @react-native/normalize-colors: ^0.72.0              event-target-shim: ^5.0.1                            metro-runtime: 0.76.8                                
@react-native-community/cli: 11.3.6                  @react-native/virtualized-lists: ^0.72.8             flow-enums-runtime: ^0.0.5                           metro-source-map: 0.76.8                             
@react-native/assets-registry: ^0.72.0               abort-controller: ^3.0.0                             invariant: ^2.2.4                                    mkdirp: ^0.5.1                                       
@react-native/codegen: ^0.72.6                       anser: ^1.4.9                                        jest-environment-node: ^29.2.1                       nullthrows: ^1.1.1                                   
(...and 12 more.)

maintainers:
- huntie <[email protected]>
- react-native-bot <[email protected]>
- rsnara <[email protected]>
- cipolleschi <[email protected]>
- dmitryrykun <[email protected]>
- fb <[email protected]>
- fkgozali <[email protected]>
- lunaleaps <[email protected]>
- yungsters <[email protected]>
- cortinico <[email protected]>
- eliwhite <[email protected]>

dist-tags:
0.63-stable: 0.63.5                         0.66-stable: 0.66.5                         0.69-stable: 0.69.12                        latest: 0.72.4                              
0.64-stable: 0.64.4                         0.67-stable: 0.67.5                         0.70-stable: 0.70.13                        next: 0.72.0-rc.6                           
0.65-stable: 0.65.3                         0.68-stable: 0.68.7                         0.71-stable: 0.71.13                        nightly: 0.73.0-nightly-20230829-f60c5ddc4  

published 2 weeks ago by react-native-bot <[email protected]>
(stargate) monkeypoo@TubeToob crapcode % 

Steps to reproduce

Any trivial react JSX/file with the following import:

import React, { Component } from 'react';
import { BottomSheet } from '@gorhom/bottom-sheet';

The following dependencies:

  "dependencies": {
    "@aws-amplify/analytics": "^4.0.11",
    "@aws-amplify/auth": "^3.4.22",
    "@aws-amplify/core": "^3.8.14",
    "@babel/core": "^7.22.11",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.22.10",
    "@babel/preset-env": "^7.22.10",
    "@babel/preset-react": "^7.22.5",
    "@gorhom/bottom-sheet": "^4.4.7",
    "esmify": "^2.1.1",
    "@popperjs/core": "^2.8.1",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
    "aws-amplify": "^5.2.5",
    "aws-amplify-react": "^5.1.43",
    "babel-jest": "^26.6.3",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "core-js": "^2.6.5",
    "coveralls": "^3.1.0",
    "d3": "^6.5.0",
    "dos2unix-cli": "^1.0.1",
    "enzyme": "^3.11.0",
    "global": "^4.4.0",
    "history": "^5.0.0",
    "jest-cli": "^26.6.3",
    "recharts": "^2.6.2",
    "onchange": "^7.1.0",
    "promise-polyfill": "^8.2.0",
    "prop-types": "15.7.2",
    "query-string": "^6.14.0",
    "react": "^17.0.1",
    "react-bootstrap": "^2.7.2",
    "react-csv-to-table": "^0.0.4",
    "react-datepicker": "^4.8.0",
    "react-dom": "^17.0.1",
    "react-error-boundary": "^3.1.0",
    "react-gauge-chart": "^0.3.0",
    "react-json-view": "1.21.1",
    "react-papaparse": "^4.1.0",
    "react-native": "^0.72.4",
    "react-native-reanimated": "^3.4.2",
    "react-phone-input-2": "^2.13.9",
    "react-redux": "^7.2.2",
    "react-router-dom": "^6.8.0",
    "react-tabs": "^4.2.1",
    "rearm": "^0.13.1",
    "redux": "^4.0.5",
    "whatwg-fetch": "^3.4.1",
    "react-device-detect": "^2.2.3"
  }

Then, the following command to build the jsx into js:

browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] moomoo.jsx > moomoo.js

If I remove the import { BottomSheet } from '@gorhom/bottom-sheet';, the corresponding react/jsx page can compile.

Snack, screenshot, or link to a repository

Snacking: https://snack.expo.dev/ubgMN6f1u

The following compiles the JSX to javascript:

browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] moomoo.jsx > moomoo.js

The following is a simple JSX react example:

import React from 'react';
import ReactDOM from 'react-dom';
import { BottomSheet } from '@gorhom/bottom-sheet';

ReactDOM.render(
    <div>Hello Moo Moo</div>,
    document.querySelector('.react-container')
);

This is the accompanying index.html that react builds off from:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel='shortcut icon' href='#'>
  </head>
  <body>
    <div class='react-container' id='bootstrap-override'></div>
    <script src='moomoo.js'></script>
  </body>
</html>

If I remove import { BottomSheet } from '@gorhom/bottom-sheet'; the browserify command succeeds. Otherwise, I get that error mentioned in the description.