SyntaxError: Identifier 'hue' has already been declared #1525

nesbocaj · 2019-05-12T23:28:10Z

Stencil version:

@stencil/core@0.18.1

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

The component builds correctly but does not render and instead results in the following error message in the browser console:

SyntaxError: Identifier 'hue' has already been declared "http://localhost:3333/build/charts/spark-line.entry.js"

Expected behavior:

The component should build and render correctly with no error message in the browser console.

Steps to reproduce:

$ npm init stencil and pick component
$ npm install --save-dev @stencil/core@0.18.1
$ npm install --save d3
$ npm install --save-dev @types/d3
$ npm start

Related code:

./src/components/spark-line/spark-line.tsx

import { Component, Prop } from "@stencil/core";
import * as d3 from "d3";

@Component({
  tag: "spark-line",
  shadow: true
})
export class SparkLine {
  private xScale: d3.ScaleTime<number, number>;

  private yScale: d3.ScaleLinear<number, number>;

  private linePath: string;

  @Prop()
  public data: Array<{ time: Date; price: number }> = [];

  @Prop()
  public width: number = 640;

  @Prop()
  public height: number = 200;

  public componentWillLoad() {
    this.xScale = d3.scaleTime().range([0, this.width]);
    this.yScale = d3.scaleLinear().range([this.height, 0]);

    this.updateDomain();
  }

  public componentWillUpdate() {
    this.updateDomain();
  }

  public render() {
    return (
      <svg width={this.width} height={this.height}>
        <g>
          <path d={this.linePath} fill="transparent" stroke="#AAA" />
        </g>
      </svg>
    );
  }

  private updateDomain() {
    if (!this.data || this.data.length === 0) {
      return;
    }

    const timeExtent = d3.extent(this.data, datum => datum.time);
    const priceExtent = d3.extent(this.data, datum => datum.price);

    this.xScale.domain(timeExtent);

    this.yScale.domain(priceExtent)
      .nice();

    const lineGenerator = d3
      .line<{ time: Date; price: number }>()
      .x(datum => this.xScale(datum.time))
      .y(datum => this.yScale(datum.price));

    this.linePath = lineGenerator(this.data);
  }
}

./src/index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>
  <script src="/build/charts.js"></script>

</head>
<body>
  <spark-line></spark-line>
</body>
</html>

./stencil.config.ts

import { Config } from "@stencil/core";

export const config: Config = {
  namespace: "charts",
  outputTargets: [
    { type: "dist" },
    { type: "docs" },
    {
      type: "www",
      serviceWorker: null, // disable service workers
    },
  ],
};

Other information:

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

nesbocaj · 2019-05-12T23:33:58Z

Adding --es5 to the start script in package.json results in the expected behaviour in Firefox, but not in Chrome.

{
  ...
  "scripts": {
    ...
    "start": "stencil build --dev --watch --serve --es5",
    ...
  }
  ...
}

manucorporat · 2019-05-18T15:34:26Z

It might be related with rollup/rollup#2865

ionitron-bot bot added the triage label May 12, 2019

peterennis mentioned this issue May 16, 2019

SyntaxError: Identifier 'interval' has already been declared #1535

Closed

manucorporat closed this as completed in 6ce6e45 May 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SyntaxError: Identifier 'hue' has already been declared #1525

SyntaxError: Identifier 'hue' has already been declared #1525

nesbocaj commented May 12, 2019 •

edited

nesbocaj commented May 12, 2019

manucorporat commented May 18, 2019

SyntaxError: Identifier 'hue' has already been declared #1525

SyntaxError: Identifier 'hue' has already been declared #1525

Comments

nesbocaj commented May 12, 2019 • edited

nesbocaj commented May 12, 2019

manucorporat commented May 18, 2019

nesbocaj commented May 12, 2019 •

edited