Move to external React

esbuild.config.js

@@ -1,6 +1,5 @@
 import esbuild from 'esbuild';
 import scss from 'esbuild-plugin-sass';
-import svg from 'esbuild-plugin-svgr';
 
 const watch = process.argv.includes('--watch') && {
     onRebuild(error) {
@@ -9,6 +8,39 @@ const watch = process.argv.includes('--watch') && {
     },
 };
 
+// see https://github.com/evanw/esbuild/issues/806#issuecomment-779138268
+let skipReactImports = {
+    name: 'skipReactImports',
+    setup(build) {
+        build.onResolve({ filter: /^react(-dom)?$/ }, (args) => {
+            return {
+                path: args.path,
+                namespace: `globalExternal_${args.path}`,
+            };
+        });
+
+        build.onLoad(
+            { filter: /.*/, namespace: 'globalExternal_react' },
+            () => {
+                return {
+                    contents: `module.exports = globalThis.React`,
+                    loader: 'js',
+                };
+            }
+        );
+
+        build.onLoad(
+            { filter: /.*/, namespace: 'globalExternal_react-dom' },
+            () => {
+                return {
+                    contents: `module.exports = globalThis.ReactDOM`,
+                    loader: 'js',
+                };
+            }
+        );
+    },
+};
+
 esbuild
     .build({
         entryPoints: [
@@ -21,7 +53,8 @@ esbuild
         // minify: true,
         outdir: './lib',
         loader: { '.woff': 'file', '.woff2': 'file' },
-        plugins: [scss(), svg()],
+        plugins: [scss(), skipReactImports],
+        external: ['react', 'react-dom'],
         watch,
     })
     .then(() => console.log('Add-on was built'))

package.json

@@ -44,7 +44,6 @@
         "addons-linter": "^4.7.0",
         "esbuild": "^0.14.14",
         "esbuild-plugin-sass": "^1.0.1",
-        "esbuild-plugin-svgr": "^1.0.0",
         "web-ext": "^6.6.0",
         "web-ext-types": "^3.2.1"
     }

sidebar/sidebar.html

@@ -18,6 +18,8 @@
         rel="stylesheet"
         href="/lib/sidebar/sidebar.css"
     >
+	<script src="/node_modules/react/umd/react.production.min.js"></script>
+	<script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
     <script src="/lib/sidebar/sidebar.js"></script>
 
 </body>

sidebar/sidebar.tsx

@@ -17,14 +17,18 @@ import './global.scss';
 import './sidebar.scss';
 
 const Sidebar = () => {
+    try {
         const [origin, setOrigin] = React.useState<string | null>(null);
-    const [minValueLength, setMinValueLength] = React.useState<number | null>(
+        const [minValueLength, setMinValueLength] = React.useState<
+            number | null
+        >(
             localStorage.getItem('minValueLength') === null
                 ? 7
                 : (localStorage.getItem('minValueLength') as unknown as number)
         );
         const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
-    const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
+        const [stolenDataView, setStolenDataView] =
+            React.useState<boolean>(true);
         const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
             React.useState<boolean>(false);
         const [counter, setCounter] = useEmitter(getMemory());
@@ -77,7 +81,9 @@ const Sidebar = () => {
             <div className="sidebar">
                 <header
                     className={
-                    logoVisibility ? 'header' : 'header header--without-logo'
+                        logoVisibility
+                            ? 'header'
+                            : 'header header--without-logo'
                     }
                 >
                     <img
@@ -124,7 +130,9 @@ const Sidebar = () => {
 
                 {stolenDataView ? (
                     <nav>
-                    <button onClick={() => setStolenDataView(!stolenDataView)}>
+                        <button
+                            onClick={() => setStolenDataView(!stolenDataView)}
+                        >
                             <img
                                 src="/assets/icons/settings.svg"
                                 width="20"
@@ -185,7 +193,9 @@ const Sidebar = () => {
                                 width="20"
                                 height="20"
                             />
-                        <span>Utwórz wiadomość dla administratora witryny</span>
+                            <span>
+                                Utwórz wiadomość dla administratora witryny
+                            </span>
                         </button>
                     </nav>
                 ) : null}
@@ -196,11 +206,11 @@ const Sidebar = () => {
                             {warningDataDialogAck ? (
                                 <section className="warning-container">
                                     <span>
-                                    <strong>Uwaga!</strong> Niekoniecznie każda
-                                    przechwycona poniżej informacja jest daną
-                                    osobową. Niektóre z podanych domen mogą
-                                    należeć do właściciela strony i nie
-                                    reprezentować podmiotów trzecich.
+                                        <strong>Uwaga!</strong> Niekoniecznie
+                                        każda przechwycona poniżej informacja
+                                        jest daną osobową. Niektóre z podanych
+                                        domen mogą należeć do właściciela strony
+                                        i nie reprezentować podmiotów trzecich.
                                     </span>
                                     <button
                                         onClick={() => {
@@ -245,6 +255,9 @@ const Sidebar = () => {
                 </section>
             </div>
         );
+    } catch (e) {
+        console.error(e);
+    }
 };
-
+debugger;
 ReactDOM.render(<Sidebar />, document.getElementById('app'));