Lightrun
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.

SyntaxError: Unexpected token export while importing

See original GitHub issue

Hi I am trying to use the lightweight chart on my Nextjs - React application but it keeps returning this error! Do you have any idea what is wrong with my component?

I thought maybe it’s because of server-side rendering but I get the error as soon as I import it in my component!

Edit lightweightcharts 
import React, { useRef } from 'react';
import { createChart } from 'lightweight-charts';

const Index = () => {
  const chartRef = useRef(null);
  const chart = createChart(chartRef.current, { width: 400, height: 300 });
  const lineSeries = chart.addLineSeries();
  lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
  ]);

  return (
    <>
      <div ref={chartRef}></div>
    </>
  );
};

export default Index;

Error:



export { CrosshairMode, LineStyle, LineType, PriceScaleMode, createChart, isBusinessDay, isUTCTimestamp, version };
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:720:22)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/front-next/node_modules/lightweight-charts/index.js:6:19)
    at Module._compile (internal/modules/cjs/loader.js:777:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.lightweight-charts (/front-next/_next/server/static/development/pages/index.js:197:18)
    at __webpack_require__ (/front-next/_next/server/static/development/pages/index.js:23:31)
    at Module../pages/home/index.js (/front-next/_next/server/static/development/pages/index.js:109:76)
/front-next/node_modules/lightweight-charts/dist/lightweight-charts.esm.development.js:10998
export { CrosshairMode, LineStyle, LineType, PriceScaleMode, createChart, isBusinessDay, isUTCTimestamp, version };
^^^^^^

More info about error :

/front-next/node_modules/lightweight-charts/dist/typings.d.ts
Error:(92, 3) TS2585: 'Symbol' only refers to a type, but is being used as a value here. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
Error:(516, 16) TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

Issue Analytics

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

github_iconTop GitHub Comments

8reactions
afsanefdaacommented, Oct 2, 2019

Hi I am trying to use the lightweight chart on my Nextjs - React application but it keeps returning this error! Do you have any idea what is wrong with my component?

I thought maybe it’s because of server-side rendering but I get the error as soon as I import it in my component!

Edit lightweightcharts 

import React, { useRef } from 'react';
import { createChart } from 'lightweight-charts';

const Index = () => {
  const chartRef = useRef(null);
  const chart = createChart(chartRef.current, { width: 400, height: 300 });
  const lineSeries = chart.addLineSeries();
  lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
  ]);

  return (
    <>
      <div ref={chartRef}></div>
    </>
  );
};

export default Index;

Error:



export { CrosshairMode, LineStyle, LineType, PriceScaleMode, createChart, isBusinessDay, isUTCTimestamp, version };
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:720:22)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/front-next/node_modules/lightweight-charts/index.js:6:19)
    at Module._compile (internal/modules/cjs/loader.js:777:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.lightweight-charts (/front-next/_next/server/static/development/pages/index.js:197:18)
    at __webpack_require__ (/front-next/_next/server/static/development/pages/index.js:23:31)
    at Module../pages/home/index.js (/front-next/_next/server/static/development/pages/index.js:109:76)
/front-next/node_modules/lightweight-charts/dist/lightweight-charts.esm.development.js:10998
export { CrosshairMode, LineStyle, LineType, PriceScaleMode, createChart, isBusinessDay, isUTCTimestamp, version };
^^^^^^

More info about error :

/front-next/node_modules/lightweight-charts/dist/typings.d.ts
Error:(92, 3) TS2585: 'Symbol' only refers to a type, but is being used as a value here. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
Error:(516, 16) TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

When I import it in didMount it seems correct but why is that?

import React, { useRef, useEffect } from 'react';

const Index = () => {
  const chartRef = useRef(null);
  let lightweightCharts;

  useEffect(() => {
    // eslint-disable-next-line global-require
    lightweightCharts = require('lightweight-charts');
    const { createChart } = lightweightCharts;
    const chart = createChart(chartRef.current, { width: 400, height: 300 });
    const lineSeries = chart.addLineSeries();
    lineSeries.setData([
      { time: '2019-04-11', value: 80.01 },
      { time: '2019-04-12', value: 96.63 },
      { time: '2019-04-13', value: 76.64 },
      { time: '2019-04-14', value: 81.89 },
      { time: '2019-04-15', value: 74.43 },
      { time: '2019-04-16', value: 80.01 },
      { time: '2019-04-17', value: 96.63 },
      { time: '2019-04-18', value: 76.64 },
      { time: '2019-04-19', value: 81.89 },
      { time: '2019-04-20', value: 74.43 },
    ]);
  }, []);

  return (
    <>
      <div ref={chartRef}></div>
    </>
  );
};

export default Index;
0reactions
afsanefdaacommented, Oct 16, 2019

@afsanefda so your problem is fixed or still persist?

The problem is solved - I had to import the charts on component did mount- the code above is updated

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting Unexpected Token Export - javascript - Stack Overflow
This error is suggesting that either webpack or babel are not working correctly, as export is only available in ES6, and those modules...
Read more >
SyntaxError: Unexpected token 'export' in JavaScript
To solve the "Uncaught SyntaxError Unexpected token 'export'" error, set the type property to module in your package.json file.
Read more >
How to fix SyntaxError: Unexpected token 'export' in JavaScript?
In this article, we are going to see How to fix SyntaxError: Unexpected token 'export' in JavaScript? and what are Es6 modules.
Read more >
How to Solve Unexpected Token 'export' Error in JavaScript
To solve the "Uncaught SyntaxError Unexpected token 'export'" error, set the type property to module in your package.json file.
Read more >
SyntaxError: Unexpected token 'export' - Abhishek Kumar
In case you are getting error like 'Unexpected token export' while starting the server, then export like below in schema.js
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
Previous page

Chart data cannot be displayed on ios

Next page

How to set the time zone of the X axis