diff --git a/packages/rax-compat/.gitignore b/packages/rax-compat/.gitignore
new file mode 100644
index 000000000..eb97fce6b
--- /dev/null
+++ b/packages/rax-compat/.gitignore
@@ -0,0 +1,3 @@
+es2017/
+dist/
+esm/
diff --git a/packages/rax-compat/es2017/children.d.ts b/packages/rax-compat/es2017/children.d.ts
deleted file mode 100644
index eb428ad20..000000000
--- a/packages/rax-compat/es2017/children.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { Children } from 'react';
-export default Children;
diff --git a/packages/rax-compat/es2017/children.js b/packages/rax-compat/es2017/children.js
deleted file mode 100644
index 90d5febb3..000000000
--- a/packages/rax-compat/es2017/children.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Children } from 'react';
-// See https://github.com/alibaba/rax/blob/master/packages/rax-children/src/index.js
-// Imported by 'rax-compat/children'
-export default Children;
diff --git a/packages/rax-compat/es2017/clone-element.js b/packages/rax-compat/es2017/clone-element.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-compat/es2017/component.d.ts b/packages/rax-compat/es2017/component.d.ts
deleted file mode 100644
index 67d0ad107..000000000
--- a/packages/rax-compat/es2017/component.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { Component, PureComponent, memo } from 'react';
-export { Component, PureComponent, memo, };
diff --git a/packages/rax-compat/es2017/component.js b/packages/rax-compat/es2017/component.js
deleted file mode 100644
index 9d3a3eee8..000000000
--- a/packages/rax-compat/es2017/component.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { Component, PureComponent, memo } from 'react';
-export { Component, PureComponent, memo };
diff --git a/packages/rax-compat/es2017/context.d.ts b/packages/rax-compat/es2017/context.d.ts
deleted file mode 100644
index e9d52b67c..000000000
--- a/packages/rax-compat/es2017/context.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { createContext } from 'react';
-export { createContext, };
diff --git a/packages/rax-compat/es2017/context.js b/packages/rax-compat/es2017/context.js
deleted file mode 100644
index 7af361227..000000000
--- a/packages/rax-compat/es2017/context.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { createContext } from 'react';
-export { createContext };
diff --git a/packages/rax-compat/es2017/create-class.js b/packages/rax-compat/es2017/create-class.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-compat/es2017/create-element.d.ts b/packages/rax-compat/es2017/create-element.d.ts
deleted file mode 100644
index 574adff1f..000000000
--- a/packages/rax-compat/es2017/create-element.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { cloneElement, isValidElement, createFactory } from 'react';
-/**
- * Compat createElement for rax export.
- * Reference: https://github.com/alibaba/rax/blob/master/packages/rax/src/createElement.js#L13
- * @param type
- * @param props
- * @param children
- * @param others
- * @returns Element
- */
-export declare function createElement(type: any, props: Object, children: any, ...others: any): any;
-export { cloneElement, isValidElement, createFactory, };
diff --git a/packages/rax-compat/es2017/create-element.js b/packages/rax-compat/es2017/create-element.js
deleted file mode 100644
index 76bf496e7..000000000
--- a/packages/rax-compat/es2017/create-element.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { cloneElement, isValidElement, createFactory } from 'react';
-/**
- * Compat createElement for rax export.
- * Reference: https://github.com/alibaba/rax/blob/master/packages/rax/src/createElement.js#L13
- * @param type
- * @param props
- * @param children
- * @param others
- * @returns Element
- */ export function createElement(type, props, children, ...others) {
-    return React.createElement(type, props, children, ...others);
-}
-export { cloneElement, isValidElement, createFactory };
diff --git a/packages/rax-compat/es2017/create-factory.js b/packages/rax-compat/es2017/create-factory.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-compat/es2017/create-portal.js b/packages/rax-compat/es2017/create-portal.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-compat/es2017/createElement.d.ts b/packages/rax-compat/es2017/createElement.d.ts
deleted file mode 100644
index 574adff1f..000000000
--- a/packages/rax-compat/es2017/createElement.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { cloneElement, isValidElement, createFactory } from 'react';
-/**
- * Compat createElement for rax export.
- * Reference: https://github.com/alibaba/rax/blob/master/packages/rax/src/createElement.js#L13
- * @param type
- * @param props
- * @param children
- * @param others
- * @returns Element
- */
-export declare function createElement(type: any, props: Object, children: any, ...others: any): any;
-export { cloneElement, isValidElement, createFactory, };
diff --git a/packages/rax-compat/es2017/find-dom-node.js b/packages/rax-compat/es2017/find-dom-node.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-compat/es2017/fragment.d.ts b/packages/rax-compat/es2017/fragment.d.ts
deleted file mode 100644
index 323f68813..000000000
--- a/packages/rax-compat/es2017/fragment.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { Fragment } from 'react';
-export default Fragment;
diff --git a/packages/rax-compat/es2017/fragment.js b/packages/rax-compat/es2017/fragment.js
deleted file mode 100644
index 323f68813..000000000
--- a/packages/rax-compat/es2017/fragment.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { Fragment } from 'react';
-export default Fragment;
diff --git a/packages/rax-compat/es2017/hooks.d.ts b/packages/rax-compat/es2017/hooks.d.ts
deleted file mode 100644
index a72cb4053..000000000
--- a/packages/rax-compat/es2017/hooks.d.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react';
-/**
- * Compat useState for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L39
- * @param initialState
- * @returns [ value, dispatch ]
- */
-export declare function useState<S>(initialState: S | (() => S)): ReturnType<typeof React.useState>;
-/**
- * Compat useContext for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L93
- * @param context
- * @returns context
- */
-export declare function useContext<T>(context: React.Context<T>): ReturnType<typeof React.useContext>;
-/**
- * Compat useEffect for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L98
- * @param effect
- * @param inputs
- * @returns void
- */
-export declare function useEffect(effect: React.EffectCallback, inputs: React.DependencyList): void;
-/**
- * Compat useLayoutEffect for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L102
- * @param effect
- * @param inputs
- * @returns void
- */
-export declare function useLayoutEffect(effect: React.EffectCallback, inputs: React.DependencyList): void;
-/**
- * Compat useImperativeHandle for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L190
- * @param ref
- * @param create
- * @param inputs
- * @returns void
- */
-export declare function useImperativeHandle<T, R extends T>(ref: React.Ref<T> | undefined, create: () => R, inputs?: React.DependencyList): void;
-/**
- * Compat useRef for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L206
- * @param initialValue
- * @returns MutableRefObject
- */
-export declare function useRef<T>(initialValue: T): React.MutableRefObject<T>;
-/**
- * Compat useCallback for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L220
- * @param callback
- * @param inputs
- * @returns callback
- */
-export declare function useCallback<T extends Function>(callback: T, inputs: React.DependencyList): T;
-/**
- * Compat useMemo for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L224
- * @param create
- * @param inputs
- * @returns create
- */
-export declare function useMemo<T>(create: () => T, inputs: React.DependencyList | undefined): T;
-/**
- * Compat useReducer for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L224
- * @param reducer
- * @param initialArg
- * @param init
- * @returns [ state, dispatch ]
- */
-export declare function useReducer<R extends React.ReducerWithoutAction<any>, I>(reducer: R, initialArg: I, init: (arg: I) => React.ReducerStateWithoutAction<R>): [React.ReducerStateWithoutAction<R>, React.DispatchWithoutAction];
-export declare function useDebugValue<T>(value: T, format?: (value: T) => any): void;
-export declare function useInsertionEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;
-export declare function useSyncExternalStore<Snapshot>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot?: () => Snapshot): Snapshot;
diff --git a/packages/rax-compat/es2017/hooks.js b/packages/rax-compat/es2017/hooks.js
deleted file mode 100644
index aacd6f096..000000000
--- a/packages/rax-compat/es2017/hooks.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as React from 'react';
-/**
- * Compat useState for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L39
- * @param initialState 
- * @returns [ value, dispatch ]
- */ export function useState(initialState) {
-    return React.useState(initialState);
-}
-/**
- * Compat useContext for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L93
- * @param context 
- * @returns context
- */ export function useContext(context) {
-    return React.useContext(context);
-}
-/**
- * Compat useEffect for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L98
- * @param effect
- * @param inputs
- * @returns void
- */ export function useEffect(effect, inputs) {
-    return React.useEffect(effect, inputs);
-}
-/**
- * Compat useLayoutEffect for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L102
- * @param effect
- * @param inputs
- * @returns void
- */ export function useLayoutEffect(effect, inputs) {
-    return React.useLayoutEffect(effect, inputs);
-}
-/**
- * Compat useImperativeHandle for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L190
- * @param ref
- * @param create
- * @param inputs
- * @returns void
- */ export function useImperativeHandle(ref, create, inputs) {
-    return React.useImperativeHandle(ref, create, inputs);
-}
-/**
- * Compat useRef for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L206
- * @param initialValue
- * @returns MutableRefObject
- */ export function useRef(initialValue) {
-    return React.useRef(initialValue);
-}
-/**
- * Compat useCallback for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L220
- * @param callback
- * @param inputs
- * @returns callback
- */ export function useCallback(callback, inputs) {
-    return React.useCallback(callback, inputs);
-}
-/**
- * Compat useMemo for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L224
- * @param create
- * @param inputs
- * @returns create
- */ export function useMemo(create, inputs) {
-    return React.useMemo(create, inputs);
-}
-/**
- * Compat useReducer for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L224
- * @param reducer
- * @param initialArg
- * @param init
- * @returns [ state, dispatch ]
- */ export function useReducer(reducer, initialArg, init) {
-    return React.useReducer(reducer, initialArg, init);
-}
-export function useDebugValue(value, format) {
-    return React.useDebugValue(value, format);
-}
-export function useInsertionEffect(effect, deps) {
-    return React.useInsertionEffect(effect, deps);
-}
-export function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
-    return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
diff --git a/packages/rax-compat/es2017/index.d.ts b/packages/rax-compat/es2017/index.d.ts
deleted file mode 100644
index 5e840e977..000000000
--- a/packages/rax-compat/es2017/index.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createElement, cloneElement, isValidElement, createFactory } from './create-element';
-import render from './render';
-import { useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle, useDebugValue, useInsertionEffect, useSyncExternalStore } from './hooks';
-import Fragment from './fragment';
-import { forwardRef, createRef } from './ref';
-import { Component, PureComponent, memo } from './component';
-import { createContext } from './context';
-import { lazy, Suspense } from './suspense';
-export { render, createElement, cloneElement, isValidElement, createFactory, Component, PureComponent, memo, Fragment, forwardRef, createRef, createContext, lazy, Suspense, useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle, useDebugValue, useInsertionEffect, useSyncExternalStore, };
diff --git a/packages/rax-compat/es2017/index.js b/packages/rax-compat/es2017/index.js
deleted file mode 100644
index 9e01e90c5..000000000
--- a/packages/rax-compat/es2017/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createElement, cloneElement, isValidElement, createFactory } from './create-element';
-import render from './render';
-import { useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle, useDebugValue, useInsertionEffect, useSyncExternalStore } from './hooks';
-import Fragment from './fragment';
-import { forwardRef, createRef } from './ref';
-import { Component, PureComponent, memo } from './component';
-import { createContext } from './context';
-import { lazy, Suspense } from './suspense';
-export { render, createElement, cloneElement, isValidElement, createFactory, Component, PureComponent, memo, Fragment, forwardRef, createRef, createContext, lazy, Suspense, useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle, useDebugValue, useInsertionEffect, useSyncExternalStore };
diff --git a/packages/rax-compat/es2017/is-valid-element.js b/packages/rax-compat/es2017/is-valid-element.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-compat/es2017/ref.d.ts b/packages/rax-compat/es2017/ref.d.ts
deleted file mode 100644
index 2263ff131..000000000
--- a/packages/rax-compat/es2017/ref.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { forwardRef, createRef } from 'react';
-export { forwardRef, createRef };
diff --git a/packages/rax-compat/es2017/ref.js b/packages/rax-compat/es2017/ref.js
deleted file mode 100644
index 2263ff131..000000000
--- a/packages/rax-compat/es2017/ref.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { forwardRef, createRef } from 'react';
-export { forwardRef, createRef };
diff --git a/packages/rax-compat/es2017/render.d.ts b/packages/rax-compat/es2017/render.d.ts
deleted file mode 100644
index 9b362c311..000000000
--- a/packages/rax-compat/es2017/render.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Compat render for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/render.js#L5
- * @param element
- * @param container
- * @param options
- * @param callback
- * @returns componentInstance
- */
-export default function render(element: any, container: any, options: any, callback: Function): string;
diff --git a/packages/rax-compat/es2017/render.js b/packages/rax-compat/es2017/render.js
deleted file mode 100644
index 232783588..000000000
--- a/packages/rax-compat/es2017/render.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import { isFunction } from './type';
-/**
- * Compat render for rax export.
- * https://github.com/alibaba/rax/blob/master/packages/rax/src/render.js#L5
- * @param element
- * @param container
- * @param options
- * @param callback
- * @returns componentInstance
- */ export default function render(element, container, options, callback) {
-    if (isFunction(options)) {
-        callback = options;
-        options = null;
-    }
-    const root = createRoot(container);
-    root.render(element);
-    const componentInstance = '?'; // TODO..
-    if (isFunction(callback)) callback.call(componentInstance);
-    return componentInstance;
-};
diff --git a/packages/rax-compat/es2017/startTransition.d.ts b/packages/rax-compat/es2017/startTransition.d.ts
deleted file mode 100644
index b7df64fda..000000000
--- a/packages/rax-compat/es2017/startTransition.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { startTransition } from 'react';
-export { startTransition };
diff --git a/packages/rax-compat/es2017/suspense.d.ts b/packages/rax-compat/es2017/suspense.d.ts
deleted file mode 100644
index c1111eee5..000000000
--- a/packages/rax-compat/es2017/suspense.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { lazy, Suspense } from 'react';
-export { lazy, Suspense, };
diff --git a/packages/rax-compat/es2017/suspense.js b/packages/rax-compat/es2017/suspense.js
deleted file mode 100644
index 519afc0b6..000000000
--- a/packages/rax-compat/es2017/suspense.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { lazy, Suspense } from 'react';
-export { lazy, Suspense };
diff --git a/packages/rax-compat/es2017/type.d.ts b/packages/rax-compat/es2017/type.d.ts
deleted file mode 100644
index 17a128044..000000000
--- a/packages/rax-compat/es2017/type.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export declare function isFunction(obj: any): obj is Function;
-export declare function isNull(obj: any): obj is null;
diff --git a/packages/rax-compat/es2017/type.js b/packages/rax-compat/es2017/type.js
deleted file mode 100644
index cfdf4ec58..000000000
--- a/packages/rax-compat/es2017/type.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export function isFunction(obj) {
-    return typeof obj === 'function';
-}
-export function isNull(obj) {
-    return obj === null;
-}
diff --git a/packages/rax-compat/es2017/util.d.ts b/packages/rax-compat/es2017/util.d.ts
deleted file mode 100644
index 17a128044..000000000
--- a/packages/rax-compat/es2017/util.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export declare function isFunction(obj: any): obj is Function;
-export declare function isNull(obj: any): obj is null;
diff --git a/packages/rax-compat/src/index.ts b/packages/rax-compat/src/index.ts
index c4a8e25ea..c894fb9a7 100644
--- a/packages/rax-compat/src/index.ts
+++ b/packages/rax-compat/src/index.ts
@@ -1,4 +1,4 @@
-import { createElement, cloneElement, isValidElement, createFactory } from './create-element';
+import { createElement } from './create-element';
 import render from './render';
 import {
   useState,
@@ -10,41 +10,41 @@ import {
   useMemo,
   useReducer,
   useImperativeHandle,
-  useDebugValue,
-  useInsertionEffect,
-  useSyncExternalStore,
 } from './hooks';
 import Fragment from './fragment';
 import { forwardRef, createRef } from './ref';
 import { Component, PureComponent, memo } from './component';
 import { createContext } from './context';
-import { lazy, Suspense } from './suspense';
+import shared from './shared';
+
+// Mocked version for rax.
+const version = '1.2.2-compat';
 
 export {
-  render,
-  createElement,
-  cloneElement,
-  isValidElement,
-  createFactory,
   Component,
-  PureComponent,
-  memo,
   Fragment,
-  forwardRef,
-  createRef,
+  PureComponent,
+
   createContext,
-  lazy,
-  Suspense,
-  useState,
+  createElement,
+  createRef,
+  forwardRef,
+  memo,
+
+  render,
+
+  // This is mocked object for rax compatible.
+  shared,
+
+  useCallback,
   useContext,
   useEffect,
+  useImperativeHandle,
   useLayoutEffect,
-  useRef,
-  useCallback,
   useMemo,
   useReducer,
-  useImperativeHandle,
-  useDebugValue,
-  useInsertionEffect,
-  useSyncExternalStore,
+  useRef,
+  useState,
+
+  version,
 };
diff --git a/packages/rax-compat/src/shared.ts b/packages/rax-compat/src/shared.ts
new file mode 100644
index 000000000..a758aa7af
--- /dev/null
+++ b/packages/rax-compat/src/shared.ts
@@ -0,0 +1,52 @@
+import { ReactElement } from 'react';
+
+// Mocked `Rax.shared`.
+const shared = {
+  get Element(): any {
+    warningCompat('shared.Element');
+    return null;
+  },
+  get Host(): any {
+    warningCompat('shared.Host');
+    return null;
+  },
+  get Instance(): any {
+    warningCompat('shared.Instance');
+    return null;
+  },
+  flattenChildren,
+};
+
+function warningCompat(message: string) {
+  let stack: string;
+  try {
+    throw new Error(`You are not allowed to use ${message}.`);
+  } catch (error) {
+    stack = error.stack;
+  }
+  console.error(`[RaxCompat] ${stack}`);
+}
+
+function flattenChildren(children: ReactElement) {
+  if (children == null) {
+    return children;
+  }
+
+  const result: ReactElement[] = [];
+  // If length equal 1, return the only one.
+  traverseChildren(children, result);
+
+  return result.length - 1 ? result : result[0];
+}
+
+function traverseChildren(children: ReactElement, result: ReactElement[]) {
+  if (Array.isArray(children)) {
+    for (let i = 0, l = children.length; i < l; i++) {
+      traverseChildren(children[i], result);
+    }
+  } else {
+    result.push(children);
+  }
+}
+
+export default shared;