Question

我试图创建一个React组件库，当我使用import {ActionItemExpansionPanel} from 'myPackage'使用它时，我得到

Module parse failed: Unexpected token (7:57)
You may need an appropriate loader to handle this file type.
| import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
|
> const ActionItem = ({className, item, action, isSelected}: {className: string, item: any, action: any => any, isSelected: boolean}): Component => (
|     <Paper>
|         <Button

这是在使用将通过webpack运行的命名导入之后。请注意，这是从node_modules中的自定义npm包中导入的我的节点模块看起来像这样： package.json

"main": "dist/index.js",
  "module": "src/es6/index.js",
  "scripts": {
    "test": "jest",
    "build": "babel src --out-dir dist",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },

我的.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-flow-strip-types"
  ],
  "ignore": [
    "src/es6"
  ]
}

因为我正在使用导入，所以我假设它将查看module中的package.json，如下所示： es6/index.js

export {default as ActionItemExpansionPanel} from '../components/action-item-expansion-panel';

我的理论是，当我导入它时，它不了解如何读取组件中的流语法。当我转换commonjs友好版本时，我的条形流类型通过babel运行，但是当我使用“模块”时，我没有通过babel运行它。如果是这样的话，我不太清楚我该怎么做。我的es6/index.js是否会使用export而只是导出已转译的模块？我使用@ material-ui / core仓库作为基准，无法弄清楚他们如何使他们的作品（减去使用打字稿）。任何帮助将不胜感激

从自定义React NPM组件库导入组件时出现问题

0 个答案: