Question

我有一个动态网址，可以在图像标记中抓取我们服务器中的图像，这些图像标记在被babel-loader处理时会抛出错误。

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

错误：./ src /浏览器/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图像网址（http://fpoimg.com/300x250?text=Preview）替换动态网址后，它仍会在同一位置失败。

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

Answer 1

这个修复程序最终没有多大意义，我最终需要尝试理解其工作原因，但是现在构建工作正在改变以下内容：

此代码：

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版本，并且在此更改之前仍然会抛出相同的错误。

如何让babel-loader忽略我的动态网址

1 个答案: