title: Using Export Default { myNamedModule } - and then importing that named module in React Native?
body: <p>I've spent a while tinkering with my <code>Babel</code> configurations. I'm not an expert, but I'm also far inexperienced with <code>Babel</code>. I am pretty new to trying to configure it with regards to <code>React-Native</code> though.</p>
  
  <p>I tried a lot of things to get default exports working with <code>React Native</code>, but when I try to import named modules from default exports, I get <code>undefined</code>.</p>
  
  <p>What am I overlooking here? I can <code>export default</code> and then import named modules in my <code>Webpack</code> build environment. Why not in my <code>React Native</code> environment?</p>
  
  <p>I believe it may be related to the absence of the <code>Babel</code> plugin <code>"add-module-exports"</code> in <code>React Native</code>, but including it breaks everything. Is there any way to include it or emulate its behavior?</p>
  
  <p>Examples and <code>.babelrc</code> files below.</p>
  
  <p><strong>myNamedModule.js</strong></p>
  
  <pre><code>export default { myNamedModule };
  </code></pre>
  
  <hr>
  
  <p><strong>Importing the module <code>myNamedModule</code></strong></p>
  
  <pre><code>import { myNamedModule } from './myNamedModule'; // Results in undefined
  </code></pre>
  
  <p><strong>Importing the whole file</strong>    </p>
  
  <pre><code>import myNamedModule from './myNamedModule'; // Results in undefined
  </code></pre>
  
  <p><strong>Importing the whole file with <code>* as</code></strong></p>
  
  <pre><code>import * as myNamedModule from './myNamedModule'; // Imports the entire default export as expected
  </code></pre>
  
  <hr>
  
  <h3><strong><code>.babelrc</code> for <code>React Native</code></strong></h3>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "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 }],
    ]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <h3><strong><code>.babelrc</code> for Electron</strong></h3>
  
  <p><em>(Last I checked this also worked for web if I changed <code>preset-env</code>)</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "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",
    ]
  }</code></pre>
  </div>
  </div>
  </p>