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"
}

}

无法使用以下错误进行编译。

错误在./~/moment-timezone/data/packed/latest.json中模块解析失败：C：.. \ XXXX \ node_modules \ moment-timezone \ data \ packed \ latest.json意外的令牌（2:10）您可能需要适当的加载程序来处理此文件类型。 SyntaxError：意外的令牌（2:10）在Parser.pp $ 4.raise（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：2221：15）在Parser.pp.unexpected（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：603：10）在Parser.pp.semicolon（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：581：61）在Parser.pp $ 1.parseExpressionStatement（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：966：10）在Parser.pp $ 1.parseStatement（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：730：24）在Parser.pp $ 1.parseBlock（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：981：25）在Parser.pp $ 1.parseStatement（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：709：33）在Parser.pp $ 1.parseTopLevel（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：638：25）在Parser.parse（C：.. \ XXXX \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：516：17）在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配置可能看起来与您有所不同。

在react组件中添加react-lds导入导致编译失败

1 个答案: