0

我有一个动态 URL，它从我们的服务器中抓取图像标签中的图像，当被 babel-loader 处理时会引发错误。

这是一些被抛出的错误消息，所以我知道它来自 babel-loader：

错误：./src/browser/app/sideNav/SideNavItems.js 模块解析失败：/Users/.../path/to/local-site/node_modules/babel-loader/lib/index.js??ref-- 3!/Users/.../path/to/local-site/src/browser/app/sideNav/SideNavItems.js 意外令牌 (188:132) 您可能需要适当的加载程序来处理此文件类型。

这是动态网址：

const imageUrl = `/web/company/${companyID}/user/${userID}/logo`;

这是在 SideNavItems.js 中引发错误的 JSX：

185 const ClientLogoListItem = () =>
186 <ListItem style={inlineStyles.topListItem} disabled>
187  {isEmpty(logo)
188    ? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
189    : <CompanyLogo key="sideNavLogo" logo={logo} justifyContent="center" />}
190 </ListItem>;

如果我像这里显示的那样替换<CompanyLogo />组件，则构建成功完成：

const ClientLogoListItem = () =>
<ListItem style={inlineStyles.topListItem} disabled>
  {isEmpty(logo)
    ? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
    : <div>hey</div>}
</ListItem>;

所以它必须是<CompanyLogo />组件中的某些东西，这让我相信它是动态 URL。但是在用有效的 FPO 图像 url ( http://fpoimg.com/300x250?text=Preview )替换动态 URL 后，它仍然在同一个位置失败。

CompanyLogo.js

// @flow
import React from 'react';
// Helper functions
import { isNil } from 'lodash';

/**
 * CompanyLogo component
 */

type CompanyLogoProps = {
  logo: Object,
  justifyContent: String,
};
const inlineStyles = {
  clientLogo: {
    height: 59,
    width: 246,
    maxWidth: '145px',
  },
  homeLink: {
    display: 'flex',
  },
};

const CompanyLogo = ({ logo, justifyContent }: CompanyLogoProps) => {
  let companyID = 0;
  let userID = 0;
  if (!isNil(logo)){
    companyID = !isNil(logo.companyId) ? logo.companyId : 0;
    userID = !isNil(logo.userId) ? logo.userId : 0;
  }

  // const imageUrl = `/web/company/${companyID}/user/${userID}/logo`;
  // const imageUrl = '/web/company/' + companyID + '/user/' + userID + '/logo';
  const imageUrl = 'http://fpoimg.com/300x250?text=Preview';
  return (
    <a
      href="/"
      style={{
        ...inlineStyles.homeLink,
        justifyContent: justifyContent,
      }}
    >
      <img
        alt="Company Logo"
        src={imageUrl}
        style={{
          ...inlineStyles.clientLogo,
          backgroundColor: '#fff',
        }}
      />
    </a>
  )
};

我认为在这里使用 exclude 属性没有意义，因为我不想排除对整个文件的转译，我只需要它来忽略这个动态 URL。

我也在使用url-loader，但这似乎不是这个图像 src 有问题的加载器，否则我认为它会在运行该加载器时被捕获。

编辑更清晰

让每个人都知道，我不只是启动应用程序并进行设置。它已经在生产中运行了几个月，并且已经正确渲染了一堆不同的页面。我假设我可以通过忽略这个 URL 来解决这个问题，这就是为什么我要问是否可以这样做。关于这是否应该能够通过加载程序的规则似乎没有什么不合适的，这就是为什么我认为我现在可能只需要选择退出加载程序检查。但我可能正在考虑这个错误，只需要找出根本原因，而不是试图解决它。

这是我的.babelrc文件，我使用的是 Este 样板，因此服务器正在生成初始标记，因此这是.babelrc用于服务器的。

{
  "presets": ["env", "react", "stage-1"],
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": false,
    }],
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-react-constant-elements"
      ]
    }
  }
}

另外这里是错误消息的其余部分，不确定我是否应该添加它：

Error: ./src/browser/app/sideNav/SideNavItems.js Module parse failed: `/Users/.../path/to/local-site/node_modules/babel-loader/lib/index.js??ref--3!/Users/.../path/to/local-site/src/browser/app/sideNav/SideNavItems.js Unexpected token (188:132) You may need an appropriate loader to handle this file type.`

| _react2.default.createElement('div',{__source:

{fileName:_jsxFileName,lineNumber:188}},'hey');var SideNavItems=function SideNavItems((_temp=_ref,_ref3=
| <_CompanyLogo2.default key="sideNavLogo"logo={logo}justifyContent="center"/>,_temp)){var _temp,_ref3;var config=_ref.config,currNavRoute=_ref.currNavRoute,intl=_ref.intl,logo=_ref.logo,router=_ref.router;var buildListItems=function buildListItems(nodes){if(Array.isArray(nodes)){return nodes.map(function(node){var children=node.children,displayName=node.displayName,link=node.link,foundLink=node.foundLink,topLevel=node.topLevel,leftIcon=node.leftIcon;var keyName=(0,_functions.transformForId)(displayName.defaultMessage);var childrenDefined=!(0,_isNil3.default)(children);var linkDefined=!(0,_isNil3.default)(link);var foundLinkDefined=!(0,_isNil3.default)(foundLink);var topLevelDefined=!(0,_isNil3.default)(topLevel);var childrenArray=[];var isSelected=false;var iconFillColor=_defaultTheme2.default.colors.primary;if(!(0,_isNil3.default)(node.coveredRoutes)){if((0,_some3.default)(node.coveredRoutes,(0,_method3.default)('includes',(0,_toUpper3.default)(currNavRoute)))){isSelected=true;iconFillColor='#fff';}}var listItemStyle=_extends({},inlineStyles.listItem);if(isSelected){inlineStyles.listItemSelected.backgroundColor=_defaultTheme2.default.colors.primary;listItemStyle=_extends({},inlineStyles.listItemSelected);}if(!(0,_isNil3.default)(node.backgroundColor)){inlineStyles.nestedListStyle=_extends({},inlineStyles.nestedListStyle,{backgroundColor:node.backgroundColor});}if(childrenDefined){childrenArray=(0,_values3.default)(children);}return _react2.default.createElement(_List.ListItem,_extends({nestedListStyle:inlineStyles.nestedListStyle,style:listItemStyle,key:'sideNavListItem-'+keyName,primaryText:_react2.default.createElement('div',{style:topLevelDefined?inlineStyles.primaryTextTopLevel:inlineStyles.primaryTextChildren,__source:{fileName:_jsxFileName,lineNumber:148}},intl.formatMessage(displayName))},childrenDefined&&{primaryTogglesNestedList:true,nestedItems:buildListItems(childrenArray)},linkDefined&&{value:link,href:link},foundLinkDefined&&{value:foundLink,onClick:function onClick(){return router.push(foundLink);}},topLevelDefined&&{leftIcon:_react2.default.createElement(_SideNavIcons.SideNavIcons,{iconName:leftIcon,fillColor:iconFillColor,__source:{fileName:_jsxFileName,lineNumber:174}})},{__source:{fileName:_jsxFileName,lineNumber:143}}));});}return _react2.default.createElement(_LoadingSpinner2.default,{key:'sideNavLoadingSpinner',style:inlineStyles.loadingSpinner,__source:{fileName:_jsxFileName,lineNumber:182}});};var ClientLogoListItem=function ClientLogoListItem(){return _react2.default.createElement(_List.ListItem,{style:inlineStyles.topListItem,disabled:true,__source:{fileName:_jsxFileName,lineNumber:186}},(0,_isEmpty3.default)(logo)?_ref2:_ref3);};
| 
 @ ./src/browser/app/sideNav/SideNav.js 16:18-43
 @ ./src/browser/app/App.js
 @ ./src/browser/router/routeConfig.js
 @ ./src/browser/app/Root.js
 @ ./src/browser/main.js
 @ ./src/browser/index.js
 @ multi ./src/browser/index.js

npm ERR! Darwin 16.7.0
npm ERR! argv "/Users/tylerandersen/.nvm/versions/node/v6.10.0/bin/node" "/Users/tylerandersen/.nvm/versions/node/v6.10.0/bin/npm" "run" "html"
npm ERR! node v6.10.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! CompanyName@ html: `gulp to-html --production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the CompanyName@ html script 'gulp to-html --production'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the CompanyName package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp to-html --production
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs CompanyName
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls CompanyName
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/.../path/to/local-site/npm-debug.log
4

1 回答 1

0

好吧，修复最终没有多大意义，我最终需要尝试了解它起作用的原因，但现在构建正在通过更改以下内容来工作：

这段代码：

185 const ClientLogoListItem = () =>
186 <ListItem style={inlineStyles.topListItem} disabled>
187  {isEmpty(logo)
188    ? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
189    : <CompanyLogo key="sideNavLogo" logo={logo} justifyContent="center" />}
190 </ListItem>;

改为：

const logoComponent = isEmpty(logo)
? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
: <CompanyLogo key="sideNavLogo" logo={logo} justifyContent="center" />;

const ClientLogoListItem = () =>
    <ListItem style={inlineStyles.topListItem} disabled>
      {logoComponent}
    </ListItem>;

因此，通过提取内联 JSX 三元组，它现在传递了 babel-loader 错误。一定是我的 babel-loader (^6.2.0) 版本不喜欢的东西。我什至将其更改为 7.0.0 版本，但在此更改之前它仍然抛出相同的错误。

于 2018-01-12T18:01:23.150 回答