javascript reactjs webpack babeljs babel-loader

How to make babel-loader ignore my dynamic URL

I have a dynamic URL that grabs images from our server in an image tag that throws an error when being processed by babel-loader.

This is some of the error message being thrown so that I know it's from the babel-loader specifically:

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.

This is the dynamic URL:

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

This is the JSX for where the error is being thrown in 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>;

If I replace the <CompanyLogo /> component like I show here the build completes successfully:

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

So it has to be something within the <CompanyLogo /> component which led me to believe it was the dynamic URL. But after replacing the dynamic URL with a valid FPO image url (http://fpoimg.com/300x250?text=Preview) it still fails at the same spot.

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>
  )
};

I don't think using the exclude property makes sense here because I don't want to exclude transpiling the entire file, I just need it to ignore this one dynamic URL.

I'm also using url-loader, but that doesn't seem to be the loader that's having the issue with this image src otherwise I would think it would get caught when running that loader.

Edit for more clarity

Just so everyone is aware, I'm not just starting the application and getting it set up. It's been running in production for several months now and has been rendering a bunch of different pages correctly. I'm making an assumption about how I might be able to solve this problem by just ignoring this URL which is why I'm asking if it's possible to do that. Nothing seems to be out of place about whether or not this should be able to pass the loader's rules which is why I'm thinking I might just have to opt out of the loader check for now. But I'm probably thinking about this wrong and just need to figure out the root cause rather than trying to work around it.

Here's my .babelrc file, I'm using the Este boilerplate and so the server is generating the initial markup and so this is a .babelrc for the server.

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

Also here's the rest of the error message, wasn't sure if I should add it:

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

Solution

Well the fix ended up not making much sense and I'll need to eventually try to understand the reason why this worked but for now the build is working by changing the following:

This code:

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>;

Changed to this:

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>;

So by extracting out the inline JSX ternary it now passes the babel-loader error. Must be something that my version of babel-loader (^6.2.0) doesn't like. I even changed it to version 7.0.0 and it still threw the same error before this change.