[REACT] SyntaxError: Unexpected token 'export'

[owlstack]

Hi team,

We've integrated Bryntum Scheduler into our react app and we run into these errors when we try and run our tests.

The error is:

/frontend/node_modules/@bryntum/scheduler-react/lib/index.js:1
export * from './BryntumFullscreenButton';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/frontend/src/associates/ganttChart/GanttChart.tsx:2:1)

We are using React and TypeScript as well as mocha, chai and enzyme for our tests.

test command:

"test": "npm run testBuild; mocha -r tsconfig-paths/register ./build/transpiled/**/*.spec.js --reporter dot --exit;",

Where testBuild is:

 "testBuild": "rm -rf ./build/transpiled/*; set -e; tsc --project tsconfig-for-tests.json"

I think it could be related to commonjs vs esmodules but I'm not sure how to resolve it in the best way.

In our tsconfig.json, we have our

"module": "commonjs"

How we're importing Bryntum Scheduler:

import React, { Fragment, FunctionComponent } from 'react';
import { BryntumScheduler } from '@bryntum/scheduler-react';
import { schedulerConfig } from './GanttChartConfig';

const GanttChart: FunctionComponent = () => {
    return (
        <Fragment>
            <BryntumScheduler {...schedulerConfig} />
        </Fragment>
    );
};

export default GanttChart;

Please let me know if you need more information or would like to connect on a Zoom call for debugging purposes. We really need to resolve this issue to release our feature with this library.

Thanks!

[marcio]

Hello owlstack,

This is a little too general to get what could be causing this error, and it looks more like a configuration issue, would you mind sharing your project for us to check the code??

Unfortunately, private calls are not possible within the bounds of forum support services, but you can contact our sales for Professional Services and our developers help you. https://www.bryntum.com/services

Besides that, if you prefer, you could send your app by email: support @ bryntum.com and we will check that.
Usually, in cases like yours, users use our example app as a base, add your configuration with the reproducible behavior and attach it here.

[owlstack]

Hello owlstack,

This is a little too general to get what could be causing this error, and it looks more like a configuration issue, would you mind sharing your project for us to check the code??

Unfortunately, private calls are not possible within the bounds of forum support services, but you can contact our sales for Professional Services and our developers help you. https://www.bryntum.com/services

Besides that, if you prefer, you could send your app by email: support @ bryntum.com and we will check that.
Usually, in cases like yours, users use our example app as a base, add your configuration with the reproducible behavior and attach it here.

Hi Marcio,

We can't send our project repo since it's confidential and huge but we can try to look into reproducing the issue in a sample repo and send that over.

For professional services, since we did purchase the licenses for Scheduler and we can't even get it working, can we get professional service support for free?

One thing I also noticed is this user reported a similar issue initially here: viewtopic.php?p=84511#p84511. We aren't using Next.js though but maybe it's a way we're importing the library or something else?

Thanks!

[alex.l]

Hi owlstack,

I understand your concerns about the first launch of the application with our components. For now, we can't say what exactly wrong, export instruction is not something that we developed, so that looks like a configuration problem.

We need your full configurations. There are too many test frameworks for React and all of them make own test environment and has own configuration files, that's too hard to predict what exactly is wrong without a runnable test case that we could debug.

[owlstack]

Hi owlstack,

I understand your concerns about the first launch of the application with our components. For now, we can't say what exactly wrong, export instruction is not something that we developed, so that looks like a configuration problem.

We need your full configurations. There are too many test frameworks for React and all of them make own test environment and has own configuration files, that's too hard to predict what exactly is wrong without a runnable test case that we could debug.

Hi, we're able to reproduce the issue in a sample project here. Can you take a look?

https://github.com/eduardofavarato/bryntum-scheduler-mocha-ts-sample

Please let me know if it would be better to send as zip as well.

Thanks!

[sergey.maltsev]

Hi!

This error happens because wrong tsc configuration for building sources for tests.
I suppose package.json should be of module type (type: "module") to be able to use import and export statements which are used by Bryntum Gantt modules library and React wrappers.

But even of you configure ts to compile sources correctly and copy all assets like scss files to destination I'm afraid you won't be able to create React Gantt wrapper inside virtual jsdom environment. It requires actual DOM to work. So it should be something like headless browser like puppetter or real browser.

Unfortunately currently have no experience with mocha testing to help you with.

At Bryntum we use Siesta to test our products.
https://www.bryntum.com/products/siesta/