1. Home
  2. Forum
  3. React - EJ 2
  4. Remix ES6 support

Remix ES6 support

Hi there,

Does Syncfusion support ES6 modules?

I cannot use the components at all using ESM, they all fail to import correctly using Remix native. Seems as though Syncfusion don't work with ES6 which is crazy in this day and age??

This is just a basic app with the Packages.json set to module

"type": "module",


and a simple button?

import type { MetaFunction } from "@remix-run/node";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";

export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
};

export default function Index() {
return (
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
<ButtonComponent></ButtonComponent>
</div>
);
}


Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at renderElement (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6109:9)
    at renderNodeDestructiveImpl (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderNode (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12)
    at renderChildrenArray (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6277:7)
    at renderNodeDestructiveImpl (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6207:7)
    at renderNodeDestructive (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderNode (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12)
    at renderHostElement (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3)
    at renderElement (/Users/imac27/Repos/Vite Remix/my-remix-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:6018:5)

 


5 Replies
JA Jason December 13, 2023 10:46 PM UTC

If I try to import from ...


import { ButtonComponent } from "@syncfusion/ej2-react-buttons/dist/es6/ej2-react-buttons.es2015";


I get


Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1274:20)
    at Module._compile (node:internal/modules/cjs/loader:1320:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Module._load (node:internal/modules/cjs/loader:1013:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:202:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)
    at async nodeImport (file:///Users/imac27/Repos/Vite%20Remix/my-remix-app/node_modules/vite/dist/n

JA Jason December 13, 2023 11:05 PM UTC

I even tried going through this tutorial...

https://ej2.syncfusion.com/react/documentation/getting-started/react-remix-app


but with the button and still errors


VM Vishnu Moorthi Syncfusion Team December 15, 2023 03:24 PM UTC

Hi Jason,


We would like to inform you that Syncfusion components now support ES6 modules. When the package scope is set to "type": "module" in the package.json file, it interprets all files with a *.js extension as ECMAScript Modules (ESM).

The error encountered with "@syncfusion/ej2-react-buttons" occurs because the Remix bundler is transpiling a dependency, interpreting the dependencies into CommonJS (CJS) files. To resolve this issue and use the ESM packages, kindly add the following configuration to the remix.config.js file:

# remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */

export default {

 ignoredRouteFiles: ["**/.*"],

 serverDependenciesToBundle: [/@syncfusion/]

};

 

For your reference, we have created and attached a sample with the Button component.


Regards,

Vishnu M


Attachment: demo_ec8021d4.zip

JA Jason December 20, 2023 11:15 AM UTC

If we do this, will this still allow tree shaking with Syncfusion components?


BE Balaji Elumalai Syncfusion Team December 27, 2023 10:41 AM UTC

Hi Jason,

 

Thanks for your patience.

We have evaluated your reported query and would like to convey that these changes do not affect the tree-shaking of Syncfusion React components in the Remix app. The tree-shaked code for the Syncfusion Button component can be found in the attached bundle screenshot. 

For your reference, we have attached the analyzer screenshots, documentation, and a sample.
 

Screenshots:

 



Documentation: https://remix.run/docs/en/main/guides/performance#bundle-analysis


Regards,

Balaji E


Attachment: demo_ec8021d2_6e00d7be.zip

Loader.
Up arrow icon