diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml index 63fe583d2..82b33bb71 100644 --- a/.github/workflows/test-deploy.yml +++ b/.github/workflows/test-deploy.yml @@ -13,7 +13,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 14.x + node-version: 16.x cache: yarn cache-dependency-path: website/yarn.lock - name: Install dependencies diff --git a/MIGRATION.md b/MIGRATION.md new file mode 100644 index 000000000..469e7fe94 --- /dev/null +++ b/MIGRATION.md @@ -0,0 +1,10 @@ +

Migration

+ +- [From version 1.0.x to 1.1.0](#from-version-10x-to-110) + - [React18 upgrade](#react18-upgrade) + +## From version 1.0.x to 1.1.0 + +### React18 upgrade + +React 18 introduced a [new root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis). Starting from 1.1.0, Molecule itself will auto-detect your version of react and use the new root API automatically if you're on React18. But It's attentioned that there are several dependencies of Molecule still incompatible of React18's strict mode. So Molecule now still not compatible with `React.StrictMode` in React@18.x. For exmaple: [react-scrollbars-custom](https://github.com/xobotyi/react-scrollbars-custom/issues/234). diff --git a/website/docs/quick-start.md b/website/docs/quick-start.md index 5094f98a7..837202449 100644 --- a/website/docs/quick-start.md +++ b/website/docs/quick-start.md @@ -61,6 +61,20 @@ export default App; `extensions` are extensions that need to be customized. +And open the `src/index.js` file and change it to the following: + +```diff title="src/index.js" +root.render( +- + +- +); +``` + +:::caution +It's **noticed** that the Molecule for now is not compatible with `React.StrictMode`. So we should remove `React.StrictMode` from `src/index.js`. +::: + ## Startup Project Finally, run the `start` command in the terminal: diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md index 312233eef..3eb2acfac 100644 --- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md +++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md @@ -61,6 +61,20 @@ export default App; `extensions` 是需要自定义的扩展程序。 +然后,打开 `src/index.js` 文件,并修改如下的部分: + +```diff title="src/index.js" +root.render( +- + +- +); +``` + +:::caution +需要注意的是目前 Molecule 还无法与 `React.StrictMode` 兼容,所以我们需要在 `src/index.js` 中移除 `React.StrictMode`。 +::: + ## 启动项目 最后,在终端中运行`start` 命令: