Как заставить babel-loader игнорировать мой динамический URL

Question

У меня есть динамический 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) Вам может потребоваться соответствующий загрузчик для обработки этого типа файлов.

Это динамический URL:

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

Это JSX, для которого выдается ошибка в SideNavItems.js:

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. Но после замены динамического URL-адреса на действительный 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, и он все еще выдал ту же ошибку до этого изменения.