Workshop Debugging - Unable to view the timeline for the Timeline Generator React Workshop

Question / Problem

I need help debugging my setup from the Build a Timeline Generator with JavaScript React Workshop.

I am struggling to make the timeline appear on my end.

Current Situation

I am unable to display the timeline on my App’s Custom view:

What I have done so far:

  • Set both 60 and 100 per page to view the timeline. It still does not appear.

Code / Attempts

My Index.js code

import React from "react";
import { createRoot } from "react-dom/client";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import * as am4plugins_timeline from "@amcharts/amcharts4/plugins/timeline";
import * as am4plugins_bullets from "@amcharts/amcharts4/plugins/bullets";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

(function () {
  'use strict';
  // Set Custom View's ID in .env
  const customViewID = Number(process.env.VIEW_ID);
  // Increment to confirm script version on Kintone
  const scriptVer = '0';
  console.log(`\nScript version: ${scriptVer}\n\n`);'', function (event) {
    if (event.viewId !== customViewID) {
      console.log('View ID from APP: ' + event.viewId)
      console.log('VIEW_ID from env: ' + customViewID)
      console.log('Not on the Custom View');
      return event

    function App() {

      // Color HEX code for the political parties
      const partyColor = {
        'Democratic': '#2502fe',
        'Democratic-Republican': '#0e7003',
        'Federalist': '#e28665',
        'Republican': '#e0001b',
        'Unaffiliated': '#d5d5d5',
        'Whig': '#ebbd50'

      // Peak inside Kintone's data

      // Retrieve & configure the space element below the record list's header
      const spaceDiv =; = '650px'; = '25px'; = '25px'; = 'solid'; = '#ED7B84';

      // Automatically enable all amCharts animations

      // Create chart instance
      const chart = am4core.create(spaceDiv, am4plugins_timeline.SerpentineChart);
      // Space between the chart & border
      chart.paddingTop = 100;
      // Number of straight lines of serpentine shape
      chart.levelCount = 5;
      // Allow bullets to 'bleed' over the edge
      chart.maskBullets = false;
      // Input & Output Date format
      chart.dateFormatter.inputDateFormat = 'yyyy-MM-dd';
      chart.dateFormatter.dateFormat = 'yyyy-MM-dd';
      // Font size
      chart.fontSize = 12;
      chart.tooltipContainer.fontSize = 12;

      // TODO: Input Kintone data into the chart =, index) => {
        return {
          // TODO: Text above the PinBullet; President's name
          'text': rec.first.value,
          // TODO: PinBullet's & time period's color; Party color
          'color': partyColor[],
          // TODO: Time period's start; Term's start
          'start': rec.start.value,
          // TODO: Time period's end; Term's end
          'end': rec.end.value,
          // TODO: Icon inside the PinBullet; President's icon
          'icon': rec.image.value,
          'category': '' // Timeline category; leave as empty string

      // Create 1 timeline with all the US Presidents
      const categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
      categoryAxis.dataFields.category = 'category';

      // Axis using date & time scale
      const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
      // Gray, dashed lines for date axis
      dateAxis.renderer.line.strokeDasharray = '1,4';
      dateAxis.renderer.line.strokeOpacity = 1;
      // Place the label in the middle of the axis
      dateAxis.renderer.labels.template.verticalCenter = 'middle';

      // Series containing the US Presidents and their terms
      const series = chart.series.push(new am4plugins_timeline.CurveColumnSeries());
      series.dataFields.openDateX = 'start';
      series.dataFields.dateX = 'end';
      series.dataFields.categoryY = 'category';
      series.baseAxis = categoryAxis;
      // Coloring of the Presidential terms
      series.columns.template.height = am4core.percent(15);
      series.columns.template.propertyFields.fill = 'color';
      series.columns.template.propertyFields.stroke = 'color';
      series.columns.template.strokeOpacity = 0;
      series.columns.template.fillOpacity = 0.6;

      // Create the PinBullet (Circles)
      const pinBullet = series.bullets.push(new am4plugins_bullets.PinBullet());
      pinBullet.locationX = 1; //Place the PinBullet at their term's start
      pinBullet.propertyFields.stroke = 'color';
      pinBullet.background.propertyFields.fill = 'color';
      pinBullet.image = new am4core.Image();
      pinBullet.image.propertyFields.href = 'icon';

      // President's name over the icon
      const labelBullet = series.bullets.push(new am4charts.LabelBullet());
      labelBullet.label.propertyFields.text = 'text';
      labelBullet.label.textAlign = 'middle';
      labelBullet.locationX = 1; // Place the labelBullet at their term's start
      labelBullet.dy = -80; // Raising text above the icon

      // Scrollbar used to focus the timeline
      chart.scrollbarX = new am4core.Scrollbar();
      chart.scrollbarX.align = 'center'
      chart.scrollbarX.width = am4core.percent(75);
      chart.scrollbarX.parent = chart.bottomAxesContainer;

      // Year appearing when hovering over the chart axis
      const cursor = new am4plugins_timeline.CurveCursor();
      chart.cursor = cursor;
      dateAxis.tooltipDateFormat = 'yyyy-MMM';
      cursor.xAxis = dateAxis;
      cursor.lineY.disabled = true; // Disable Y line highlight

      // Optional - Enable export = new am4core.ExportMenu();
      // Remove unneeded Scrollbar & tooltip
      chart.scrollbarX.exportable = false;
      dateAxis.tooltip.exportable = false;

    const rootElement = document.getElementById("root");
    const root = createRoot(rootElement);
        <App />
    return event;

Error Message

Screenshots are helpful

Desired Outcome / Expected Behavior


Referenced Resources

What I have done so far:

  • Set both 60 and 100 per pages to view the timeline. It still does not appear.

Hey @Suany ,

Thanks for attending our workshop!

To get started with debugging in your code base, please do the following:

  1. Post your Index.js code
  2. Confirmed your Kintone App setup as specified in the repo’s README file
  3. Confirmed Node & NPM versions inside the project folder
  4. Reviewed the “ debugging section in the README file

Checked the versions of Node & NPM and they’re: Node - v18.15 NPM - 9.5.0

I’m not sure if NPM is inside the project folder, but I’m assuming it is because when I typed “npm -v” and it came up. For Node, I can see “node_modules” inside the project folder.

Followed the instructions for the Kintone app setup.

I did have issues compiling and uploading the code to Kintone. The error message - npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\[My name]\package.json

This is related to npm not being able to find a file

I checked my project folder and this file is in there. Should I reinstall npm?

It’s getting late over here. I’ll check the forum when I get up!

Thank you for posting additional information, @Suany !


I went ahead and moved the code snippet to the main post. I also added more contextual information to the main post.


Your code looks good to me & it works on my machine.

I suggest editing the following line to include the president’s last name.



'text': `${rec.first.value}\n${rec.last.value}`,

NPM & Node.js

> I did have issues compiling and uploading the code to Kintone. The error message - npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users[My name]\package.json

> This is related to npm not being able to find a file

This error suggests that you need to configure your NPM correctly or install the NPM packages successfully.

First, let’s double-check your NPM & Node.js setup.

  1. Go inside your codebase folder (timeline-generator-amcharts) via the terminal

  2. Enter the following commands:

  • npm -v

  • node -v

You should get something like this:

❯ cd timeline-generator-amcharts

❯ npm -v


❯ node -v


If not, refer to our Guide on Installing Node.js & npm.

Then, please do the following in order:

  1. If you have a package-lock.json file, delete it. (If not, no worries)

  2. Inside the codebase folder, run npm install to install the NPM packages.

  1. Run npm install -g @kintone/customize-uploader to install the kintone-customize-uploader package globally.

  2. Verify that the customize-manifest.json file is updated with your App ID.

  1. Run the npm run build && npm run upload command to build and upload the script to Kintone.

After going through the steps mentioned above, let me know if you still need help.

Both NPM and Node packages are successfully installed inside the timeline-generator-amcharts folder.

I ran the npm run build && npm run upload command, and I received the following error:

[webpack-cli] TypeError: Cannot convert undefined or null to object
   at Function.keys (<anonymous>)
   at module.exports (USER\timeline-generator-amcharts\webpack.config. js:9:26)

Full error message:
Screenshot of the full terminal error

I tried to run it with the original code. Same problem.

Hey @Suany , thanks for posting your error message.

Solution - Create & properly configure your .env file

I was able to recreate the error easily by just deleting the .env file.

Verify that your .env file has been correctly configured and that you have not modified the .env.example.

If you are confused, this was Step 4 - Create a .env File.

Using the .env.example file as a template, create a .env file. This file will contain your login credentials and the Kintone App’s View ID.
Here is what your .env might look like:
KINTONE_BASE_URL=“” KINTONE_USERNAME=“your_username” KINTONE_PASSWORD=“your_password” VIEW_ID=“1234”

:warning: DO NOT DELETE THE .env.example FILE!

.env.example is used by env-cmd to verify that the .env file is correctly configured.

Friendly reminders:

  • When posting about bugs, post your error message as both text & image. (This is for easier Googling & better SEO).
  • Review the documentation before posting about bugs. (In our case, the PDF slides or the repo’s README file).

Hope this solves your problems :muscle:

I’ve successfully installed it inside the timeline-generator-amcharts folder! Deleting and then recreating the .env file fixed it.

Still unable to display the timeline on my Kintone App’s custom view (even after I refreshed the page).

By “installed it”, do you mean you have successfully built the codebase with the npm run build command?

There are three likely causes for your problem:

  1. npm run upload command is not working

  2. Your login credentials in .env and customize-manifest.json are incorrect

  3. Your Kintone App is not properly configured

Things to try:

  1. Run the npm run build command and confirm that you do not get any errors.

  2. Run the npm run upload command and confirm that you do not get any errors.

  3. Verify that the Kintone App is configured correctly:

Friendly reminder:
Writing out explicitly what you have done and what error message you got makes debugging easier and faster.

Documentation is a vital skill for engineers :muscle:.

Hello @Suany ,

We published an edited down version of the workshop on YouTube with polished subtitles. I hope it would be helpful for you ~