Quickstart react app does not match the bit app docs

[sbland]

Describe the bug

When following the quickstart docs here: https://bit.dev/docs/quick-start/hello-world The resulting app file structure looks like the below:

hello-world-app.app-root.tsx
hello-world-app.compositions.tsx
hello-world-app.docs.mdx
hello-world-app.react-18-app.cjs
index.ts

This does not match the expected bit app files described here https://bit.dev/reference/apps/create-apps.

Steps to Reproduce

1. bit new hello-world my-hello-world --env teambit.community/starters/hello-world
2. cd my-hello-world/scope-name/hello-world-app

Expected Behavior

It would be helpful if the two matched. I can't find any docs that descibe the hello-world-app.react-18-app.cjs that is actually used.

Specifications

• Bit version: 1.5.29
• Workspace type: harmony
• Node version: v16.20.0
• npm / yarn version: v8.19.4
• Platform: ubuntu

for harmony workspace

• relevant env - eambit.community/starters/hello-world

[GiladShoham]

@giteden @itaymendel @ranm8

[sbland]

I also tried replacing hello-world-app.react-18-app.cjs with hello-world.bit-app.ts with the following code:

import { ViteReact } from '@bitdev/react.app-types.vite-react';

export const MyApp = ViteReact.from({
  /**
   * name of your app.
   */
  name: 'my-app',

  /**
   * determine whether to use ssr mode or not.
   */
  ssr: false,
});

export default MyApp;

Then running bit status shows the following error....

Bit received an error loading org.scope-name/hello-world-app, due to the error:
"Cannot use import statement outside a module".

My aim is to build the bit app into a static site similar to yarn build in a CRA setup. This seems possible from the description in the docs but there are some big gaps in the docs still.

[itaymendel]

hi @sbland , we are already working on a massive update to quickstarts, to also include two new solutions you can utilize for your apps. it should be available in the next two days.

as for your issue, the root cause is that the component you are adding this bit-app.ts file is not using the ESM React env (bitdev.react/react-env), or any other custom env that is based on it. you can quickly do bit env set to correct things. alternatively, you can change the file extension to *.mts from *.ts

[ranm8]

Thanks for reporting! This is resolved with the new quick starts.