quick start is not working

[xu4wang]

Describe the bug

The molecule-demo demo is not working, with console errors.

Versions

• OS: MacOX 12.3.1
• Browser: Version 103.0.5060.53 (Official Build) (arm64)
• Molecule: "@dtinsight/molecule": "^1.0.2",

To reproduce

1. Go to 'https://dtstack.github.io/molecule/docs/quick-start'
2. npx create-react-app molecule-demo --template typescript
3. cd molecule-demo
4. yarn add @dtinsight/molecule
5. Create js file to src/App.js
6. yarn start

Expected

See the IDE UI in localhost browser.

Actually happening

browser is empty, saw errors in console.

[wewoor]

@xu4wang The Molecule does not support React18 in 1.0.2, we are developing in this PR #774

[mortalYoung]

You can temporarily down react's verson to 17.x

[xu4wang]

You can temporarily down react's verson to 17.x

OK. noted..

I will use the demo for now.
may try the quick start process later.

[xu4wang]

I tried to downgrade react to V17 by below steps:

• edit the package.json
• remove the package-lock.json
• rm -Rf the node_module directory
• yarn install again

{
  "name": "molecule-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@dtinsight/molecule": "^1.0.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.43",
    "@types/react": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "6",
    "react-scripts": "4.0.3",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

yarn install, and yarn start successfully, However, there are errors in console.

[xu4wang]

Found error in 'yarn start' console

Failed to compile.

./src/App.js
Attempted import error: 'create' is not exported from '@dtinsight/molecule'.

The App.js is as below:

import React from 'react';
import { create, Workbench } from '@dtinsight/molecule';
import '@dtinsight/molecule/esm/style/mo.css';

const moInstance = create({
    extensions: [],
});

const App = () => moInstance.render(<Workbench />);

export default App;

[mortalYoung]

When you downgrade react to v17, you should edit the usage of react-dom meanwhile.
The reactV17 should used like:

ReactDOM.render(
        <App />,
    document.getElementById('root')
);

You can directly render the App component to the root, rather than call createRoot to get the root node which is a reactV18.x's function.

[xu4wang]

Finally, it's working with below 0.9.0-beta.2 config.

App.js

import React from 'react';
import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
import '@dtinsight/molecule/esm/style/mo.css';

function App() {
    return (
        <MoleculeProvider extensions={[]}>
            <Workbench />
        </MoleculeProvider>
    );
}

export default App;

Also need to copy the index.tsx from the working demo.

The quick start is not easy to setup as for now.

[mortalYoung]

Sorry, that's our problem. We'll handle it as soon as possible

[xu4wang]

Sorry, that's our problem. We'll handle it as soon as possible

Yes. I saw it's in the improvement list of the coming version. Looking forward to the new version.