2015-10-30 20 views
2

我試圖採取反應0.14旋轉之前,我升級它在我的項目。然而,用一個簡單的「Hello World」的原型,是的WebPack拋出一個錯誤:`_Symbol.'for'`:那實際上是有效的ES6? Webpack建立它從反應來源

ERROR in ./~/react/lib/ReactElement.js 
Module parse failed: /home/dan/Demos/reactiflux/node_modules/babel-loader/index.js!/home/dan/Demos/reactiflux/node_modules/react/lib/ReactElement.js Line 25: Unexpected string 
You may need an appropriate loader to handle this file type. 
| // The Symbol used to tag the ReactElement type. If there is no native Symbol 
| // nor polyfill, then a plain number is used for performance. 
| var REACT_ELEMENT_TYPE = typeof _Symbol === 'function' && _Symbol.'for' && _Symbol.'for'('react.element') || 0xeac7; 
| 
| var RESERVED_PROPS = { 
@ ./~/react/lib/ReactMount.js 18:19-44 

我確實有配置通天裝載機,當我降級反應0.13,一切正常。在錯誤消息的中間,真正突出顯示的是_Symbol.'for'

在反應上線路21(不是25)/ LIB/ReactElement.js,該行看起來更正確的,用方括號圍繞'for'鍵:

var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7; 

我假定在所示的代碼錯誤消息在編譯期間處於中間狀態,或者是最終編譯的輸出。有誰知道什麼可能導致Webpack產生看起來錯誤的東西?有沒有人成功地使用過Webpack,Babel和React〜0.14.1呢?

更新

沒有針對此問題:https://github.com/babel/babel/issues/2377

它是封閉的,但它看起來像它回來給我。這是固定在5.8.25,但我有5.8.29,我仍然遇到了錯誤。

+1

babel/webpack/react 0.14完美地工作,有很多回購使用它的github上。不知道該怎麼建議,因爲你還沒有發佈構建代碼或版本 - 這是我上週用這個設置完成的項目 - https://github.com/DominicTobias/universal-react/ –

+0

是的,我懷疑這是實際上是一個真正的bug,這就是爲什麼我沒有提出問題。但由於該項目非常小,我不確定該從哪裏進行故障排除。我想我應該檢查是否有其他人犯了同樣的錯誤,不管它是什麼。我會嘗試尋找一個GH的工作基礎,也許我可以發現一個重要的區別。 –

+0

你可以發佈你的「簡單的你好世界原型」的代碼嗎?尤其是構建配置。 – Bergi

回答

1

不,那不是有效的代碼。這是Babel項目的一個問題,但它已在最近發佈的6.0版本中得到修復。

我也遇到過這個問題,現在我已經檢查了最新版本,它工作正常。這裏是我的測試步驟:

# install Babel and plugins 
npm install babel-cli babel-preset-es2015 babel-plugin-transform-runtime 
# install React 
npm install react 
# run babel against problem react file 
./node_modules/.bin/babel node_modules/react/lib/ReactElement.js --plugins transform-runtime --presets es2015 

它提供了有效的輸出,所以這個問題似乎被解決了。

而且有好消息給你,babel-loader for webpack已經支持6個版本的Babel。查看其文檔的詳細信息

2

看來問題與我有關,包括babel運行時。我.babelrc是從一箇舊的項目複製:

{ 
    "optional": "runtime", 
    "stage": 0 
} 

在這個小你好世界的演示,有什麼需要捆綁運行,所以我只是刪除它,注意到,https://github.com/DominicTobias/universal-react/,也使用相同的後構建工具,並不需要它。這是我需要做出的唯一改變來實現這個目標。

我的WebPack配置是超級簡單:

var path = require("path"); 

module.exports = { 
    entry: "./index.js", 
    output: { 
     path: path.join(__dirname, "/dist"), 
     filename: "index.min.js" 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      loader: "babel" 
     }] 
    } 
}; 

我想這就是我得到了從一個更復雜的項目成什麼應該是一個簡單可行的演示覆制配置文件。

我看到有一個babel-plugin-runtime以及關於NPM的babel運行時,但是當我爲了完整性而嘗試BPR時,Babel抱怨:Module build failed: ReferenceError: The plugin "runtime" collides with another of the same name。由於我實際上並不需要運行時,鏈接的GH repo是404,並且因爲它畢竟屬於問題跟蹤器,所以這是我現在要做的。