diff --git a/examples/create-react-app/.babelrc b/examples/create-react-app/.babelrc
new file mode 100644
index 000000000..d12426e6f
--- /dev/null
+++ b/examples/create-react-app/.babelrc
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-syntax-import-assertions"
+  ]
+}
diff --git a/examples/create-react-app/README.md b/examples/create-react-app/README.md
index b58e0af83..de567f199 100644
--- a/examples/create-react-app/README.md
+++ b/examples/create-react-app/README.md
@@ -1,5 +1,17 @@
 # Getting Started with Create React App
 
+> **_NOTE:_** The Create React App tool has been deprecated. 
+> We will attempt to maintain this example for as long as we can but its important
+> to be aware that there are some workarounds to the standard CRA config in order to get 
+> the LI.FI Widget working.
+> 
+> We are using a mix of `react-app-rewired`, `customize-cra` and `@babel/plugin-syntax-import-assertions` 
+> dev dependencies to get the Widget to work in Create React App. Take a look at the scripts in the 
+> package.json, the contents of the config-overrides.js file and the addition of the .babelrc file to understand the 
+> changes that are needed.
+> 
+> If you are currently maintaining a CRA project it might be worth considering migrating to a better supported build tool like [Vite](https://vitejs.dev/).
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts
diff --git a/examples/create-react-app/config-overrides.js b/examples/create-react-app/config-overrides.js
index cf933c9db..9e0cd3077 100644
--- a/examples/create-react-app/config-overrides.js
+++ b/examples/create-react-app/config-overrides.js
@@ -1,6 +1,9 @@
 const webpack = require('webpack');
+const path = require('path');
 
-module.exports = function override(config) {
+const { override, useBabelRc, addWebpackModuleRule } = require('customize-cra');
+
+function projectOverrides(config) {
   const fallback = config.resolve.fallback || {};
   Object.assign(fallback, {
     buffer: require.resolve('buffer'),
@@ -21,4 +24,13 @@ module.exports = function override(config) {
     },
   });
   return config;
-};
+}
+
+module.exports = override(
+  projectOverrides,
+  useBabelRc(),
+  addWebpackModuleRule({
+    test: /\.js$/,
+    include: [path.resolve(__dirname, 'node_modules', '@lifi', 'widget')],
+  }),
+);
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
index 52f5f2895..c7ed7eb63 100644
--- a/examples/create-react-app/package.json
+++ b/examples/create-react-app/package.json
@@ -42,7 +42,12 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/plugin-syntax-import-assertions": "^7.24.7",
+    "@types/babel__core": "^7",
+    "@types/customize-cra": "^1",
     "buffer": "^6.0.3",
+    "customize-cra": "^1.0.0",
     "react-app-rewired": "^2.2.1"
   }
 }
diff --git a/examples/create-react-app/yarn.lock b/examples/create-react-app/yarn.lock
index 938425e42..d353d96ad 100644
--- a/examples/create-react-app/yarn.lock
+++ b/examples/create-react-app/yarn.lock
@@ -65,6 +65,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/code-frame@npm:7.24.7"
+  dependencies:
+    "@babel/highlight": "npm:^7.24.7"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/4812e94885ba7e3213d49583a155fdffb05292330f0a9b2c41b49288da70cf3c746a3fda0bf1074041a6d741c33f8d7be24be5e96f41ef77395eeddc5c9ff624
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.22.0, @babel/compat-data@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/compat-data@npm:7.22.3"
@@ -72,6 +82,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/compat-data@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/compat-data@npm:7.24.7"
+  checksum: 10/6edc09152ca51a22c33741c441f33f9475598fa59edc53369edb74b49f4ea4bef1281f5b0ed2b9b67fb66faef2da2069e21c4eef83405d8326e524b301f4e7e2
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:^7.1.0, @babel/core@npm:^7.11.1, @babel/core@npm:^7.12.3, @babel/core@npm:^7.16.0, @babel/core@npm:^7.7.2, @babel/core@npm:^7.8.0":
   version: 7.22.1
   resolution: "@babel/core@npm:7.22.1"
@@ -95,6 +112,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/core@npm:7.24.7"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/generator": "npm:^7.24.7"
+    "@babel/helper-compilation-targets": "npm:^7.24.7"
+    "@babel/helper-module-transforms": "npm:^7.24.7"
+    "@babel/helpers": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.24.7"
+    "@babel/template": "npm:^7.24.7"
+    "@babel/traverse": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/ef8cc1afa3ccecee6d1f5660c487ccc2a3f25106830ea9040e80ef4b2092e053607ee4ddd03493e4f7ef2f9967a956ca53b830d54c5bee738eeb58cce679dd4a
+  languageName: node
+  linkType: hard
+
 "@babel/eslint-parser@npm:^7.16.3":
   version: 7.21.8
   resolution: "@babel/eslint-parser@npm:7.21.8"
@@ -121,6 +161,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/generator@npm:7.24.7"
+  dependencies:
+    "@babel/types": "npm:^7.24.7"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10/c71d24a4b41b19c10d2f2eb819f27d4cf94220e2322f7c8fed8bfbbb115b2bebbdd6dc1f27dac78a175e90604def58d763af87e0fa81ce4ab1582858162cf768
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
@@ -154,6 +206,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-compilation-targets@npm:7.24.7"
+  dependencies:
+    "@babel/compat-data": "npm:^7.24.7"
+    "@babel/helper-validator-option": "npm:^7.24.7"
+    browserslist: "npm:^4.22.2"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: 10/8f8bc89af70a606ccb208513aa25d83e19b88f91b64a33174f7701a9479e67ddbb0a9c89033265070375cd24e690b93380b3a3ea11e4b3a711d742f0f4699ee7
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.1":
   version: 7.22.1
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.1"
@@ -209,6 +274,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-environment-visitor@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-environment-visitor@npm:7.24.7"
+  dependencies:
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/079d86e65701b29ebc10baf6ed548d17c19b808a07aa6885cc141b690a78581b180ee92b580d755361dc3b16adf975b2d2058b8ce6c86675fcaf43cf22f2f7c6
+  languageName: node
+  linkType: hard
+
 "@babel/helper-function-name@npm:^7.18.9, @babel/helper-function-name@npm:^7.19.0, @babel/helper-function-name@npm:^7.21.0":
   version: 7.21.0
   resolution: "@babel/helper-function-name@npm:7.21.0"
@@ -219,6 +293,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-function-name@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-function-name@npm:7.24.7"
+  dependencies:
+    "@babel/template": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/2ceb3d9b2b35a0fc4100fc06ed7be3bc38f03ff0bf128ff0edbc0cc7dd842967b1496fc70b5c616c747d7711c2b87e7d025c8888f48740631d6148a9d3614f85
+  languageName: node
+  linkType: hard
+
 "@babel/helper-hoist-variables@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-hoist-variables@npm:7.18.6"
@@ -228,6 +312,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-hoist-variables@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-hoist-variables@npm:7.24.7"
+  dependencies:
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/6cfdcf2289cd12185dcdbdf2435fa8d3447b797ac75851166de9fc8503e2fd0021db6baf8dfbecad3753e582c08e6a3f805c8d00cbed756060a877d705bd8d8d
+  languageName: node
+  linkType: hard
+
 "@babel/helper-member-expression-to-functions@npm:^7.22.0":
   version: 7.22.3
   resolution: "@babel/helper-member-expression-to-functions@npm:7.22.3"
@@ -246,6 +339,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-module-imports@npm:7.24.7"
+  dependencies:
+    "@babel/traverse": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-transforms@npm:^7.18.6, @babel/helper-module-transforms@npm:^7.20.11, @babel/helper-module-transforms@npm:^7.21.5, @babel/helper-module-transforms@npm:^7.22.1":
   version: 7.22.1
   resolution: "@babel/helper-module-transforms@npm:7.22.1"
@@ -262,6 +365,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-module-transforms@npm:7.24.7"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.24.7"
+    "@babel/helper-module-imports": "npm:^7.24.7"
+    "@babel/helper-simple-access": "npm:^7.24.7"
+    "@babel/helper-split-export-declaration": "npm:^7.24.7"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/4f2b232bf6d1be8d3a72b084a2a7ac1b0b93ea85717411a11ae1fb6375d4392019e781d8cc155789e649a2caa7eec378dd1404210603d6d4230f042c5feacffb
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-optimise-call-expression@npm:7.18.6"
@@ -278,6 +396,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-plugin-utils@npm:7.24.7"
+  checksum: 10/dad51622f0123fdba4e2d40a81a6b7d6ef4b1491b2f92fd9749447a36bde809106cf117358705057a2adc8fd73d5dc090222e0561b1213dae8601c8367f5aac8
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.18.9":
   version: 7.18.9
   resolution: "@babel/helper-remap-async-to-generator@npm:7.18.9"
@@ -315,6 +440,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-simple-access@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-simple-access@npm:7.24.7"
+  dependencies:
+    "@babel/traverse": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/5083e190186028e48fc358a192e4b93ab320bd016103caffcfda81302a13300ccce46c9cd255ae520c25d2a6a9b47671f93e5fe5678954a2329dc0a685465c49
+  languageName: node
+  linkType: hard
+
 "@babel/helper-skip-transparent-expression-wrappers@npm:^7.20.0":
   version: 7.20.0
   resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.20.0"
@@ -333,6 +468,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-split-export-declaration@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-split-export-declaration@npm:7.24.7"
+  dependencies:
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/ff04a3071603c87de0d6ee2540b7291ab36305b329bd047cdbb6cbd7db335a12f9a77af1cf708779f75f13c4d9af46093c00b34432e50b2411872c658d1a2e5e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-string-parser@npm:^7.21.5":
   version: 7.21.5
   resolution: "@babel/helper-string-parser@npm:7.21.5"
@@ -340,6 +484,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-string-parser@npm:7.24.7"
+  checksum: 10/603d8d962bbe89907aa99a8f19a006759ab7b2464615f20a6a22e3e2e8375af37ddd0e5175c9e622e1c4b2d83607ffb41055a59d0ce34404502af30fde573a5c
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.18.6, @babel/helper-validator-identifier@npm:^7.19.1":
   version: 7.19.1
   resolution: "@babel/helper-validator-identifier@npm:7.19.1"
@@ -347,6 +498,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-validator-identifier@npm:7.24.7"
+  checksum: 10/86875063f57361471b531dbc2ea10bbf5406e12b06d249b03827d361db4cad2388c6f00936bcd9dc86479f7e2c69ea21412c2228d4b3672588b754b70a449d4b
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.21.0":
   version: 7.21.0
   resolution: "@babel/helper-validator-option@npm:7.21.0"
@@ -354,6 +512,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-validator-option@npm:7.24.7"
+  checksum: 10/9689166bf3f777dd424c026841c8cd651e41b21242dbfd4569a53086179a3e744c8eddd56e9d10b54142270141c91581b53af0d7c00c82d552d2540e2a919f7e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-wrap-function@npm:^7.18.9":
   version: 7.20.5
   resolution: "@babel/helper-wrap-function@npm:7.20.5"
@@ -377,6 +542,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helpers@npm:7.24.7"
+  dependencies:
+    "@babel/template": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/f7496f0d7a0b13ea86136ac2053371027125734170328215f8a90eac96fafaaae4e5398c0729bdadf23261c00582a31e14bc70113427653b718220641a917f9d
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/highlight@npm:7.18.6"
@@ -388,6 +563,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/highlight@npm:7.24.7"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/69b73f38cdd4f881b09b939a711e76646da34f4834f4ce141d7a49a6bb1926eab1c594148970a8aa9360398dff800f63aade4e81fafdd7c8d8a8489ea93bfec1
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.9, @babel/parser@npm:^7.22.0, @babel/parser@npm:^7.22.4":
   version: 7.22.4
   resolution: "@babel/parser@npm:7.22.4"
@@ -397,6 +584,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/parser@npm:7.24.7"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/ef9ebce60e13db560ccc7af9235d460f6726bb7e23ae2d675098c1fc43d5249067be60d4118889dad33b1d4f85162cf66baf554719e1669f29bb20e71322568e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.18.6"
@@ -622,6 +818,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-import-assertions@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/bd065cd73ae3dbe69e6f9167aa605da3df77d69bbad2ede95e4aa9e7af7744d5bc1838b928c77338ca62df7691a7adf6e608279be50c18e4b3c70cf77e3013d7
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-attributes@npm:^7.22.3":
   version: 7.22.3
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.22.3"
@@ -1640,6 +1847,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/template@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/template@npm:7.24.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/5975d404ef51cf379515eb0f80b115981d0b9dff5539e53a47516644abb8c83d7559f5b083eb1d4977b20d8359ebb2f911ccd4f729143f8958fdc465f976d843
+  languageName: node
+  linkType: hard
+
 "@babel/traverse@npm:^7.20.5, @babel/traverse@npm:^7.22.1, @babel/traverse@npm:^7.7.2":
   version: 7.22.4
   resolution: "@babel/traverse@npm:7.22.4"
@@ -1658,6 +1876,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/traverse@npm:7.24.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/generator": "npm:^7.24.7"
+    "@babel/helper-environment-visitor": "npm:^7.24.7"
+    "@babel/helper-function-name": "npm:^7.24.7"
+    "@babel/helper-hoist-variables": "npm:^7.24.7"
+    "@babel/helper-split-export-declaration": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/785cf26383a992740e492efba7016de964cd06c05c9d7146fa1b5ead409e054c444f50b36dc37856884a56e32cf9d3105ddf1543486b6df68300bffb117a245a
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.6, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.5, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.0, @babel/types@npm:^7.21.4, @babel/types@npm:^7.21.5, @babel/types@npm:^7.22.0, @babel/types@npm:^7.22.3, @babel/types@npm:^7.22.4, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.22.4
   resolution: "@babel/types@npm:7.22.4"
@@ -1669,6 +1905,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/types@npm:7.24.7"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.24.7"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: 10/ad3c8c0d6fb4acb0bb74bb5b4bb849b181bf6185677ef9c59c18856c81e43628d0858253cf232f0eca806f02e08eff85a1d3e636a3e94daea737597796b0b430
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -2509,6 +2756,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/gen-mapping@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "@jridgewell/gen-mapping@npm:0.3.5"
+  dependencies:
+    "@jridgewell/set-array": "npm:^1.2.1"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10/81587b3c4dd8e6c60252122937cea0c637486311f4ed208b52b62aae2e7a87598f63ec330e6cd0984af494bfb16d3f0d60d3b21d7e5b4aedd2602ff3fe9d32e2
+  languageName: node
+  linkType: hard
+
 "@jridgewell/resolve-uri@npm:3.1.0":
   version: 3.1.0
   resolution: "@jridgewell/resolve-uri@npm:3.1.0"
@@ -2516,6 +2774,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/resolve-uri@npm:^3.1.0":
+  version: 3.1.2
+  resolution: "@jridgewell/resolve-uri@npm:3.1.2"
+  checksum: 10/97106439d750a409c22c8bff822d648f6a71f3aa9bc8e5129efdc36343cd3096ddc4eeb1c62d2fe48e9bdd4db37b05d4646a17114ecebd3bbcacfa2de51c3c1d
+  languageName: node
+  linkType: hard
+
 "@jridgewell/set-array@npm:^1.0.1":
   version: 1.1.2
   resolution: "@jridgewell/set-array@npm:1.1.2"
@@ -2523,6 +2788,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/set-array@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@jridgewell/set-array@npm:1.2.1"
+  checksum: 10/832e513a85a588f8ed4f27d1279420d8547743cc37fcad5a5a76fc74bb895b013dfe614d0eed9cb860048e6546b798f8f2652020b4b2ba0561b05caa8c654b10
+  languageName: node
+  linkType: hard
+
 "@jridgewell/source-map@npm:^0.3.3":
   version: 0.3.3
   resolution: "@jridgewell/source-map@npm:0.3.3"
@@ -2540,7 +2812,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14":
   version: 1.4.15
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
   checksum: 10/89960ac087781b961ad918978975bcdf2051cd1741880469783c42de64239703eab9db5230d776d8e6a09d73bb5e4cb964e07d93ee6e2e7aea5a7d726e865c09
@@ -2557,6 +2829,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
+  version: 0.3.25
+  resolution: "@jridgewell/trace-mapping@npm:0.3.25"
+  dependencies:
+    "@jridgewell/resolve-uri": "npm:^3.1.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
+  checksum: 10/dced32160a44b49d531b80a4a2159dceab6b3ddf0c8e95a0deae4b0e894b172defa63d5ac52a19c2068e1fe7d31ea4ba931fbeec103233ecb4208953967120fc
+  languageName: node
+  linkType: hard
+
 "@leichtgewicht/ip-codec@npm:^2.0.1":
   version: 2.0.4
   resolution: "@leichtgewicht/ip-codec@npm:2.0.4"
@@ -4439,6 +4721,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__core@npm:*, @types/babel__core@npm:^7":
+  version: 7.20.5
+  resolution: "@types/babel__core@npm:7.20.5"
+  dependencies:
+    "@babel/parser": "npm:^7.20.7"
+    "@babel/types": "npm:^7.20.7"
+    "@types/babel__generator": "npm:*"
+    "@types/babel__template": "npm:*"
+    "@types/babel__traverse": "npm:*"
+  checksum: 10/c32838d280b5ab59d62557f9e331d3831f8e547ee10b4f85cb78753d97d521270cebfc73ce501e9fb27fe71884d1ba75e18658692c2f4117543f0fc4e3e118b3
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14":
   version: 7.20.1
   resolution: "@types/babel__core@npm:7.20.1"
@@ -4518,6 +4813,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/customize-cra@npm:^1":
+  version: 1.0.8
+  resolution: "@types/customize-cra@npm:1.0.8"
+  dependencies:
+    "@types/babel__core": "npm:*"
+    "@types/webpack": "npm:^4"
+    "@types/webpack-bundle-analyzer": "npm:^3"
+    "@types/workbox-webpack-plugin": "npm:^5.1.8"
+  checksum: 10/16191bb9edbd1d4786ec2ac5ac21b9f4ce656c9b99fc0b696fe3c3a35dc4d0818013ff4978805a173f848d1c1b11bd7ac2b8285f00a10d78926cd63e8ad46d05
+  languageName: node
+  linkType: hard
+
 "@types/debug@npm:^4.1.7":
   version: 4.1.8
   resolution: "@types/debug@npm:4.1.8"
@@ -4884,6 +5191,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/source-list-map@npm:*":
+  version: 0.1.6
+  resolution: "@types/source-list-map@npm:0.1.6"
+  checksum: 10/9cd294c121f1562062de5d241fe4d10780b1131b01c57434845fe50968e9dcf67ede444591c2b1ad6d3f9b6bc646ac02cc8f51a3577c795f9c64cf4573dcc6b1
+  languageName: node
+  linkType: hard
+
 "@types/stack-utils@npm:^2.0.0":
   version: 2.0.1
   resolution: "@types/stack-utils@npm:2.0.1"
@@ -4891,6 +5205,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/tapable@npm:^1":
+  version: 1.0.12
+  resolution: "@types/tapable@npm:1.0.12"
+  checksum: 10/adfb978a3097154be92c4a92184bb17f86a84473bd871a9a862f81676532ebec86ea61acdce999186447832e32a4d45d591d64b64131dd977ca41508165011d7
+  languageName: node
+  linkType: hard
+
 "@types/trusted-types@npm:^2.0.2":
   version: 2.0.3
   resolution: "@types/trusted-types@npm:2.0.3"
@@ -4898,6 +5219,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/uglify-js@npm:*":
+  version: 3.17.5
+  resolution: "@types/uglify-js@npm:3.17.5"
+  dependencies:
+    source-map: "npm:^0.6.1"
+  checksum: 10/87368861a3f2df071905d698c9f7a4b825e2f69dd29530283594ccddd155d4a8ff7795021af28a97d938c9557a6ea23bc3d77e076a6cf3e02f6401849e067f61
+  languageName: node
+  linkType: hard
+
 "@types/uuid@npm:^8.3.4":
   version: 8.3.4
   resolution: "@types/uuid@npm:8.3.4"
@@ -4905,6 +5235,47 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/webpack-bundle-analyzer@npm:^3":
+  version: 3.9.9
+  resolution: "@types/webpack-bundle-analyzer@npm:3.9.9"
+  dependencies:
+    "@types/webpack": "npm:^4"
+  checksum: 10/e5e393c4d48d2a4fd4e68a8536efa7957dba27695ce978c7f2214890c26ecc6c5d806c91f83d16ad0c91a095abc8a57006c70f75cdbff7545de1e2da250a29ba
+  languageName: node
+  linkType: hard
+
+"@types/webpack-sources@npm:*":
+  version: 3.2.3
+  resolution: "@types/webpack-sources@npm:3.2.3"
+  dependencies:
+    "@types/node": "npm:*"
+    "@types/source-list-map": "npm:*"
+    source-map: "npm:^0.7.3"
+  checksum: 10/7b557f242efaa10e4e3e18cc4171a0c98e22898570caefdd4f7b076fe8534b5abfac92c953c6604658dcb7218507f970230352511840fe9fdea31a9af3b9a906
+  languageName: node
+  linkType: hard
+
+"@types/webpack@npm:^4":
+  version: 4.41.38
+  resolution: "@types/webpack@npm:4.41.38"
+  dependencies:
+    "@types/node": "npm:*"
+    "@types/tapable": "npm:^1"
+    "@types/uglify-js": "npm:*"
+    "@types/webpack-sources": "npm:*"
+    anymatch: "npm:^3.0.0"
+    source-map: "npm:^0.6.0"
+  checksum: 10/63f2137371e9fd99242c95ae5a115e8da470e61344b6b10b3778c91bbe0ab173d4ad879b53a57e4950b3124b3f8627480bf14f70a11c730d3e66195d8e0c7d8c
+  languageName: node
+  linkType: hard
+
+"@types/workbox-webpack-plugin@npm:^5.1.8":
+  version: 5.1.8
+  resolution: "@types/workbox-webpack-plugin@npm:5.1.8"
+  checksum: 10/e2c8b833fa002694dc6d614b58efd472705f90a2b836eab88a4cad26444773e7628ed4f4d1b45ff59f2a7b9336876e28076b36a8a7e33273452b91fb0878e2f1
+  languageName: node
+  linkType: hard
+
 "@types/ws@npm:^7.4.4":
   version: 7.4.7
   resolution: "@types/ws@npm:7.4.7"
@@ -6008,7 +6379,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anymatch@npm:^3.0.3, anymatch@npm:^3.1.3, anymatch@npm:~3.1.2":
+"anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:^3.1.3, anymatch@npm:~3.1.2":
   version: 3.1.3
   resolution: "anymatch@npm:3.1.3"
   dependencies:
@@ -6648,6 +7019,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.22.2":
+  version: 4.23.1
+  resolution: "browserslist@npm:4.23.1"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001629"
+    electron-to-chromium: "npm:^1.4.796"
+    node-releases: "npm:^2.0.14"
+    update-browserslist-db: "npm:^1.0.16"
+  bin:
+    browserslist: cli.js
+  checksum: 10/91da59f70a8e01ece97133670f9857d6d7e96be78e1b7ffa54b869f97d01d01c237612471b595cee41c1ab212e26e536ce0b6716ad1d6c4368a40c222698cac1
+  languageName: node
+  linkType: hard
+
 "bs58@npm:^4.0.0, bs58@npm:^4.0.1":
   version: 4.0.1
   resolution: "bs58@npm:4.0.1"
@@ -6819,10 +7204,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001489":
-  version: 1.0.30001495
-  resolution: "caniuse-lite@npm:1.0.30001495"
-  checksum: 10/fe98051073c7b1e4d06fbd0feb6828fc1eca94cdf8cc0aeb7febb096a4a80adc0cffa57222e2923e15bf2923c9da47c82aab986a56d82d9301c1182663aeacdd
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001489, caniuse-lite@npm:^1.0.30001629":
+  version: 1.0.30001640
+  resolution: "caniuse-lite@npm:1.0.30001640"
+  checksum: 10/14f04379452d4302185400db14b286115d25ce96fd09536590233a09908273990deeb1c081a7ea8bc091d86cb4d1665260de8f150e84dc240e17bf7d6af0aca7
   languageName: node
   linkType: hard
 
@@ -6850,7 +7235,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^2.0.0, chalk@npm:^2.4.1":
+"chalk@npm:^2.0.0, chalk@npm:^2.4.1, chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
   dependencies:
@@ -7259,6 +7644,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert-source-map@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "convert-source-map@npm:2.0.0"
+  checksum: 10/c987be3ec061348cdb3c2bfb924bec86dea1eacad10550a85ca23edb0fe3556c3a61c7399114f3331ccb3499d7fd0285ab24566e5745929412983494c3926e15
+  languageName: node
+  linkType: hard
+
 "cookie-es@npm:^1.0.0":
   version: 1.0.0
   resolution: "cookie-es@npm:1.0.0"
@@ -7349,15 +7741,20 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "create-react-app@workspace:."
   dependencies:
+    "@babel/core": "npm:^7.24.7"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.24.7"
     "@lifi/widget": "npm:^3.0.0"
     "@testing-library/jest-dom": "npm:^6.4.6"
     "@testing-library/react": "npm:^14.3.1"
     "@testing-library/user-event": "npm:^14.5.2"
+    "@types/babel__core": "npm:^7"
+    "@types/customize-cra": "npm:^1"
     "@types/jest": "npm:^29.5.12"
     "@types/node": "npm:^20.14.9"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
     buffer: "npm:^6.0.3"
+    customize-cra: "npm:^1.0.0"
     react: "npm:^18.3.1"
     react-app-rewired: "npm:^2.2.1"
     react-dom: "npm:^18.3.1"
@@ -7709,6 +8106,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"customize-cra@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "customize-cra@npm:1.0.0"
+  dependencies:
+    lodash.flow: "npm:^3.5.0"
+  checksum: 10/978acd4fa5be592813dc1cba3bad25fd41bc09d12893639c20ac1b24e29ec1bd932223510dca4977cdedc85d84a7ab5762b66f887396ba60f77aa525225e23e0
+  languageName: node
+  linkType: hard
+
 "damerau-levenshtein@npm:^1.0.8":
   version: 1.0.8
   resolution: "damerau-levenshtein@npm:1.0.8"
@@ -7766,6 +8172,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:^4.3.1":
+  version: 4.3.5
+  resolution: "debug@npm:4.3.5"
+  dependencies:
+    ms: "npm:2.1.2"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10/cb6eab424c410e07813ca1392888589972ce9a32b8829c6508f5e1f25f3c3e70a76731610ae55b4bbe58d1a2fffa1424b30e97fa8d394e49cd2656a9643aedd2
+  languageName: node
+  linkType: hard
+
 "decamelize@npm:^1.2.0":
   version: 1.2.0
   resolution: "decamelize@npm:1.2.0"
@@ -8230,6 +8648,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.4.796":
+  version: 1.4.816
+  resolution: "electron-to-chromium@npm:1.4.816"
+  checksum: 10/c44da0ca6eb40b92cc025a9ab157d465708601b4c226b7a41ab3fbb42825094f62b25d6260bb4399dd9a4be308611f22711412eb61a13cecc544d95fab8eafab
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.4":
   version: 6.5.5
   resolution: "elliptic@npm:6.5.5"
@@ -8508,6 +8933,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"escalade@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "escalade@npm:3.1.2"
+  checksum: 10/a1e07fea2f15663c30e40b9193d658397846ffe28ce0a3e4da0d8e485fedfeca228ab846aee101a05015829adf39f9934ff45b2a3fca47bed37a29646bd05cd3
+  languageName: node
+  linkType: hard
+
 "escape-html@npm:~1.0.3":
   version: 1.0.3
   resolution: "escape-html@npm:1.0.3"
@@ -11739,7 +12171,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.1.2, json5@npm:^2.2.0, json5@npm:^2.2.2":
+"json5@npm:^2.1.2, json5@npm:^2.2.0, json5@npm:^2.2.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -12035,6 +12467,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.flow@npm:^3.5.0":
+  version: 3.5.0
+  resolution: "lodash.flow@npm:3.5.0"
+  checksum: 10/da39497f388971e1949607882e608d5b2306f025f0b5cc3953f2c25fca7db5a8dba23bd3ddeaed4b0dbd2d44c5aaa6f6f12016b5511b08a3d61de1e1c1f59eb7
+  languageName: node
+  linkType: hard
+
 "lodash.isarguments@npm:^3.1.0":
   version: 3.1.0
   resolution: "lodash.isarguments@npm:3.1.0"
@@ -12776,6 +13215,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.14":
+  version: 2.0.14
+  resolution: "node-releases@npm:2.0.14"
+  checksum: 10/0f7607ec7db5ef1dc616899a5f24ae90c869b6a54c2d4f36ff6d84a282ab9343c7ff3ca3670fe4669171bb1e8a9b3e286e1ef1c131f09a83d70554f855d54f24
+  languageName: node
+  linkType: hard
+
 "nopt@npm:^6.0.0":
   version: 6.0.0
   resolution: "nopt@npm:6.0.0"
@@ -13304,6 +13750,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picocolors@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "picocolors@npm:1.0.1"
+  checksum: 10/fa68166d1f56009fc02a34cdfd112b0dd3cf1ef57667ac57281f714065558c01828cdf4f18600ad6851cbe0093952ed0660b1e0156bddf2184b6aaf5817553a5
+  languageName: node
+  linkType: hard
+
 "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
@@ -15489,6 +15942,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "semver@npm:6.3.1"
+  bin:
+    semver: bin/semver.js
+  checksum: 10/1ef3a85bd02a760c6ef76a45b8c1ce18226de40831e02a00bad78485390b98b6ccaa31046245fc63bba4a47a6a592b6c7eedc65cc47126e60489f9cc1ce3ed7e
+  languageName: node
+  linkType: hard
+
 "semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8":
   version: 7.5.1
   resolution: "semver@npm:7.5.1"
@@ -16980,6 +17442,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"update-browserslist-db@npm:^1.0.16":
+  version: 1.1.0
+  resolution: "update-browserslist-db@npm:1.1.0"
+  dependencies:
+    escalade: "npm:^3.1.2"
+    picocolors: "npm:^1.0.1"
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: 10/d70b9efeaf4601aadb1a4f6456a7a5d9118e0063d995866b8e0c5e0cf559482671dab6ce7b079f9536b06758a344fbd83f974b965211e1c6e8d1958540b0c24c
+  languageName: node
+  linkType: hard
+
 "uqr@npm:^0.1.2":
   version: 0.1.2
   resolution: "uqr@npm:0.1.2"
diff --git a/examples/nextjs-page-router/README.md b/examples/nextjs-page-router/README.md
index a75ac5248..a5158a864 100644
--- a/examples/nextjs-page-router/README.md
+++ b/examples/nextjs-page-router/README.md
@@ -1,5 +1,16 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
+> **_NOTE:_** We maintain this example on Next 13 intentionally to demo some of the nuances of
+> importing and using the Widget in the Pages and App router for Next.js 13. 
+> Usage gets easier when using Next 14 - so if you are in a position to it is advisable 
+> to use Next 14 rather than Next 13. See `examples/nextjs` example for Next 14 usage
+
+Examples can be seen on the following paths
+
+- http://localhost:3000/ - the shows the use of \<ClientOnly \/\> to import and used the Widget in the App Router
+- http://localhost:3000/pages-example - the shows the use of \<ClientOnly \/\> to import and used the Widget in the Pages Router
+- http://localhost:3000/dynamic-import - the shows the use of `next/dynamic` API to import and use the Widget
+
 ## Getting Started
 
 First, run the development server:
diff --git a/examples/nextjs-page-router/app/favicon.ico b/examples/nextjs-page-router/app/favicon.ico
new file mode 100644
index 000000000..718d6fea4
Binary files /dev/null and b/examples/nextjs-page-router/app/favicon.ico differ
diff --git a/examples/nextjs-page-router/app/globals.css b/examples/nextjs-page-router/app/globals.css
new file mode 100644
index 000000000..e9349a054
--- /dev/null
+++ b/examples/nextjs-page-router/app/globals.css
@@ -0,0 +1,101 @@
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
diff --git a/examples/nextjs-page-router/app/layout.tsx b/examples/nextjs-page-router/app/layout.tsx
new file mode 100644
index 000000000..a965cd429
--- /dev/null
+++ b/examples/nextjs-page-router/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/nextjs-page-router/app/page.tsx b/examples/nextjs-page-router/app/page.tsx
new file mode 100644
index 000000000..603367c74
--- /dev/null
+++ b/examples/nextjs-page-router/app/page.tsx
@@ -0,0 +1,25 @@
+import { Widget } from '@/components/Widget';
+import type { WidgetConfig } from '@lifi/widget';
+
+// NOTE: The WidgetSkeleton component can not be used currently in Next 13 with the App Router
+// as it currently produces some errors
+//  - it can be used with the pages router in Next 13 - see pages/pages-example
+//  - and it can be used in both the App and Page router in Next 14 - see the nextjs example.
+//    upgrading to Next 14 is advisable.
+export default function Home() {
+  const config = {
+    appearance: 'light',
+    theme: {
+      container: {
+        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
+        borderRadius: '16px',
+      },
+    },
+  } as Partial<WidgetConfig>;
+
+  return (
+    <main>
+      <Widget config={config} fallback={<p>loading...</p>} />
+    </main>
+  );
+}
diff --git a/examples/nextjs-page-router/components/ClientOnly.tsx b/examples/nextjs-page-router/components/ClientOnly.tsx
new file mode 100644
index 000000000..c9859e843
--- /dev/null
+++ b/examples/nextjs-page-router/components/ClientOnly.tsx
@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from 'react';
+import { useHydrated } from '../hooks/useHydrated';
+
+interface ClientOnlyProps extends PropsWithChildren {
+  fallback?: React.ReactNode;
+}
+
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ */
+export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+  const hydrated = useHydrated();
+  return hydrated ? children : fallback;
+}
diff --git a/examples/nextjs-page-router/components/DynamicImportWidget.tsx b/examples/nextjs-page-router/components/DynamicImportWidget.tsx
new file mode 100644
index 000000000..9a316f4d2
--- /dev/null
+++ b/examples/nextjs-page-router/components/DynamicImportWidget.tsx
@@ -0,0 +1,18 @@
+import type { WidgetConfig } from '@lifi/widget';
+import { LiFiWidget } from '@lifi/widget';
+
+// NOTE: this example of the widget is for use with the nexts next/dynamic api
+// see pages/dynamic-import.tsx for usage
+export default function DynamicImportWidget() {
+  const config = {
+    appearance: 'light',
+    theme: {
+      container: {
+        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
+        borderRadius: '16px',
+      },
+    },
+  } as Partial<WidgetConfig>;
+
+  return <LiFiWidget config={config} integrator="nextjs-example" />;
+}
diff --git a/examples/nextjs-page-router/components/Widget.tsx b/examples/nextjs-page-router/components/Widget.tsx
index 5b88ac795..9b6eee0a8 100644
--- a/examples/nextjs-page-router/components/Widget.tsx
+++ b/examples/nextjs-page-router/components/Widget.tsx
@@ -1,16 +1,21 @@
+'use client';
+
 import type { WidgetConfig } from '@lifi/widget';
 import { LiFiWidget } from '@lifi/widget';
+import { ReactNode } from 'react';
+import { ClientOnly } from './ClientOnly';
 
-export default function Widget() {
-  const config = {
-    appearance: 'light',
-    theme: {
-      container: {
-        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
-        borderRadius: '16px',
-      },
-    },
-  } as Partial<WidgetConfig>;
+interface WidgetProps {
+  fallback: ReactNode;
+  config: Partial<WidgetConfig>;
+}
 
-  return <LiFiWidget config={config} integrator="nextjs-example" />;
+export function Widget({ config, fallback }: WidgetProps) {
+  return (
+    <main>
+      <ClientOnly fallback={fallback}>
+        <LiFiWidget config={config} integrator="nextjs-example" />
+      </ClientOnly>
+    </main>
+  );
 }
diff --git a/examples/nextjs-page-router/hooks/useHydrated.ts b/examples/nextjs-page-router/hooks/useHydrated.ts
new file mode 100644
index 000000000..642f0eae2
--- /dev/null
+++ b/examples/nextjs-page-router/hooks/useHydrated.ts
@@ -0,0 +1,20 @@
+import { useSyncExternalStore } from 'react';
+
+function subscribe() {
+  return () => {};
+}
+
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * When doing Server-Side Rendering, the result will always be false.
+ * When doing Client-Side Rendering, the result will always be false on the
+ * first render and true from then on. Even if a new component renders it will
+ * always start with true.
+ */
+export function useHydrated() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  );
+}
diff --git a/examples/nextjs-page-router/next.config.js b/examples/nextjs-page-router/next.config.js
index 91ef62f0d..325fc884c 100644
--- a/examples/nextjs-page-router/next.config.js
+++ b/examples/nextjs-page-router/next.config.js
@@ -1,6 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  webpack: (config) => {
+    config.resolve.fallback = { fs: false, net: false, tls: false };
+    config.externals.push('pino-pretty', 'lokijs', 'encoding');
+    return config;
+  },
   reactStrictMode: true,
+  swcMinify: true,
 };
 
 module.exports = nextConfig;
diff --git a/examples/nextjs-page-router/pages/dynamic-import.tsx b/examples/nextjs-page-router/pages/dynamic-import.tsx
new file mode 100644
index 000000000..3f1793fc7
--- /dev/null
+++ b/examples/nextjs-page-router/pages/dynamic-import.tsx
@@ -0,0 +1,25 @@
+import { Inter } from 'next/font/google';
+
+import dynamic from 'next/dynamic';
+
+// NOTE: This is how we previously embedded the Widget
+// - We now recommend using the <ClientOnly/> component see the pages/pages-example.tsx
+// - This technique has still been useful for importing the Widget using the Pages Router
+//   while we have been transitioning to our code in version 3 of Widget
+const DynamicWidget = dynamic(
+  () => import('@/components/DynamicImportWidget'),
+  {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  },
+);
+
+const inter = Inter({ subsets: ['latin'] });
+
+export default function DynamicImportPage() {
+  return (
+    <main>
+      <DynamicWidget />
+    </main>
+  );
+}
diff --git a/examples/nextjs-page-router/pages/index.tsx b/examples/nextjs-page-router/pages/index.tsx
deleted file mode 100644
index c56fab7aa..000000000
--- a/examples/nextjs-page-router/pages/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import styles from '@/styles/Home.module.css';
-import { Inter } from 'next/font/google';
-
-import dynamic from 'next/dynamic';
-
-const DynamicWidget = dynamic(() => import('@/components/Widget'), {
-  loading: () => <p>Loading...</p>,
-  ssr: false,
-});
-
-const inter = Inter({ subsets: ['latin'] });
-
-export default function Home() {
-  return (
-    <main className={`${styles.main} ${inter.className}`}>
-      <DynamicWidget />
-    </main>
-  );
-}
diff --git a/examples/nextjs-page-router/pages/pages-example.tsx b/examples/nextjs-page-router/pages/pages-example.tsx
new file mode 100644
index 000000000..a0ef6fc4b
--- /dev/null
+++ b/examples/nextjs-page-router/pages/pages-example.tsx
@@ -0,0 +1,24 @@
+import { Widget } from '@/components/Widget';
+import type { WidgetConfig } from '@lifi/widget';
+import { WidgetSkeleton } from '@lifi/widget';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export default function PagesExample() {
+  const config = {
+    appearance: 'light',
+    theme: {
+      container: {
+        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
+        borderRadius: '16px',
+      },
+    },
+  } as Partial<WidgetConfig>;
+
+  return (
+    <main>
+      <Widget config={config} fallback={<WidgetSkeleton config={config} />} />
+    </main>
+  );
+}
diff --git a/examples/nextjs-page-router/styles/Home.module.css b/examples/nextjs-page-router/styles/Home.module.css
deleted file mode 100644
index cca6319cf..000000000
--- a/examples/nextjs-page-router/styles/Home.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md
index c4033664f..2dcf3438b 100644
--- a/examples/nextjs/README.md
+++ b/examples/nextjs/README.md
@@ -1,5 +1,15 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
+> **_NOTE:_** If you are using Next 13 be sure to look at the examples in `examples/nextjs-page-router` 
+> which have been written with Next.js 13 specifically in mind.
+
+Examples can be seen on the following paths
+
+- http://localhost:3000/ - the shows the use of \<ClientOnly \/\> to import and used the Widget in the App Router
+- http://localhost:3000/pages-example - the shows the use of \<ClientOnly \/\> to import and used the Widget in the Pages Router
+- http://localhost:3000/dynamic-import - the shows the use of `next/dynamic` API to import and use the Widget
+
+
 ## Getting Started
 
 First, run the development server:
diff --git a/examples/nextjs/app/page.module.css b/examples/nextjs/app/page.module.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/nextjs/components/PagesWidget.tsx b/examples/nextjs/components/PagesWidget.tsx
new file mode 100644
index 000000000..ccff40cda
--- /dev/null
+++ b/examples/nextjs/components/PagesWidget.tsx
@@ -0,0 +1,16 @@
+import type { WidgetConfig } from '@lifi/widget';
+import { LiFiWidget } from '@lifi/widget';
+
+export default function PagesWidget() {
+  const config = {
+    appearance: 'light',
+    theme: {
+      container: {
+        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
+        borderRadius: '16px',
+      },
+    },
+  } as Partial<WidgetConfig>;
+
+  return <LiFiWidget config={config} integrator="nextjs-example" />;
+}
diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js
index 5626eacbc..325fc884c 100644
--- a/examples/nextjs/next.config.js
+++ b/examples/nextjs/next.config.js
@@ -3,9 +3,10 @@ const nextConfig = {
   webpack: (config) => {
     config.resolve.fallback = { fs: false, net: false, tls: false };
     config.externals.push('pino-pretty', 'lokijs', 'encoding');
-    // config.externals.push('pino-pretty');
     return config;
   },
+  reactStrictMode: true,
+  swcMinify: true,
 };
 
 module.exports = nextConfig;
diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
new file mode 100644
index 000000000..021681f4d
--- /dev/null
+++ b/examples/nextjs/pages/_app.tsx
@@ -0,0 +1,6 @@
+import '@/styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/examples/nextjs/pages/_document.tsx b/examples/nextjs/pages/_document.tsx
new file mode 100644
index 000000000..54e8bf3e2
--- /dev/null
+++ b/examples/nextjs/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/examples/nextjs/pages/dynamic-import.tsx b/examples/nextjs/pages/dynamic-import.tsx
new file mode 100644
index 000000000..6838390b4
--- /dev/null
+++ b/examples/nextjs/pages/dynamic-import.tsx
@@ -0,0 +1,20 @@
+import { Inter } from 'next/font/google';
+
+import dynamic from 'next/dynamic';
+
+// NOTE: This is how we previously embedded the Widget
+// - We now recommend using the <ClientOnly/> component see the pages/pages-example.tsx where possible
+const DynamicImport = dynamic(() => import('@/components/PagesWidget'), {
+  loading: () => <p>Loading...</p>,
+  ssr: false,
+});
+
+const inter = Inter({ subsets: ['latin'] });
+
+export default function DynamicImportPage() {
+  return (
+    <main>
+      <DynamicImport />
+    </main>
+  );
+}
diff --git a/examples/nextjs/pages/pages-example.tsx b/examples/nextjs/pages/pages-example.tsx
new file mode 100644
index 000000000..a354165ee
--- /dev/null
+++ b/examples/nextjs/pages/pages-example.tsx
@@ -0,0 +1,12 @@
+import { Widget } from '@/components/Widget';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export default function PagesExample() {
+  return (
+    <main>
+      <Widget />
+    </main>
+  );
+}
diff --git a/examples/nextjs/styles/globals.css b/examples/nextjs/styles/globals.css
new file mode 100644
index 000000000..d4f491e15
--- /dev/null
+++ b/examples/nextjs/styles/globals.css
@@ -0,0 +1,107 @@
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json
index af8d3129a..021b40949 100644
--- a/examples/nextjs/tsconfig.json
+++ b/examples/nextjs/tsconfig.json
@@ -26,7 +26,8 @@
       "@/*": [
         "./*"
       ]
-    }
+    },
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
diff --git a/examples/remix/app/components/Fallback.tsx b/examples/remix/app/components/Fallback.tsx
deleted file mode 100644
index 32ebeaaab..000000000
--- a/examples/remix/app/components/Fallback.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function Fallback() {
-  return <div style={{ textAlign: 'center' }}>Loading...</div>;
-}
diff --git a/examples/remix/app/components/LiFiWidget.tsx b/examples/remix/app/components/LiFiWidget.tsx
index c13963edd..465f0b537 100644
--- a/examples/remix/app/components/LiFiWidget.tsx
+++ b/examples/remix/app/components/LiFiWidget.tsx
@@ -1,5 +1,5 @@
+import { type WidgetConfig, WidgetSkeleton } from '@lifi/widget';
 import { Suspense, lazy } from 'react';
-import { Fallback } from './Fallback';
 
 const LiFiWidgetLazy = lazy(async () => {
   const module = await import('@lifi/widget');
@@ -8,19 +8,19 @@ const LiFiWidgetLazy = lazy(async () => {
 });
 
 export function LiFiWidget() {
+  const config = {
+    appearance: 'light',
+    theme: {
+      container: {
+        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
+        borderRadius: '16px',
+      },
+    },
+  } as Partial<WidgetConfig>;
+
   return (
-    <Suspense fallback={<Fallback />}>
-      <LiFiWidgetLazy
-        config={{
-          theme: {
-            container: {
-              boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
-              borderRadius: '16px',
-            },
-          },
-        }}
-        integrator="remix-example"
-      />
+    <Suspense fallback={<WidgetSkeleton config={config} />}>
+      <LiFiWidgetLazy config={config} integrator="remix-example" />
     </Suspense>
   );
 }
diff --git a/examples/remix/app/routes/$.tsx b/examples/remix/app/routes/$.tsx
index 0a79f144e..571c3f7dd 100644
--- a/examples/remix/app/routes/$.tsx
+++ b/examples/remix/app/routes/$.tsx
@@ -1,9 +1,6 @@
 import { ClientOnly } from 'remix-utils/client-only';
-import { Fallback } from '../components/Fallback';
 import { LiFiWidget } from '../components/LiFiWidget';
 
 export default function Index() {
-  return (
-    <ClientOnly fallback={<Fallback />}>{() => <LiFiWidget />}</ClientOnly>
-  );
+  return <ClientOnly>{() => <LiFiWidget />}</ClientOnly>;
 }
diff --git a/examples/remix/app/routes/_index.tsx b/examples/remix/app/routes/_index.tsx
index 0a79f144e..571c3f7dd 100644
--- a/examples/remix/app/routes/_index.tsx
+++ b/examples/remix/app/routes/_index.tsx
@@ -1,9 +1,6 @@
 import { ClientOnly } from 'remix-utils/client-only';
-import { Fallback } from '../components/Fallback';
 import { LiFiWidget } from '../components/LiFiWidget';
 
 export default function Index() {
-  return (
-    <ClientOnly fallback={<Fallback />}>{() => <LiFiWidget />}</ClientOnly>
-  );
+  return <ClientOnly>{() => <LiFiWidget />}</ClientOnly>;
 }
diff --git a/examples/vite/src/components/WalletHeader.tsx b/examples/vite/src/components/WalletHeader.tsx
index 8beb88196..ab0eede76 100644
--- a/examples/vite/src/components/WalletHeader.tsx
+++ b/examples/vite/src/components/WalletHeader.tsx
@@ -25,8 +25,7 @@ export function WalletHeader() {
           <Button
             variant="contained"
             disableElevation
-            // onClick={handleDisconnect}
-            onClick={() => connectAsync({ connector: connectors[0] })}
+            onClick={() => connectAsync({ connector: connectors[1] })}
           >
             Connect
           </Button>
diff --git a/packages/widget/src/components/Step/StepTimer.tsx b/packages/widget/src/components/Step/StepTimer.tsx
index be7b0f163..31a48bdff 100644
--- a/packages/widget/src/components/Step/StepTimer.tsx
+++ b/packages/widget/src/components/Step/StepTimer.tsx
@@ -1,7 +1,8 @@
 import type { LiFiStepExtended } from '@lifi/sdk';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useTimer } from 'react-timer-hook';
+import pkg from 'react-timer-hook';
+const { useTimer } = pkg;
 
 const getExpiryTimestamp = (step: LiFiStepExtended) =>
   new Date(
diff --git a/packages/widget/src/i18n/i18next.d.ts b/packages/widget/src/i18n/i18next.d.ts
index 4b126fb20..7cc174395 100644
--- a/packages/widget/src/i18n/i18next.d.ts
+++ b/packages/widget/src/i18n/i18next.d.ts
@@ -1,4 +1,4 @@
-import en from './en.json';
+import en from './en.json' assert { type: 'json' };
 
 const defaultResource = { translation: en };
 
diff --git a/packages/widget/src/i18n/index.ts b/packages/widget/src/i18n/index.ts
index f0c44c173..36e53e293 100644
--- a/packages/widget/src/i18n/index.ts
+++ b/packages/widget/src/i18n/index.ts
@@ -1,17 +1,17 @@
-import bn from './bn.json';
-import de from './de.json';
-import en from './en.json';
-import es from './es.json';
-import fr from './fr.json';
-import id from './id.json';
-import it from './it.json';
-import ja from './ja.json';
-import ko from './ko.json';
-import pt from './pt.json';
-import th from './th.json';
-import tr from './tr.json';
-import uk from './uk.json';
-import vi from './vi.json';
-import zh from './zh.json';
+import bn from './bn.json' assert { type: 'json' };
+import de from './de.json' assert { type: 'json' };
+import en from './en.json' assert { type: 'json' };
+import es from './es.json' assert { type: 'json' };
+import fr from './fr.json' assert { type: 'json' };
+import id from './id.json' assert { type: 'json' };
+import it from './it.json' assert { type: 'json' };
+import ja from './ja.json' assert { type: 'json' };
+import ko from './ko.json' assert { type: 'json' };
+import pt from './pt.json' assert { type: 'json' };
+import th from './th.json' assert { type: 'json' };
+import tr from './tr.json' assert { type: 'json' };
+import uk from './uk.json' assert { type: 'json' };
+import vi from './vi.json' assert { type: 'json' };
+import zh from './zh.json' assert { type: 'json' };
 
 export { bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh };