build: upgrade to webpack 5

3 files changed, 13 insertions, 3 deletions

diff --git a/src/components/Collapsible.js b/src/components/Collapsible.js
index 8edb834..d8d9313 100644
--- a/src/components/Collapsible.js
+++ b/src/components/Collapsible.js
@@ -1,7 +1,8 @@
-import { motion } from 'framer-motion';
 import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
+import { framerMotionResouce } from '../misc/motion';
+
 const { memo, useState, useRef, useEffect } = React;
 
 function usePrevious(value) {
@@ -50,6 +51,8 @@ const variantsCollpapsibleChildContainer = {
 };
 
 const Collapsible = memo(({ children, isOpen }) => {
+  const module = framerMotionResouce.read();
+  const motion = module.motion;
   const previous = usePrevious(isOpen);
   const [refToMeature, { height }] = useMeasure();
   return (
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index 29724ae..756af06 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -1,5 +1,4 @@
 import cx from 'clsx';
-import { motion } from 'framer-motion';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Info } from 'react-feather';
@@ -13,6 +12,7 @@ import {
 } from 'react-icons/fc';
 import { Link, useLocation } from 'react-router-dom';
 
+import { framerMotionResouce } from '../misc/motion';
 import { getTheme, switchTheme } from '../store/app';
 import s from './SideBar.module.css';
 import { connect } from './StateProvider';
@@ -130,6 +130,8 @@ function SideBar({ dispatch, theme }) {
 }
 
 function MoonA() {
+  const module = framerMotionResouce.read();
+  const motion = module.motion;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -153,6 +155,9 @@ function MoonA() {
 }
 
 function Sun() {
+  const module = framerMotionResouce.read();
+  const motion = module.motion;
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index 90f4ba6..fd9f942 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -1,8 +1,8 @@
 import { formatDistance } from 'date-fns';
-import { motion } from 'framer-motion';
 import * as React from 'react';
 import { RotateCw, Zap } from 'react-feather';
 
+import { framerMotionResouce } from '../../misc/motion';
 import {
   getClashAPIConfig,
   getCollapsibleIsOpen,
@@ -117,6 +117,8 @@ const arrow = {
   hover: { rotate: 360, transition: { duration: 0.3 } },
 };
 function Refresh() {
+  const module = framerMotionResouce.read();
+  const motion = module.motion;
   return (
     <motion.div
       className={s.refresh}