Attempted import error

[hawx1993]

Bug Report

Current Behavior

../packages/sdk/src/module/rcInfo/index.ts
Attempted import error: 'ForwardingNumber' is not exported from './types'.

in my index.ts file

// index.ts
export { ForwardingNumber } from './types'

// type.ts
type ForwardingNumber = {
  label: string;
  phoneNumber: string;
  flipNumber: number;
};
export { ForwardingNumber }

Expected behavior/code
import correctly

Babel Configuration (.babelrc, package.json, cli command)

use: {
              loader: require.resolve('babel-loader'),
              options: {
                cacheDirectory: true,
                // cacheCompression: isEnvProduction,
                // compact: isEnvProduction,
                babelrc: false,
                presets: [['react-app', { flow: false, typescript: true }]],
                plugins: [
                  ['@babel/plugin-syntax-dynamic-import'],
                  [
                    'babel-plugin-styled-components',
                    {
                      ssr: false,
                      displayName: true,
                    },
                  ],
                  'react-hot-loader/babel',
                ],
              },
            },

Environment

• Babel version(s):

"@babel/core": "7.3.4",
"@babel/parser": "7.3.4",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"babel-loader": "8.0.4",
"babel-plugin-styled-components": "1.10.0",
"babel-preset-react-app": "7.0.2",

• Node/npm version: [e.g. Node 10.9.2/npm 6.2.0]

• OS: mac os

• How you are using Babel: loader
  

[babel-bot]

Hey @hawx1993! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[thiagoarrais]

@hawx1993!: I have not been able to reproduce this. I've written a gist based on your report. When I build and run it, it does so without error:

$ npm run build
$ NODE_ENV=development node public/bundle.js

Can you modify this gist so that it reproduces your issue?

You can clone it with git clone https://gist.github.com/92199351d3241c4881c69056a64648e5.git

[hawx1993]

@thiagoarrais thanks for comment.
but it's occasional appearance, while I remove node_modules, and reinstall, sometimes it works, someTimes it doesn't work

[hawx1993]

@thiagoarrais
not only in my computer, many of my colleagues have this problem.

[nicolo-ribaudo]

Babel doesn't do multi-file analysis (it's listed in the caveats list of the TS plugin), so it has no way to know that that export declaration should be removed.

[inje]

I'm getting this error in my React app as well with similar parameters as @hawx1993.

Current Behavior

../src/containers/Account/index.tsx
Attempted import error: 'Account' does not contain a default export (imported as 'Account').

in my index.ts file:

// src/containers/Account/index.ts
import Account from './Account';

export default Account;

The Account.tsx file in abridged version. Standard export default with Redux connect.

// src/containers/Account/Account.tsx
class Account extends PureComponent<IAccountProps, IAccountState> {
  ...
}

...

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Account);

Expected behavior/code
The import worked correctly on version 7.4.5 before the minor update to 7.5.0. I can reproduce this error by deleting my node_modules folder and yarn.lock file, and upgrading to the new 7.5.0 version of babel.

Part of the issue in my environment is that Jest ^24.8.0 is using babel 7.5.0 since it's using a caret (^) in its babel dependency declaration. Somehow that is making its way to changing how imports are handled in the rest of the app.

I'm also using Typescript which might have something to do with it since @hawx1993's example uses TS as well. Other babel dependencies are listed below.

Babel Configuration (.babelrc, package.json, cli command)

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "react-hot-loader/babel"
    ]
  },

Environment

"@babel/core": "7.4.5",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-preset-env": "^1.7.0",
"babel-eslint": "9.0.0",
"babel-jest": "^23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-preset-react-app": "^6.1.0",
...
"jest": "^24.8.0",

Node/npm version
Node v10.15.3/npm 6.4.1

OS
Mac OS

How you are using Babel
Loader

[thiagoarrais]

Maybe related to #10162? Particularly to pixelass' comment?

[inje]

Yup 👍 Seems like we can close this issue since a fix seems to have been merged in with #10167 and it's a dupe of #10162. Just need to wait for the new release with the fix in place.

For reciprocity, the issue is a TS specific issue where re-exported values don't get exported correctly. For example if you tried to import a file declared like this which imports and re-exports the same value, you will not end up getting any value imported into the file you tried to import in using babel v7.5.0 in its current state:

// index.ts
// Example of re-exporting the same value
import foo from './foo';

export default foo;

// bar.ts
import foo from './index.ts'; // Will error here

console.log(foo); // Empty value

[qiqiboy]

Yup 👍 Seems like we can close this issue since a fix seems to have been merged in with #10167 and it's a dupe of #10162. Just need to wait for the new release with the fix in place.

For reciprocity, the issue is a TS specific issue where re-exported values don't get exported correctly. For example if you tried to import a file declared like this which imports and re-exports the same value, you will not end up getting any value imported into the file you tried to import in using babel v7.5.0 in its current state:

// index.ts
// Example of re-exporting the same value
import foo from './foo';

export default foo;

// bar.ts
import foo from './index.ts'; // Will error here

console.log(foo); // Empty value

This issue still exists in v7.5.1.

Update: This issue has been resolved by updating to react-hot-loader@^4.12.5

[nicolo-ribaudo]

Yeah, this has been fixed in a patch version (I don't remember which one exactly, but <= 7.5.4)