Errors with usage in CRAv2

[cpannwitz]

Bug

• babel-plugin-console version: 0.2.1
• node version: 9.5.0
• npm (or yarn) version: yarn 1.7.0

Relevant code or config

import React, { Component } from "react";
import scope from "scope.macro";

function add100(a) {
  const oneHundred = 100;
  scope("Add 100 to another number");
  return add(a, oneHundred);
}

function add(a, b) {
  return a + b;
}

class App extends Component {
  componentDidMount = () => {
    add100(1);
  };

  render() {
    return (
      <div className="App">
      </div>
    );
  }
}

export default App;

What you did:

1. npx create-react-app@next --scripts-version=2.0.0-next.66cc7a90
2. yarn add babel-plugin-console & yarn add scope.macro
3. Inserted above example code from this plugins pages in barebones CRAv2 App.js
4. yarn start

What happened (please provide anything you think will help):

index.js:2214 ./src/App.js
Module build failed: Error: Unknown substitution "args" given
    at Array.forEach (<anonymous>)
    at Array.map (<anonymous>)
    =============
    at Array.map (<anonymous>)
    at Array.forEach (<anonymous>)

As far as I know, the upcoming Create-React-App version 2 comes with built-in support for babel-macros. I also checked with another babel-macro plugin, which is working fine.

Edit: missed a line.

[michaelsbradleyjr]

I have experienced the exact same problem with scope.macro, while other macros work, e.g. it from param.macro.

[CanRau]

Get the same error message 😣

[vjpr]

Found the problem.

@mattphillips

const buildLog = template => (...args) => level => {
  if (level == 0) {
    return template('console.log(args);')({ args });
  }

  const indentation = indentWith(level, '| ', '| ');
  return template(`
    if (typeof window !== 'undefined') {
      console.log(args);
    } else {
      console.log('${indentation}', args);

    }
  `)({ args });
};

Should be:

const buildLog = template => (...args) => level => {
  if (level == 0) {
    return template('console.log(ARGS);')({ ARGS });
  }

  const indentation = indentWith(level, '| ', '| ');
  return template(`
    if (typeof window !== 'undefined') {
      console.log(ARGS);
    } else {
      console.log('${indentation}', ARGS);

    }
  `)({ ARGS });
};

There are also other usages that need changing.

---

Placeholders must be capitalized.

Note the lowercase placeholder in the babel template.

---

https://babeljs.io/docs/en/next/babel-template.html#placeholderpattern:

placeholderPattern Type: RegExp | false Default: /^[_$A-Z0-9]+$/

A pattern to search for when looking for Identifier and StringLiteral nodes that should be considered placeholders. 'false' will disable placeholder searching entirely, leaving only the 'placeholderWhitelist' value to find placeholders.

[vjpr]

PR: https://github.com/mattphillips/babel-plugin-console/pull/8

[cyrus-za]

Experiencing this issue with CRAv3

Using Typescript with CRA on MacOS.