next / babel / react-无法读取未定义的'B'的属性

时间:2018-08-22 06:13:11

标签: reactjs babeljs next

我得到以下信息,但我不知道为什么:无法读取未定义的属性“ B”

我有一个包含两个React组件A和B的模块。它们正在使用babel进行编译。 index.js导出A和B。A从index.js导入B。

这是模块结构:

.
├── lib
│   ├── component
│   │   ├── A
│   │   │   ├── A.js
│   │   │   └── index.js
│   │   ├── B
│   │   │   ├── B.js
│   │   │   └── index.js
│   │   └── index.js
│   └── index.js
├── package.json
├── src
│   └── component
│       ├── A
│       │   ├── A.js
│       │   └── index.js
│       ├── B
│       │   ├── B.js
│       │   └── index.js
│       └── index.js
└── yarn.lock

这里是A:

import React, { Component } from "react"
import { B } from "../"

class A extends Component {

  render () {
    return (
      <div>A with <B /></div>
    )
  }

}

export default A

这里是根index.js

import { A } from "./A"
import { B } from "./B"

export {
  A,
  B
}

这是babelrc:

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-react-constant-elements"
  ]
}

如果将A导入语句更改为以下内容,它将起作用:

import React, { Component } from "react"
import { B } from "../B"

从我的next.js应用程序中,我从索引文件中导入A组件,同时显示错误。

使用:

"next": "^6.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.1",
"@babel/cli": "^7.0.0-beta.56",
"@babel/core": "^7.0.0-beta.56",
"@babel/preset-env": "^7.0.0-beta.56",
"@babel/preset-react": "^7.0.0-beta.56",
"babel-plugin-styled-components": "^1.5.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-react-constant-elements": "^6.23.0"

如果我直接使用下一个的A组件并跳过babel转译,错误消息就会消失。任何帮助将不胜感激。

0 个答案:

没有答案