Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attempted import error #10156

Closed
hawx1993 opened this issue Jul 3, 2019 · 10 comments

Comments

Projects
None yet
6 participants
@hawx1993
Copy link

commented Jul 3, 2019

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
    image

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Jul 3, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Jul 4, 2019

@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

This comment has been minimized.

Copy link
Author

commented Jul 5, 2019

@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

This comment has been minimized.

Copy link
Author

commented Jul 5, 2019

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

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 5, 2019

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

This comment has been minimized.

Copy link

commented Jul 5, 2019

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

Current Behavior
Screen Shot 2019-07-05 at 10 43 11 AM

../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

This comment has been minimized.

Copy link
Contributor

commented Jul 5, 2019

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

@inje

This comment has been minimized.

Copy link

commented Jul 5, 2019

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

This comment has been minimized.

Copy link

commented Jul 6, 2019

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

afc163 added a commit to ant-design/ant-design that referenced this issue Jul 7, 2019

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 17, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.