0

I've spent a while tinkering with my Babel configurations. I'm not an expert, but I'm also far inexperienced with Babel. I am pretty new to trying to configure it with regards to React-Native though.

I tried a lot of things to get default exports working with React Native, but when I try to import named modules from default exports, I get undefined.

What am I overlooking here? I can export default and then import named modules in my Webpack build environment. Why not in my React Native environment?

I believe it may be related to the absence of the Babel plugin "add-module-exports" in React Native, but including it breaks everything. Is there any way to include it or emulate its behavior?

Examples and .babelrc files below.

myNamedModule.js

export default { myNamedModule };

Importing the module myNamedModule

import { myNamedModule } from './myNamedModule'; // Results in undefined

Importing the whole file 

import myNamedModule from './myNamedModule'; // Results in undefined

Importing the whole file with * as

import * as myNamedModule from './myNamedModule'; // Imports the entire default export as expected

.babelrc for React Native

{
  "presets": [
    "module:metro-react-native-babel-preset",
  ],
  "plugins": [
    "@babel/plugin-proposal-export-namespace-from",
    [
      "babel-plugin-module-resolver",
      {
        "alias": {
          "react-native-vector-icons": "@expo/vector-icons"
        },
      },
    ],
    ["@babel/plugin-proposal-decorators", { legacy: true }],
  ]
}

.babelrc for Electron

(Last I checked this also worked for web if I changed preset-env)

{
  "presets": [
    ["@babel/preset-env", {
      "targets": { "electron": "3.0.10" },
      "useBuiltIns": "usage"
    }],
    "@babel/preset-react",
    "@babel/preset-flow"
  ],
  "plugins": [
    "@babel/plugin-transform-flow-strip-types",
    "add-module-exports",
    "@babel/plugin-proposal-export-default-from",
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-classes",
  ]
}
Slbox
  • 10,957
  • 15
  • 54
  • 106
  • Thanks for your reply @Andrew. Unfortunately that's in the list of things I tried above and it results in undefined, which I can't understand. – Slbox Nov 29 '18 at 21:28
  • I think `export default { myNamedModule };` is restricting you to load all the modules that are exported from myNamedModule. That is why you have `import * as myNamedModule from './myNamedModule'; ` working but other options are not. – Pranay Tripathi Nov 29 '18 at 21:36
  • @PranayTripathi that may be the case, but do you have any idea why I'd be able to import named modules using my `.babelrc` for Electron? – Slbox Dec 02 '18 at 17:08
  • well my understanding is rc files are more like run command files. It probably triggers some kind of import for these modules would be my guess. thats why you see many packages which needs resource configuration use rc files, such babel and eslint etc. Sorry m not fully aware of how rc files transform to specific imports. – Pranay Tripathi Dec 02 '18 at 20:41

0 Answers0