question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Template parser can't handle let declaration with syntactic placeholder variable

See original GitHub issue

Bug Report

  • I would like to work on a fix!

Current behavior

When template is called with a let statement containing a syntactic placeholder for the variable (e.g. let %%foo%% = 1), the parser rejects it and mysteriously complains about Unexpected reserved word 'let'.

Welcome to Node.js v15.6.0.
Type ".help" for more information.
> require("@babel/template/package.json").version
'7.12.7'
> template = require("@babel/template").default
> template("let %%foo%% = 1")()
Uncaught [SyntaxError: Unexpected reserved word 'let' (2:0)
  1 | /* @babel/template */;
> 2 | let %%foo%% = 1
    =============
] {
  loc: Position { line: 2, column: 0 },
  pos: 23,
  code: 'BABEL_TEMPLATE_PARSE_ERROR'
}

Input Code

template("let %%foo%% = 1")({ foo: "x" });

These also give the same syntax error:

template.statement("let %%foo%% = 1")({ foo: "x" });
template.statements("let %%foo%% = 1")({ foo: "x" });
template.program("let %%foo%% = 1")({ foo: "x" });

Expected behavior

The template invocation should return an AST for let x = 1.

These invocations return an AST as expected:

// No placeholder
template("let x = 1")();

// Identifier placeholder
template("let FOO = 1;")({ FOO: "x" });

// const or var instead of let
template("const %%foo%% = 1")({ foo: "x" });
template("var %%foo%% = 1")({ foo: "x" });

// Ordinary identifier appears first
template("let a = 0, %%foo%% = 1")({ foo: "x" });

// Array destructuring
template("let [%%foo%%] = []")({ foo: "x" });

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

  • Importing @babel/template directly from the Node repl; no Babel config.

Environment

$ npx envinfo --preset babel

  System:
    OS: macOS High Sierra 10.13.6
  Binaries:
    Node: 15.6.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.4.0 - /usr/local/bin/npm
  npmPackages:
    @babel/template: ^7.12.7 => 7.12.7 

I can also reproduce this in AST Explorer and in RunKit, so it’s unlikely to be environment-specific.

Possible Solution

Additional context

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Zalatharcommented, Jan 30, 2021

I already have a slightly different solution, but either way the change is small, so we can worry about the details after I write some more tests and post a PR.

0reactions
Zalatharcommented, Jan 31, 2021

While writing tests I noticed that let %%lhs%%; and var %%lhs%%; (without an initializer) also don’t work, for reasons that are similar to this issue but not quite the same.

I’ll leave those alone for now since they’re easier to work around (just initialize to undefined) and I don’t want to deal with scope-creep.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Template literals (Template strings) - JavaScript | MDN
Template literals are literals delimited with backtick ... The strings and placeholders get passed to a function — either a default function ...
Read more >
Chapter 19. Templates: filling placeholders with data
This chapter shows you how to untangle the HTML from the data and the JavaScript by using templates. The designers on your team...
Read more >
Jinja Documentation (3.0.x) » Template Designer ...
A template contains variables and/or expressions, which get replaced with values when a template is rendered; and tags, which control the logic of...
Read more >
Use placeholders in yaml - Stack Overflow
Templates with variable placeholders is a frequently-requested YAML feature. Routinely, developers want to cross-reference content in the same YAML file or ...
Read more >
Template Literals - Scaler Topics
This placeholder can contain variables or expressions; by default, the template literal returns a string expression.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found