[Bugs] 0.5.2 breaking change: Path must be a string. Received undefined #47

kopax · 2018-07-12T21:33:59Z

Description

I have been working on a coworker implementation that uses this plugin though I don't really know about it except my coworker use to have it working.

Reproduction

https://travis-ci.org/yeutech-lab/rollup-umd-documentation/jobs/403153237#L1155

This guy helped me found the error: splunk/battlecat-poll#3

Proposed solution

Downgrade to 0.5.1:

$ npm uninstall babel-plugin-inline-react-svg --save-dev \
  && npm install [email protected] --save-dev

The text was updated successfully, but these errors were encountered:

…inline-react-svg#47

## [2.3.10](v2.3.9...v2.3.10) (2018-07-13) ### Bug Fixes * **babel-plugin-inline-react-svg:** due to issue airbnb/babel-plugin-inline-react-svg#47 ([42538e2](42538e2))

ljharb · 2018-07-19T03:28:25Z

Any chance you could provide the code that this errors on? Specifically, src/static/badge-yeutech.js, i think.

kopax · 2018-07-19T03:50:35Z

This is src/static/badge-yeutech.js:

export default 'iVBORw0KGgoAAAANSUhEUgAAaxaXycAAAAASUVORK5CYII=';

(I have shortened the base64 to preserve privacy of the real content)

ljharb · 2018-07-19T05:36:20Z

Thanks - and the file that's importing it, what's the code used there?

kopax · 2018-07-19T05:52:59Z

They are two:

src/components/FooterRenderer.js:

import React from 'react';
import PropTypes from 'prop-types';
import bp from 'bootstrap-styled-mixins/lib/breakpoints';
import Img from 'bootstrap-styled/lib/Img';
import Footer from 'bootstrap-styled/lib/Footer';
import A from 'bootstrap-styled/lib/A';
import styled from 'styled-components';
import omit from 'lodash.omit';
import cn from 'classnames';
import mapToCssModules from 'map-to-css-modules/lib';
import defaultLogo from '../static/badge-yeutech';

export const defaultProps = {
  logo: {
    logo: defaultLogo,
    href: 'https://www.defaulturl.com',
    target: '_blank',
    alt: 'logo',
  },
  theme: {
    styleguide: {
      '$rsg-footer-margin': '40px 0 60px 0',
      '$rsg-footer-float': 'right',
      '$rsg-footer-img-height': {
        xs: '35px',
        md: '43px',
      },
    },
  },
};

export const propTypes = {
  /**
   * @ignore
   */
  className: PropTypes.string, // eslint-disable-line react/require-default-props
  /** Logo attributes in order to render logo. */
  logo: PropTypes.shape({
    logo: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object,
    ]),
    href: PropTypes.string,
    target: PropTypes.string,
    alt: PropTypes.string,
  }),
  /** Theme variables. Can be: */
  theme: PropTypes.shape({
    styleguide: PropTypes.shape({
      '$rsg-footer-margin': PropTypes.string,
      '$rsg-footer-float': PropTypes.string,
      '$rsg-footer-img-height': PropTypes.shape({
        xs: PropTypes.string,
        md: PropTypes.string,
      }),
    }),
  }),
  /**
   * Replace or remove a className from the component.
   * See example <a href="https://www.npmjs.com/package/map-to-css-modules" target="_blank">here</a>.
   */
  cssModule: PropTypes.object, // eslint-disable-line react/require-default-props
};

const FooterRendererUnstyled = (props) => {
  const {
    className,
    logo,
    cssModule,
    ...attributes
  } = omit(props, ['theme']);

  return (
    <Footer
      className={mapToCssModules(cn(className, 'rsg-footer', cssModule))}
      {...attributes}
    >
      {typeof logo.logo === 'string' ? (
        <div>
          {logo.text && (
            <span>{logo.text}</span>
          )}
          <A
            href={logo.href}
            target={logo.target}
            alt={logo.alt}
          >
            <Img
              className="rsg-footer-img"
              src={`data:image/png;base64,${logo.logo}`}
              height={logo.height}
              alt={logo.alt}
            />
          </A>
        </div>
      ) : (
        <A
          href={logo.href}
          target={logo.target}
          alt={logo.alt}
        >
          {logo.logo}
        </A>
      )}
    </Footer>
  );
};

FooterRendererUnstyled.defaultProps = defaultProps;
FooterRendererUnstyled.propTypes = propTypes;

const FooterRenderer = styled(FooterRendererUnstyled)`
  ${(props) => `
    &.rsg-footer {
      margin: ${props.theme.styleguide['$rsg-footer-margin']};
      float: ${props.theme.styleguide['$rsg-footer-float']};
      & .rsg-footer-img {
  ${bp.up(
    'xs',
    props.theme['$grid-breakpoints'],
    `
      height: ${props.theme.styleguide['$rsg-footer-img-height'].xs};
    `
  )}
  ${bp.up(
    'md',
    props.theme['$grid-breakpoints'],
    `
      height: ${props.theme.styleguide['$rsg-footer-img-height'].md};
    `
  )}
      }
    }
  `}
`;

FooterRenderer.defaultProps = defaultProps;
FooterRenderer.propTypes = propTypes;

export default FooterRenderer;

src/components/LayoutRenderer.js:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { BootstrapProvider } from 'bootstrap-styled-provider';
import theme from '../theme';
import StyleGuideRenderer from '../rsg-bs-components/StyleGuide/StyleGuideRenderer';
import badgeLogo from '../static/badge-yeutech';
import Logo from '../static/logo-yeutech.svg';

class LayoutRenderer extends PureComponent {
  render() {
    const { theme, className, title, children, toc, hasSidebar, logoMenu, logoFooter } = this.props;
    return (
      <BootstrapProvider
        reset={true}
        injectGlobal={true}
        theme={theme}
      >
        <StyleGuideRenderer
          className={className}
          title={title}
          logoMenu={logoMenu}
          logoFooter={logoFooter}
          toc={toc}
          hasSidebar={hasSidebar}
        >
          {children}
        </StyleGuideRenderer>
      </BootstrapProvider>
    );
  }
}

LayoutRenderer.defaultProps = {
  title: 'rollup-documentation',
  className: null,
  theme,
  ga: {
    id: null,
  },
  logoMenu: {
    logo: <Logo />,
    href: null,
    alt: 'logo',
  },
  logoFooter: {
    logo: badgeLogo,
    href: null,
    alt: 'logo',
  }
};

LayoutRenderer.propTypes = {
  /** @ignore */
  className: PropTypes.string,
  /** @ignore */
  children: PropTypes.node.isRequired,
  /** The documentation title */
  title: PropTypes.string.isRequired,
  /** An instance of TableOfContentsRenderer */
  toc: PropTypes.node.isRequired,
  /** theme to be used by BootstrapProvider */
  theme: PropTypes.object,
  ga: PropTypes.shape({
    id: PropTypes.string,
  }),
  /** define if the sidebar should be displayed */
  hasSidebar: PropTypes.bool,
  /** Logo to use in sidebar menu */
  logoMenu: PropTypes.shape({
    logo: PropTypes.node,
    href: PropTypes.string,
    alt: PropTypes.string,
  }),
  /** Logo to use in footer */
  logoFooter: PropTypes.shape({
    logo: PropTypes.node,
    href: PropTypes.string,
    alt: PropTypes.string,
  }),
};

export default LayoutRenderer;

ljharb · 2018-07-19T06:18:14Z

Hmm, I'm confused - now i suspect the error is in the second file, on the import Logo from '../static/logo-yeutech.svg'; line. However, that's covered by our test cases.

Can you reproduce this locally? If so, can you try editing node_modules/babel-plugin-inline-react-svg/lib/index.js, and add a line before line 151 (applyPlugin(path.parent.id, filePath, path.parentPath.parentPath, state);) that does something like throw require('util').inspect([filePath, node.arguments, node]), and provide those three values? (Thanks for following up on this, btw)

kopax · 2018-07-19T07:38:56Z

Using 0.5.3:

I have inserted line 151 of node_modules/babel-plugin-inline-react-svg/lib/index.js

if (node.callee.name === 'require' && t.isVariableDeclarator(path.parent)) {
+  throw require('util').inspect([filePath, node.arguments, node])
  applyPlugin(path.parent.id, filePath, path.parentPath.parentPath, state);
}

The log

TypeError: Cannot create property '_babel' on string '[ 'react',
  [ { type: 'StringLiteral',
      value: 'react',
      trailingComments: [],
      leadingComments: [],
      innerComments: [],
      [Symbol()]: true } ],
  Node {
    type: 'CallExpression',
    start: undefined,
    end: undefined,
    loc: undefined,
    callee:
     Node {
       type: 'Identifier',
       start: undefined,
       end: undefined,
       loc: undefined,
       name: 'require',
       __clone: undefined,
       _fromTemplate: undefined },
    arguments: [ [Object] ],
    __clone: undefined,
    _fromTemplate: undefined } ]'
    at File.wrap (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-core/lib/transformation/file/index.js:538:20)
    at Pipeline.transform (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
    at transform (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/util.js:50:22)
    at Object.compile (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/util.js:59:12)
    at write (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:21:21)
    at handleFile (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:43:7)
    at /home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:61:9
    at Array.forEach (<anonymous>)
    at handle (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:59:29)
    at Array.forEach (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

ljharb · 2018-07-19T07:47:53Z

Thanks - looks like it's choking on a require('react'). I'm not sure how that would appear in a file using import - unless the ordering in your babel config is off. What's your babelrc look like?

kopax · 2018-07-19T07:57:04Z

.babelrc

{
  "only": [
    "src",
    "styleguide"
  ],
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    "stage-2",
    "react"
  ],
  "plugins": [
    "array-includes",
    "transform-class-properties",
    "inline-react-svg"
  ],
  "env": {
    "production": {
      "plugins": [
        "add-module-exports",
        "transform-es2015-modules-commonjs"
      ]
    },
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs",
        "dynamic-import-node",
        ["module-resolver", {
          "root": ["./src"],
          "alias": {
            "rsg-components": "rsg-bs-components"
          }
        }]
      ]
    }
  }
}

ljharb · 2018-07-19T17:57:18Z

I suspect this is an ordering issue - ie, the svg plugin is running in the wrong order with respect to transform-es2015-modules-commonjs.

I'll see what i can do here.

kopax · 2018-07-19T18:08:37Z

This part for me still contains mysteries but if I can help do not hesitate to ask.

ljharb · 2018-07-20T00:09:34Z

ok one more - let's wrap that throw statement with if (!filePath) {?

kopax · 2018-07-20T00:53:44Z

TypeError: Cannot create property '_babel' on string '[ undefined,
  [ Node {
      type: 'CallExpression',
      start: 615,
      end: 649,
      loc: [SourceLocation],
      callee: [Node],
      arguments: [Array] } ],
  Node {
    type: 'CallExpression',
    start: 607,
    end: 650,
    loc: SourceLocation { start: [Position], end: [Position] },
    callee:
     Node {
       type: 'Identifier',
       start: 607,
       end: 614,
       loc: [SourceLocation],
       name: 'require' },
    arguments: [ [Node] ] } ]'
    at File.wrap (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-core/lib/transformation/file/index.js:538:20)
    at Pipeline.transform (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
    at transform (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/util.js:50:22)
    at Object.compile (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/util.js:59:12)
    at write (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:21:21)
    at handleFile (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:43:7)
    at /home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:61:9
    at Array.forEach (<anonymous>)
    at handle (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:59:29)
    at Array.forEach (<anonymous>)

ljharb · 2018-07-20T03:42:20Z

hmm, that looks like you're calling require with an array :-/ I think i have enough to make a fix, but just in case, could we change the line to:

if (!filePath) { throw require('util').inspect([filePath, node.arguments, node, node.arguments[0].arguments]); }

?

Thanks :-)

kopax · 2018-07-20T13:36:51Z

TypeError: Cannot create property '_babel' on string '[ undefined,
  [ Node {
      type: 'CallExpression',
      start: 615,
      end: 649,
      loc: [SourceLocation],
      callee: [Node],
      arguments: [Array] } ],
  Node {
    type: 'CallExpression',
    start: 607,
    end: 650,
    loc: SourceLocation { start: [Position], end: [Position] },
    callee:
     Node {
       type: 'Identifier',
       start: 607,
       end: 614,
       loc: [SourceLocation],
       name: 'require' },
    arguments: [ [Node] ] },
  [ Node {
      type: 'Identifier',
      start: 625,
      end: 632,
      loc: [SourceLocation],
      name: 'pkgBase' },
    Node {
      type: 'StringLiteral',
      start: 634,
      end: 648,
      loc: [SourceLocation],
      extra: [Object],
      value: 'package.json' } ] ]'
    at File.wrap (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-core/lib/transformation/file/index.js:538:20)
    at Pipeline.transform (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
    at transform (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/util.js:50:22)
    at Object.compile (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/util.js:59:12)
    at write (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:21:21)
    at handleFile (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:43:7)
    at /home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:61:9
    at Array.forEach (<anonymous>)
    at handle (/home/dka/workspace/github.com/yeutech-lab/rollup-umd-documentation/node_modules/babel-cli/lib/babel/dir.js:59:29)
    at Array.forEach (<anonymous>)

I didn't realize but it is possible for you to validate your fix prior release because the project is on GitHub, see how we fixed the 0.5.1 here: https://github.com/yeutech-lab/rollup-umd-documentation/blob/master/package.json#L172

ljharb · 2018-07-20T23:41:13Z

Thanks, that pinpointed it - export const pkg = require(path.join(pkgBase, 'package.json')); (ie, a dynamic require) broke it. I should be able to make a test case from that.

kopax · 2018-07-20T23:48:50Z

I suspect this is an ordering issue - ie, the svg plugin is running in the wrong order with respect to transform-es2015-modules-commonjs.

Was that finally related?

ljharb · 2018-07-20T23:56:59Z

Nope, turns out it wasn't ordering - just the dynamic require (we have none in our codebase, since the linter forbids it)

ljharb · 2018-07-21T00:00:33Z

v0.5.4 is released.

…airbnb/babel-plugin-inline-react-svg#47))

## [2.3.19](v2.3.18...v2.3.19) (2018-07-30) ### Bug Fixes * **alias:** Added $PACKAGE_NAME as a valid alias for the current base dir ([c88d2e4](c88d2e4)) * **dependencies:** Upgrade babel-plugin-inline-react-svg to 0.5.4 (fix airbnb/babel-plugin-inline-react-svg#47)) ([b4b03c8](b4b03c8))

kopax changed the title ~~[Bugs] 0.5.2 brings a breaking change~~ [Bugs] 0.5.2 breaking change: Path must be a string. Received undefined Jul 12, 2018

ljharb mentioned this issue Jul 12, 2018

The "path" argument must be of type string. Received type undefined jaredpalmer/razzle#687

Closed

kopax pushed a commit to yeutech-lab/rollup-umd-documentation that referenced this issue Jul 13, 2018

fix(babel-plugin-inline-react-svg): due to issue airbnb/babel-plugin-…

42538e2

…inline-react-svg#47

kopax mentioned this issue Jul 13, 2018

fix(babel-plugin-inline-react-svg): due to issue #47 yeutech-lab/rollup-umd-documentation#5

Merged

ljharb closed this as completed in da9d214 Jul 20, 2018

ljharb added the bug label Jul 20, 2018

kopax pushed a commit to yeutech-lab/rollup-umd-documentation that referenced this issue Jul 21, 2018

fix(dependencies): Upgrade babel-plugin-inline-react-svg to 0.5.4 (fix …

b4b03c8

…airbnb/babel-plugin-inline-react-svg#47))

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bugs] 0.5.2 breaking change: Path must be a string. Received undefined #47

[Bugs] 0.5.2 breaking change: Path must be a string. Received undefined #47

kopax commented Jul 12, 2018 •

edited

Loading

ljharb commented Jul 19, 2018 •

edited

Loading

kopax commented Jul 19, 2018

ljharb commented Jul 19, 2018

kopax commented Jul 19, 2018

ljharb commented Jul 19, 2018

kopax commented Jul 19, 2018 •

edited

Loading

ljharb commented Jul 19, 2018

kopax commented Jul 19, 2018

ljharb commented Jul 19, 2018

kopax commented Jul 19, 2018

ljharb commented Jul 20, 2018

kopax commented Jul 20, 2018

ljharb commented Jul 20, 2018

kopax commented Jul 20, 2018 •

edited

Loading

ljharb commented Jul 20, 2018

kopax commented Jul 20, 2018

ljharb commented Jul 20, 2018

ljharb commented Jul 21, 2018

[Bugs] 0.5.2 breaking change: Path must be a string. Received undefined #47

[Bugs] 0.5.2 breaking change: Path must be a string. Received undefined #47

Comments

kopax commented Jul 12, 2018 • edited Loading

Description

Reproduction

Proposed solution

ljharb commented Jul 19, 2018 • edited Loading

kopax commented Jul 19, 2018

ljharb commented Jul 19, 2018

kopax commented Jul 19, 2018

ljharb commented Jul 19, 2018

kopax commented Jul 19, 2018 • edited Loading

ljharb commented Jul 19, 2018

kopax commented Jul 19, 2018

ljharb commented Jul 19, 2018

kopax commented Jul 19, 2018

ljharb commented Jul 20, 2018

kopax commented Jul 20, 2018

ljharb commented Jul 20, 2018

kopax commented Jul 20, 2018 • edited Loading

ljharb commented Jul 20, 2018

kopax commented Jul 20, 2018

ljharb commented Jul 20, 2018

ljharb commented Jul 21, 2018

kopax commented Jul 12, 2018 •

edited

Loading

ljharb commented Jul 19, 2018 •

edited

Loading

kopax commented Jul 19, 2018 •

edited

Loading

kopax commented Jul 20, 2018 •

edited

Loading