無法需要React組件

我目前正在從整體React項目中提取模塊，以便它們可以單獨存儲在我的npm註冊表中，但我似乎無法正確導出和導入它們。試圖提取他們之前，我用的是：無法需要React組件

const Component = require("./component.js");

和使用的WebPack捆綁一切。這工作正常。然後，我將組件移至一個單獨的項目中，該項目與webpack捆綁在一起。然而，我似乎無法讓它作爲一個npm的依賴。下面是該組件的基本代碼：

// Some require statements 
... 
var Component = React.createClass({...}); 
module.exports = Component;

構建過程輸出束建/ bundle.js和的package.json看起來是這樣的：

{ 
    "name": "component", 
    "version": "0.0.2", 
    "description": "...", 
    "main": "build/bundle.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build-dev": "webpack", 
    "build-min": "NODE_ENV=production webpack && uglifyjs ./build/bundle.js -c -m -o ./build/bundle.min.js --source-map ./build/bundle.min.js.map", 
    "prepublish": "npm run build-min" 
    }, 
    "publishConfig": { 
    "registry": "registry" 
    }, 
    "author": "esaron", 
    "license": "UNLICENSED", 
    "dependencies": { 
    ... 
    }, 
    "devDependencies": { 
    ... 
    } 
}

而且我將其導入搭配：

const Component = require("component");

當我嘗試加載網頁，我在控制檯看到以下錯誤：

bundle.js：1299未捕獲的不變違例：元素類型無效：預期爲字符串（對於內置組件）或類/函數（對於複合組件），但得到：object。檢查exports的渲染方法。

當調試，果然，需要調用是給我

組件=對象{}

我得到相同的結果，如果我直接要求bundle.js在將其複製到項目中之後，我覺得我不應該設置我的構建併發布正確的方式，並且經過一段時間的搜索後，我無法找出我做錯了什麼。

來源

2016-07-30 Esaron

當你的組件被分離出它們自己的包時，你不應該捆綁你的組件。如果他們使用ES6，那麼使用Babel作爲預發佈步驟來傳輸它們是一個好主意，但您不需要捆綁它們。

想想你的組件對捆綁步驟做了什麼。它正在通過你的入口點並將任何所需的依賴關係拉入單個文件。這意味着你的bundle.js結果將會吸引你所有的反應，反應，以及你需要的任何其他組件。

只有你的主應用程序（這將需要組件包）需要一個捆綁步驟。在這裏，它將解析所有依賴關係，包括嵌套的依賴關係，並將它們一起放入應用程序的bundle.js中，確保您不會將重複副本的庫（如反應）拖入應用程序。

來源

2016-07-30 21:10:15 Danny

我根本就沒想過這件事。謝謝！ – Esaron

無法需要React組件

回答

相關問題