无法使用jsx导入手动放置的节点模块

Question

免责声明：我知道检索节点模块的最佳方法是通过npm，这是一个更好地理解一些事情的问题。让我解释一下我是如何解决手头的问题以及问题所在。

我有两个名为SOMEAPP的项目和一个名为COOLCOMPONENTPROJ的项目。他们都使用FB的Create React App。

On SOMEAPP我在package.json上添加了一个依赖项，它指向一个私有的bitbucket repo，我的组件被托管在这里，所以SOMEAPP的package.json看起来像

   ...
   dependencies:{
      ...
      COOLCOMPONENTPROJ:"git+https://USERNAME@bitbucket.org/COOLCOMPONENTPROJ.git"
      ...
   }

这很好用，我可以在node_modules/coolcomponent下看到我的代码。

我的COOLCOMPONENT项目回购是（afaik）npm注册表兼容，看起来像这样：

- 的 index.js

let CoolComponent = <div>test</div>
export default CoolComponent

- 的的package.json

{
  main:"index.js", <-- to my knowledge the important bit
  author:"blablah",
  ...more properties
}

问题

在CoolComponent导入SOMEAPP时如此：

import CoolComponent from "COOLCOMPONENTPROJ"

我收到以下错误：

  

编译失败。

     

./ node_modules / webchat-react-test / index.js模块解析失败：   意外的令牌（4:15）您可能需要一个合适的加载器来处理   这个文件类型。

问题

从这个假设webpack不会在node_modules文件夹中转换任何内容是否安全，因此这就是出现此错误的原因？我认为只是在同一个组件中只导出像let a = 3; export default a;这样的纯js就可以了。

如果是这样，需要做什么？我应该构建项目，然后确保我的index.js导入构建的文件并导出它吗？