在react組件中添加react-lds導入導致編譯失敗

Question

請參閱導入導致錯誤的導入。如果我評論此行，那麼編譯沒有任何問題。

import React, {Component} from 'react'; 
import {returnCurrencies} from '../reducers/reducer_currency'; 
import {DropdownMenu, DropdownMenuList, DropdownMenuListItem} from 'react-lds'; 

export default class CurrencyDropDown extends Component 
{ 
    constructor(props) 
    { 
     super(props); 
     //console.log("props",props); 
    } 
    renderCurrencies(curr) 
    { 
     //console.log("Curr ", curr); 
     return (<option key={curr} value={curr}>{curr}</option>); 
    } 
    render() 
    { 
     if(!this.props.currencies) 
     { 
     return (<div></div>); 
     } 
     let currencyList = returnCurrencies(this.props.currencies); 
     return (<div> 
      <select value={this.props.initValue} onChange= 
       {this.props.selectCurrency}> 
      {currencyList.map(this.renderCurrencies)} 
      </select> 
     </div>); 
} 
} 

的package.json

{ 
    "name": "redux-simple-starter", 
    "version": "1.0.0", 
    "description": "Simple starter package for Redux with React and Babel support", 
    "main": "index.js", 
    "repository": "", 
    "scripts": { 
     "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", 
     "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test", 
     "test:watch": "npm run test -- --watch" 
}, 
"author": "", 
"license": "ISC", 
"devDependencies": { 
"babel-core": "^6.2.1", 
"babel-loader": "^6.2.0", 
"babel-preset-es2015": "^6.1.18", 
"babel-preset-react": "^6.1.18", 
"chai": "^3.5.0", 
"chai-jquery": "^2.0.0", 
"jquery": "^2.2.1", 
"jsdom": "^8.1.0", 
"mocha": "^2.4.5", 
"react-addons-test-utils": "^0.14.7", 
"webpack": "^1.12.9", 
"webpack-dev-server": "^1.14.0" 
}, 
"dependencies": { 
"axios": "^0.16.2", 
"babel-preset-stage-1": "^6.1.18", 
"lodash": "^3.10.1", 
"prop-types": "^15.5.10", 
"react": "^0.14.9", 
"react-dom": "^0.14.9", 
"react-lds": "^1.1.11", 
"react-redux": "4.3.0", 
"react-router": "^2.0.1", 
"redux": "^3.0.4", 
"redux-promise": "^0.5.3" 
} 

}

無法與下面誤差進行編譯。

ERROR在./~/moment-timezone/data/packed/latest.json 模塊解析失敗：C：.. \ XXXX \ node_modules \力矩時區\數據\打包\ latest.json意外標記（2 ：10） 您可能需要一個合適的加載器來處理這種文件類型。 SyntaxError：意外的令牌（2:10） at Parser.pp $ 4.raise（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：2221：15） at Parser.pp。 （C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \）中意外的（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：603：10） dist \ acorn.js：581：61） at Parser.pp $ 1.parseExpressionStatement（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：966：10） at Parser.pp $ 1 .parseStatement（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：730：24） at Parser.pp $ 1.parseBlock（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：981：25） at Parser.pp $ 1.parseStatement（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：70 （C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：638：25） at Parser.parse（C：.. \ XXXX） \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：516：17） at Object.parse（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：3098：39） @ ./~/moment-timezone/index.js 2：15-51

Answer 1

它失敗，因爲它無法加載JSON文件。您需要配置的WebPack加載JSON文件：

安裝json-loader：

npm install --save-dev json-loader 

，並調整的WebPack配置裝載機部分使用的東西是這樣的：

rules: [ 
    ... 
    { 
    test: /\.json$/, 
    use: 'json-loader' 
    } 
    ... 
] 

既然你是使用webpack v1配置可能看起來有點不同。