diff --git a/bsconfig.json b/bsconfig.json
index d10e64c..9808a9a 100644
--- a/bsconfig.json
+++ b/bsconfig.json
@@ -3,9 +3,9 @@
   "reason": { "react-jsx": 3 },
   "sources": [
     {"dir": "src", "subdirs": true},
-    { "dir": "test", "type": "dev" }
+    { "dir": "test", "subdirs": true, "type": "dev" }
   ],
-  "package-specs": [{ "module": "commonjs", "in-source": true }],
+  "package-specs": [{ "module": "es6", "in-source": true }],
   "suffix": ".bs.js",
   "bs-dev-dependencies": ["reason-test-framework"],
   "bsc-flags": ["-bs-no-version-header"]
diff --git a/package-lock.json b/package-lock.json
index 0d4c1a4..f0ae0b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1516,6 +1516,12 @@
         "source-map": "~0.6.1"
       }
     },
+    "esm": {
+      "version": "3.2.25",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+      "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+      "dev": true
+    },
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
diff --git a/package.json b/package.json
index bac50fc..288b79a 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
   "homepage": "https://rescript-lang.org/docs/latest/react/",
   "devDependencies": {
     "bs-platform": "8.4.2",
+    "esm": "^3.2.25",
     "jest": "^26.0.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
diff --git a/src/React.res b/src/React.res
index 211a399..2dadd65 100644
--- a/src/React.res
+++ b/src/React.res
@@ -25,16 +25,16 @@ external cloneElement: (element, 'props) => element = "cloneElement"
 external createElementVariadic: (component<'props>, 'props, array<element>) => element =
   "createElement"
 
-@module("react") @deprecated("Please use JSX syntax directly.")
+@module("react/jsx-runtime")
 external jsxKeyed: (component<'props>, 'props, string) => element = "jsx"
 
-@module("react") @deprecated("Please use JSX syntax directly.")
+@module("react/jsx-runtime")
 external jsx: (component<'props>, 'props) => element = "jsx"
 
-@module("react") @deprecated("Please use JSX syntax directly.")
+@module("react/jsx-runtime")
 external jsxs: (component<'props>, 'props) => element = "jsxs"
 
-@module("react") @deprecated("Please use JSX syntax directly.")
+@module("react/jsx-runtime")
 external jsxsKeyed: (component<'props>, 'props, string) => element = "jsxs"
 
 type ref<'value> = {mutable current: 'value}
diff --git a/test/v4-ppx/BasicComponent.res b/test/v4-ppx/BasicComponent.res
new file mode 100644
index 0000000..c9ff980
--- /dev/null
+++ b/test/v4-ppx/BasicComponent.res
@@ -0,0 +1,30 @@
+@@warning("-27")
+
+module Test = {
+  @bs.obj external makeProps: (~children: 'children, unit) => {"children": 'children} = ""
+  let make =
+    (@warning("-16") ~children) => {
+      children
+    }
+  let make = {
+    let \"Foo$Test" = (\"Props": {"children": 'children}) => make(~children=\"Props"["children"])
+    \"Foo$Test"
+  }
+}
+
+module App = {
+  @bs.obj external makeProps: unit => {.} = ""
+
+  let make = () => {
+    (@warning("-3") React.jsx)(
+      Test.make,
+      {
+        Test.makeProps(~children={React.string("help")}, ())
+      },
+    )
+  }
+  let make = {
+    let \"Foo$App" = (\"Props": {.}) => make()
+    \"Foo$App"
+  }
+}
diff --git a/test/v4-ppx/KeyedComp.res b/test/v4-ppx/KeyedComp.res
new file mode 100644
index 0000000..1396f1d
--- /dev/null
+++ b/test/v4-ppx/KeyedComp.res
@@ -0,0 +1,48 @@
+@@warning("-27")
+
+module Test = {
+  @bs.obj external makeProps: (~children: 'children, unit) => {"children": 'children} = ""
+  let make =
+    (@warning("-16") ~children) => {
+      children
+    }
+  let make = {
+    let \"Foo$Test" = (\"Props": {"children": 'children}) => make(~children=\"Props"["children"])
+    \"Foo$Test"
+  }
+}
+
+module App = {
+  @bs.obj external makeProps: unit => {.} = ""
+
+  let make = () => {
+    @warning("-3")
+    React.jsxs(
+      React.Fragment.make,
+      React.Fragment.makeProps(
+        ~children=React.array([
+          (@warning("-3") React.jsx)(
+            Test.make,
+            Test.makeProps(~children={React.string("help")}, ()),
+          ),
+          (@warning("-3") React.jsxKeyed)(
+            Test.make,
+            Test.makeProps(~children={React.string("help")}, ()),
+            "test",
+          ),
+        ]),
+        (),
+      ),
+    )
+  }
+  let make = {
+    let \"Foo$App" = (\"Props": {.}) => make()
+    \"Foo$App"
+  }
+}
+
+let element = <App/>
+
+
+ReactDOMServer.renderToString(element)->Js.log
+