0

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
Tyler Andersen
  • 21
  • 4
  • With the content you've given us, I don't see any issues. Is there more helpful information after that part of the error text? Have you enabled the `react` preset in your Babel config to parse the JSX? – loganfsmyth Jan 10 '18 at 01:13
  • @loganfsmyth I just added my `.babelrc` so you can see if anything seems off with it. I also tried to add some more context about how this isn't just getting it set up for the first time. There's a whole lot more on the error that I'll post, I just wasn't sure if it was super important and didn't want to take up a bunch of space in the question with it. – Tyler Andersen Jan 11 '18 at 22:02
  • Can you show the original code for your `SideNavItems`? That appears to be what is failing. – loganfsmyth Jan 11 '18 at 22:21
  • Hmm well I just swapped out the dynamic URL with a totally valid existing URL and I get the same error... Looks like it has more to do with gulp and not finding babel/register package. Trying to look into that now. – Tyler Andersen Jan 11 '18 at 22:29
  • @loganfsmyth just added the rest of the JSX. But ya I think I'm realizing that it's just failing on running babel correctly at all and this just happens to be the first thing it fails on :/ Cause right now it's still saying: `Failed to load external module @babel/register ` – Tyler Andersen Jan 11 '18 at 22:38
  • Yeesh I'm all over the place with this... But just found out that the build completes and the build goes just fine if I completely remove the component that it's failing on. So it's definitely some code within the `` component that babel doesn't like. I'll post all of the code for the `` component. – Tyler Andersen Jan 11 '18 at 22:43
  • @loganfsmyth I narrowed it down to the `logo` property. If I don't pass the `logo` property at all it builds correctly. – Tyler Andersen Jan 11 '18 at 23:22
  • This seems like a Babel bug. If you'd like to file it on the issue tracker, that seems like the best next step for you. – loganfsmyth Jan 11 '18 at 23:25

1 Answers1

0

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.

Tyler Andersen
  • 21
  • 4