diff --git a/lru-cache-browser-issue.md b/lru-cache-browser-issue.md deleted file mode 100644 index 785b686..0000000 --- a/lru-cache-browser-issue.md +++ /dev/null @@ -1,90 +0,0 @@ -# Issue: Top-level await with `node:diagnostics_channel` breaks browser builds in Webpack 5 - -## Description - -The latest version of `lru-cache` (v11.x) uses top-level await to dynamically import `node:diagnostics_channel`: - -```javascript -var C={hasSubscribers:!1},[S,W]=await import("node:diagnostics_channel")... -``` - -This causes issues in browser environments when building with Webpack 5, as Webpack doesn't handle the `node:` protocol scheme by default. - -## Problem - -1. **Top-level await**: The use of top-level await makes the entire module asynchronous -2. **Node.js protocol**: `node:diagnostics_channel` is not supported in browser environments -3. **Webpack 5 compatibility**: When Webpack encounters this, it either: - - Throws an `UnhandledSchemeError` for the `node:` protocol, or - - Causes the module export to become a Promise instead of the expected object - -## Impact - -When using `lru-cache` v11.x in a React application built with Webpack 5 (via Create React App / craco): - -```javascript -// Expected behavior -import { LRUCache } from 'lru-cache'; -const cache = new LRUCache({ max: 100 }); // Works - -// Actual behavior -import * as LRUCacheModule from 'lru-cache'; -console.log(LRUCacheModule); // Promise { } instead of module exports -``` - -This breaks downstream packages that depend on `lru-cache`, such as when used in `@kne/react-enum`, causing the entire module to become a Promise. - -## Environment - -- Node.js: v20.x -- Webpack: 5.x (via react-scripts 5.0.1) -- Build tool: craco 7.1.0 -- Browser target: Modern browsers (Chrome, Firefox, Safari) - -## Current Workaround - -We can configure Webpack fallbacks, but this requires additional configuration: - -```javascript -// In webpack config -webpackConfig.resolve.fallback = { - "diagnostics_channel": false -}; - -// Or create a mock module -webpackConfig.resolve.alias = { - "node:diagnostics_channel": path.resolve(__dirname, "mock-diagnostics-channel.js") -}; -``` - -However, this doesn't solve the top-level await issue. - -## Suggested Solution - -Could you consider one of the following approaches: - -1. **Conditional import**: Check for browser environment before importing `diagnostics_channel`: - ```javascript - const hasDiagnostics = typeof process !== 'undefined' && process.versions?.node; - const diagnosticsChannel = hasDiagnostics ? - await import('node:diagnostics_channel') : - { channel: () => ({ hasSubscribers: false }) }; - ``` - -2. **Browser bundle**: Provide a separate browser entry point that doesn't include Node.js-specific features - -3. **Optional peer dependency**: Make `diagnostics_channel` an optional feature that can be safely omitted in browser builds - -4. **Use synchronous import**: Avoid top-level await to prevent making the module async - -## Version Info - -- lru-cache version: 11.3.2 -- Node.js: 20.x -- Webpack: 5.x - -## Additional Context - -This issue was discovered when upgrading from lru-cache v10.x to v11.x. Version 10.x works fine in browser environments because it doesn't use `node:diagnostics_channel` or top-level await. - -Thank you for considering this issue! Let me know if you need any additional information or if I can help test a potential fix. diff --git a/package.json b/package.json index 06d4e0a..9ce314d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne-components/components-core", - "version": "0.4.69", + "version": "0.4.70", "files": [ "build" ], @@ -51,7 +51,7 @@ "@kne/use-simulation-blur": "^0.1.2", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", - "axios": "1.13.5", + "axios": "^1.13.5", "classnames": "^2.3.2", "color": "^4.2.3", "cross-env": "^7.0.3", @@ -67,7 +67,6 @@ "react-dom": "^18.3.0", "react-intl": "^6.2.10", "react-router-dom": "^6.10.0", - "react-scripts": "5.0.1", "react-sortablejs": "^6.1.4", "simplebar": "^6.3.0", "simplebar-react": "^3.3.0", @@ -101,10 +100,9 @@ ] }, "devDependencies": { - "@craco/craco": "^7.1.0", - "@kne/craco-module-federation": "^1.1.1", + "@kne/craco": "^7.1.3", "@kne/md-doc": "^0.1.16", - "@kne/modules-dev": "^2.1.23", + "@kne/modules-dev": "^2.3.0", "@kne/react-error-boundary": "^0.1.1", "antd": "6.0.0", "http-proxy-middleware": "^2.0.6", diff --git a/src/common/components/ScrollLoader/index.js b/src/common/components/ScrollLoader/index.js index 6d33b6a..889af17 100644 --- a/src/common/components/ScrollLoader/index.js +++ b/src/common/components/ScrollLoader/index.js @@ -1,4 +1,4 @@ import '@kne/scroll-loader/dist/index.css'; -export {default} from '@kne/scroll-loader'; +export {default, FetchScrollLoader} from '@kne/scroll-loader'; export * from '@kne/scroll-loader'; diff --git a/src/components/Common/index.js b/src/components/Common/index.js index 5a27735..b4e298f 100644 --- a/src/components/Common/index.js +++ b/src/components/Common/index.js @@ -2,7 +2,8 @@ export {default as changeMoneyToChinese} from "@common/utils/changeMoneyToChines export {default as getPopupContainer} from "@common/utils/getPopupContainer"; export * from "@common/utils/importantContainer"; export {default as withOSSFile} from "@common/hocs/withOSSFile"; -export {default as ScrollLoader, FetchScrollLoader} from "@common/components/ScrollLoader"; +export {default as ScrollLoader} from "@common/components/ScrollLoader"; +export {FetchScrollLoader} from "@common/components/ScrollLoader"; export {default as FetchButton} from "@common/components/FetchButton"; export {default as SimpleBar} from "@common/components/SimpleBar"; export {default as SearchInput} from "@common/components/SearchInput"; diff --git a/src/components/FormInfo/fields/PhoneNumber/index.js b/src/components/FormInfo/fields/PhoneNumber/index.js index e357672..5df57dc 100644 --- a/src/components/FormInfo/fields/PhoneNumber/index.js +++ b/src/components/FormInfo/fields/PhoneNumber/index.js @@ -1,3 +1,4 @@ import '@kne/phone-number-input/dist/index.css'; export {default} from '@kne/phone-number-input'; +export {PHONE_NUMBER_INPUT} from '@kne/phone-number-input'; export * from '@kne/phone-number-input'; diff --git a/src/components/Global/style.module.scss b/src/components/Global/style.module.scss index 3f5f49c..0c856b1 100644 --- a/src/components/Global/style.module.scss +++ b/src/components/Global/style.module.scss @@ -1,6 +1,7 @@ @import "../../common/warning-color.scss"; .container { + box-sizing: border-box; &.is-not-init { pointer-events: none; opacity: 0.7; diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index c972273..8314c8c 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -1,2 +1,3 @@ export * from '@kne/react-icon'; export {default} from '@kne/react-icon'; +export {FontLoader} from '@kne/react-icon';