Attempted import error: 'ApiGet' is not exported from './apiFetcher' when compile react-native to react-native-web

Question

I am building react native app and it run successfully on both Android and iOS. I want to convert react-native app to web app. I try followed tutorial: https://medium.com/@jonnykalambay/your-first-hybrid-app-in-15-minutes-react-native-on-the-web-2cc2646051e as well as some source ( https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html ). But when I run on web, there is error: Attempted import error: 'ApiGet' is not exported from './apiFetcher'.

My code:

//apiGet.js
function ApiGet(){
//some code
}

module.exports = {ApiGet}

//another file import
import {ApiGet} from './apiGet.js';

• I tried an example for testing with this syntax import, export. It run successfully. My code use both ES5 and ES6. When I run code in react-native, it's OK. I create a demo react-native-web using ES5, it's also OK.
• my package.json:

{
 "name": "App",
 "version": "0.0.1",
 "private": true,
 "scripts": {
   "start": "node node_modules/react-native/local-cli/cli.js start",
   "test": "jest",
   "lint": "eslint .;exit 0",
   "start-web": "react-scripts start",
   "build-web": "react-scripts build"
 },
 "jest": {
   "preset": "react-native",
   "setupFiles": [
     "./jest/setup.js"
   ],
   "collectCoverage": true,
   "unmockedModulePathPatterns": [
     "react"
   ]
 },
 "dependencies": {
   "async": "^2.5.0",
   "babel-loader": "^8.0.5",
   "babel-plugin-module-resolver": "^3.1.1",
   "babel-preset-react-app": "^6.1.0",
   "bugsnag-react-native": "^2.2.0",
   "he": "^1.1.1",
   "metro-react-native-babel-preset": "^0.51.0",
   "moment": "^2.18.1",
   "oauth-1.0a": "^2.1.0",
   "prop-types": "^15.5.10",
   "react": "16.0.0-alpha.12",
   "react-app-polyfill": "^0.1.3",
   "react-art": "^16.8.6",
   "react-dom": "^16.8.6",
   "react-native": "^0.59.6",
   "react-native-camera": "^0.13.0",
   "react-native-datepicker": "^1.4.7",
   "react-native-device-info": "^0.11.0",
   "react-native-drawer": "^2.3.0",
   "react-native-dropdown-menu": "^2.0.0",
   "react-native-fast-image": "^1.0.0",
   "react-native-fbsdk": "^0.6.1",
   "react-native-firebase": "1.1.2",
   "react-native-image-progress": "^1.0.1",
   "react-native-keyboard-aware-scroll-view": "^0.2.7",
   "react-native-modal-dropdown": "^0.4.2",
   "react-native-navbar": "^1.5.0",
   "react-native-progress": "^3.4.0",
   "react-native-push-notification": "^2.2.1",
   "react-native-qrcode": "^0.2.7",
   "react-native-root-toast": "^1.0.3",
   "react-native-router-flux": "^3.37.0",
   "react-native-scrollable-tab-view": "^0.8.0",
   "react-native-swiper": "^1.5.12",
   "react-native-vector-icons": "^4.0.0",
   "react-native-web": "^0.11.2",
   "react-native-webview-android": "^1.1.17",
   "react-navigation": "^1.0.0-beta.11",
   "react-redux": "^5.0.3",
   "react-router-dom": "^5.0.0",
   "react-router-native": "^5.0.0",
   "react-scripts": "^3.0.0",
   "redux": "^3.7.2",
   "redux-logger": "^2.6.1",
   "redux-persist": "^4.9.1",
   "redux-thunk": "^2.1.0",
   "smartech-react-native": "^1.1.1"
 },
 "devDependencies": {
   "babel-core": "^6.23.1",
   "babel-eslint": "^10.0.1",
   "babel-jest": "^24.7.1",
   "babel-polyfill": "^6.23.0",
   "babel-preset-react-native": "^1.9.0",
   "babel-preset-stage-1": "^6.24.1",
   "eslint": "^5.16.0",
   "eslint-plugin-react": "^6.8.0",
   "jest": "^24.7.1",
   "jest-react-native": "^18.0.0",
   "react-native-mock": "^0.3.1",
   "react-test-renderer": "^15.3.2",
   "redux-mock-store": "^1.2.1"
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 }
}

Please help me. Thanks for advance.

Answer 1

使用ES6的export关键字导出APIGet方法https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export