fix: 🐛 React 18 strict mode double animation (#94) (#95)

* fix: 🐛 React 18 strict mode double animation

* chore: 🤖 changeset

Co-authored-by: SamuelOsborne <[email protected]>

Author: theashraf

.changeset/red-clouds-help.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/react-lottie-player': patch
+---
+
+fix double animation with react 18 strict mode

babel.config.js

@@ -1,6 +1,5 @@
-const { CODE_COVERAGE } = process.env;
 const plugins = [];
-if (CODE_COVERAGE === 'true') plugins.push('istanbul');
+if (process.env.NODE_ENV === 'test') plugins.push('istanbul');
 
 module.exports = function(api) {
   api.cache(true);

cypress/react-testing-pages/craco.config.js

@@ -1,38 +1,16 @@
-const path = require('path');
-
-/* Allows importing code from other packages in a monorepo. Explanation:
-When you use lerna / yarn workspaces to import a package, you create a symlink in node_modules to
-that package's location. By default Webpack resolves those symlinks to the package's actual path,
-which makes some create-react-app plugins and compilers fail (in prod builds) because you're only
-allowed to import things from ./src or from node_modules
- */
-const disableSymlinkResolution = {
-  plugin: {
-    overrideWebpackConfig: ({ webpackConfig }) => {
-      webpackConfig.resolve.symlinks = false;
-      return webpackConfig;
-    },
-  },
-};
-
-const webpackSingleModulesResolution = {
-    configure: {
-        resolve: {
-            symlinks: false,
-            modules: [
-                path.resolve('../../dist/lottie-react.js'),
-            ],
-        },
-    },
-};
-
-const eslintOff = {
-    enable: false
-}
-
+const path = require('path')
+const CracoAlias = require("craco-alias");
 
 module.exports = {
-  plugins: [disableSymlinkResolution],
-  webpack: webpackSingleModulesResolution,
-  eslint: eslintOff
-};
+  plugins: [
+    {
+      plugin: CracoAlias,
+      options: {
+        unsafeAllowModulesOutsideOfSrc : true,
+        aliases: {
+          '@lottiefiles/react-lottie-player': path.resolve('../../dist/lottie-react.esm.js'),
+        }
+      }
+    }
+  ]
+};

cypress/react-testing-pages/package.json

@@ -7,11 +7,11 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-router": "^6.2.2",
     "react-router-dom": "^6.2.2",
-    "react-scripts": "5.0.0",
+    "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -37,5 +37,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "craco-alias": "^3.0.1"
   }
 }