Skip to content

Commit

Permalink
fix: πŸ› React 18 strict mode double animation (#94)
Browse files Browse the repository at this point in the history
* fix: πŸ› React 18 strict mode double animation

* chore: πŸ€– changeset

Co-authored-by: SamuelOsborne <samu.osborne@gmail.com>
  • Loading branch information
theashraf and samuelOsborne committed May 13, 2022
1 parent 8a7a6a6 commit 32e0728
Show file tree
Hide file tree
Showing 15 changed files with 9,146 additions and 134 deletions.
5 changes: 5 additions & 0 deletions .changeset/red-clouds-help.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lottiefiles/react-lottie-player': patch
---

fix double animation with react 18 strict mode
3 changes: 1 addition & 2 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
50 changes: 14 additions & 36 deletions cypress/react-testing-pages/craco.config.js
Original file line number Diff line number Diff line change
@@ -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'),
}
}
}
]
};
9 changes: 6 additions & 3 deletions cypress/react-testing-pages/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -37,5 +37,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"craco-alias": "^3.0.1"
}
}
Loading

0 comments on commit 32e0728

Please sign in to comment.