Problem with new React project

[rerskine]

Are there any docs on just getting a React project setup? I used Vite to scaffold a React app, and then followed the instructions found here: https://smartclient.com/smartclient-...d=group..npmjs. But doing anything like:

import { SC, ButtonItem, DynamicForm, TextItem } from 'smartclient-eval/react';

just gives me an error:

Cannot find module 'smartclient-eval/react' or its corresponding type declarations.

Reproduction steps:

npm create vite@latest
cd app-name
npm install
npm run dev

everything works as expected at this point. Then:

npm install smartclient-lgpl

and add the following to App.tsx:

import 'smartclient-lgpl/debug';

results in the following errors:

✘ [ERROR] With statements cannot be used in an ECMAScript module

    isomorphic/system/modules-debug/ISC_Core.js:6464:24:
      6464 │ with (evalArgs) {
           ╵ ~~~~

  This file is considered to be an ECMAScript module because the enclosing "package.json" file sets
  the type of this file to "module":

    package.json:5:10:
      5 │ "type": "module",
        ╵ ~~~~~~~~

✘ [ERROR] With statements cannot be used in an ECMAScript module

    isomorphic/system/modules-debug/ISC_Core.js:6486:20:
      6486 │ with (evalArgs) {
           ╵ ~~~~

  This file is considered to be an ECMAScript module because the enclosing "package.json" file sets
  the type of this file to "module":

    package.json:5:10:
      5 │ "type": "module",

[Isomorphic]

The npm documentation you linked is valid, and we are also revising the React documentation currently shown in SmartClient 13.1d.

The main issue here appears to be that Vite creates a project that requires all imports to be strict-mode compliant. Our Framework is imported without transpiling, and is not strict-mode compliant, as that would make it impossible to offer a variety of features, including enhanced stack traces and other debugging information, observation of arbitrary methods, aspects of the class system that are superior to ES6 classes (Super(), mixins), workarounds for various browser bugs, etc (it's a long list).

Perhaps you can configure Vite to allow importing dependencies that aren't strict ES6 modules?

The specific error, "Cannot find module 'smartclient-eval/react' or its corresponding type declarations" is because you need to install SmartClient 13.1 to get React support - the default is the current release, 13.0.

You can build a React demo with our Framework via the following:

npx create-react-app my-app
cd my-app
npm install --branch=13.1 smartclient-lgpl

then modify src/App.js to be

import 'smartclient-lgpl/release';
import 'smartclient-lgpl/skins/Tahoe';

import { Button } from 'smartclient-lgpl/react';

function App() {
    return (
     <Button title="Hello, world" width="150" click="isc.say('Hello!')"/>
  );
}

export default App;

The above React JSX, and supporting imports, can be modified as needed to build whatever widget hierarchy you need. The SmartClient 13.1 Showcase shows lots of examples.

To run the project in development mode, use

npm start

[rerskine]

Thanks! That seems to work but I'm still hitting the same error when I try to get Typescript working properly.

npx create-react-app my-app --template typescript
cd my-app
npm install --branch=13.1 smartclient-lgpl

And then I still end up with:

ERROR in src/App.tsx:8:24
TS7016: Could not find a declaration file for module 'smartclient-lgpl/react'. '/Users/rerskine/Code/fluid-sc/node_modules/smartclient-lgpl/react/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/smartclient-lgpl` if it exists or add a new declaration (.d.ts) file containing `declare module 'smartclient-lgpl/react';`
     6 | import 'smartclient-lgpl/skins/Tahoe';
     7 |
  >  8 | import { Button } from 'smartclient-lgpl/react';
       |                        ^^^^^^^^^^^^^^^^^^^^^^^^
     9 |
    10 | function App() {
    11 |     return (

Any advice on getting Typescript working with a React project? Not having Typescript is really a dealbreaker for me.

[Isomorphic]

You see this error because the Button React wrapper class doesn't yet provide any typescript information. We can update the npm module(s) so that this no longer prevents running dependent projects. Then you'll be able to add typescript to your project so you can benefit from it in, say, VS Code. Typescript for the underlying SC Framework should work immediately, so you can write something like:

let myGrid: isc.ListGrid;
// ...
let nRows = myGrid.getTotalRows();

in your .tsk file and get interactive assistance when typing the function name for myGrid. However, the typescript content for the Button, Canvas, ListGrid, etc., React wrapper classes imported is something that we'll need to add to our generator, so it won't be in that initial npm update.

We'll update thsi thread when the npm package has been updated to avoid the error you reported.

[Isomorphic]

We've updated the smartclient npm packages, including smartclient-lgpl, and bumped the versions to 0.9.19. If you install the latest version, you should be able to import smartclient-lgpl/react into your typescript-enabled project and run without error.

This update doesn't include typescript documentation for the React wrapper classes - which is still pending - just the fix for the error.

[Isomorphic]

Our React support has now been enhanced to provide typescript files with the React wrapper classes.

When importing one of our wrapper classes, or adding the associated component to JSX in VS Code, completion should now work, and a hover should provide a link to the underlying SmartClient typescript-based documentation. Hover links and completion should also work for attributes declared within the component.

Typescript support when declaring component properties as JSX elements underneath a component is for now left as a potential future enhancement, since our Component XML JSX format requires component-specific tags (challenging typescript), rather than just HTML.