usehooks-ts
usehooks-ts copied to clipboard
juliencrn
I need a "appropriate loader"
Hello!
I'm using a create-react-app (react ^17.0.2) and a storybook (^6.3.4) If I'm trying to use the useLocalStorage hook, my storybooks fails (all my development is done in the storybook).
I get this error:
ERROR in ./node_modules/usehooks-ts/dist/esm/useElementSize/useElementSize.js 11:23
Module parse failed: Unexpected token (11:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const handleSize = useCallback(() => {
| setSize({
> width: ref?.offsetWidth || 0,
| height: ref?.offsetHeight || 0,
| });
@ ./node_modules/usehooks-ts/dist/esm/useElementSize/index.js 1:0-61 1:0-61 2:0-33 2:0-33
@ ./node_modules/usehooks-ts/dist/esm/index.js
@ ./src/layouts/notes/notes.tsx
@ ./src/layouts/notes/notes.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./generated-stories-entry.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
ERROR in ./node_modules/usehooks-ts/dist/esm/useScript/useScript.js 17:23
Module parse failed: Unexpected token (17:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| document.body.appendChild(script);
| const setAttributeFromEvent = (event) => {
> script?.setAttribute('data-status', event.type === 'load' ? 'ready' : 'error');
| };
| script.addEventListener('load', setAttributeFromEvent);
@ ./node_modules/usehooks-ts/dist/esm/useScript/index.js 1:0-51 1:0-51 2:0-28 2:0-28
@ ./node_modules/usehooks-ts/dist/esm/index.js
@ ./src/layouts/notes/notes.tsx
@ ./src/layouts/notes/notes.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./generated-stories-entry.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
ERROR in ./node_modules/usehooks-ts/dist/esm/useLocalStorage/useLocalStorage.js 45:69
Module parse failed: Unexpected token (45:69)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function parseJSON(value) {
| try {
> return value === 'undefined' ? undefined : JSON.parse(value ?? '');
| }
| catch (error) {
@ ./node_modules/usehooks-ts/dist/esm/useLocalStorage/index.js 1:0-63 1:0-63 2:0-34 2:0-34
@ ./node_modules/usehooks-ts/dist/esm/index.js
@ ./src/layouts/notes/notes.tsx
@ ./src/layouts/notes/notes.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./generated-stories-entry.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
ERROR in ./node_modules/usehooks-ts/dist/esm/useOnClickOutside/useOnClickOutside.js 4:23
Module parse failed: Unexpected token (4:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function useOnClickOutside(ref, handler, mouseEvent = 'mousedown') {
| useEventListener(mouseEvent, event => {
> const el = ref?.current;
| if (!el || el.contains(event.target)) {
| return;
@ ./node_modules/usehooks-ts/dist/esm/useOnClickOutside/index.js 1:0-67 1:0-67 2:0-36 2:0-36
@ ./node_modules/usehooks-ts/dist/esm/index.js
@ ./src/layouts/notes/notes.tsx
@ ./src/layouts/notes/notes.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./generated-stories-entry.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
ERROR in ./node_modules/usehooks-ts/dist/esm/useIntersectionObserver/useIntersectionObserver.js 4:25
Module parse failed: Unexpected token (4:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false, }) {
| const [entry, setEntry] = useState();
> const frozen = entry?.isIntersecting && freezeOnceVisible;
| const updateEntry = ([entry]) => {
| setEntry(entry);
@ ./node_modules/usehooks-ts/dist/esm/useIntersectionObserver/index.js 1:0-79 1:0-79 2:0-42 2:0-42
@ ./node_modules/usehooks-ts/dist/esm/index.js
@ ./src/layouts/notes/notes.tsx
@ ./src/layouts/notes/notes.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./generated-stories-entry.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
ERROR in ./node_modules/usehooks-ts/dist/esm/useCopyToClipboard/useCopyToClipboard.js 5:23
Module parse failed: Unexpected token (5:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const [copiedText, setCopiedText] = useState(null);
| const copy = async (text) => {
> if (!navigator?.clipboard) {
| console.warn('Clipboard not supported');
| return false;
@ ./node_modules/usehooks-ts/dist/esm/useCopyToClipboard/index.js 1:0-69 1:0-69 2:0-37 2:0-37
@ ./node_modules/usehooks-ts/dist/esm/index.js
@ ./src/layouts/notes/notes.tsx
@ ./src/layouts/notes/notes.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./generated-stories-entry.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
ERROR in ./node_modules/usehooks-ts/dist/esm/useEventListener/useEventListener.js 5:38
Module parse failed: Unexpected token (5:38)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const savedHandler = useRef();
| useEffect(() => {
> const targetElement = element?.current || window;
| if (!(targetElement && targetElement.addEventListener)) {
| return;
@ ./node_modules/usehooks-ts/dist/esm/useEventListener/index.js 1:0-65 1:0-65 2:0-35 2:0-35
@ ./node_modules/usehooks-ts/dist/esm/index.js
@ ./src/layouts/notes/notes.tsx
@ ./src/layouts/notes/notes.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./generated-stories-entry.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
ERROR in ./node_modules/usehooks-ts/dist/esm/useDarkMode/useDarkMode.js 7:80
Module parse failed: Unexpected token (7:80)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function useDarkMode(defaultValue) {
| const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);
> const [isDarkMode, setDarkMode] = useLocalStorage('darkMode', defaultValue ?? isDarkOS ?? false);
| useUpdateEffect(() => {
| setDarkMode(isDarkOS);
@ ./node_modules/usehooks-ts/dist/esm/useDarkMode/index.js 1:0-55 1:0-55 2:0-30 2:0-30
@ ./node_modules/usehooks-ts/dist/esm/index.js
@ ./src/layouts/notes/notes.tsx
@ ./src/layouts/notes/notes.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./generated-stories-entry.js
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Do you know why? And how I can solve it?
Thanks!
Hello @tilnea,
Thanks for your bug report (:
It's maybe because of useHooks upgrades to ES module in the 2.2.2. You can try to delete your node_modules and re-install all, like is mentioned here.
Also, does your config using storybook support ESM?
You can be back to [email protected], but I think it should work.
here
Hi, thanks for your fast response!
Yes, I did try deleting it all and re-install.
What I can see is "Storybook gained an experimental --modern mode and is now publishing modern ES modules." in v 6.3. I cannot find anything where I can config this.. But I also read this "Component Story Format (CSF) is the recommended way to write stories. It's an open standard based on ES6 modules that is portable beyond Storybook."
I'm not sure if I'm answering your question here.
But, it worked with 2.2.1, so maybe that implies that my storybook don't support ESM?
Hi, I just saw that Storybook supported ESM since 6.3 too, and you need at least node@12 and webpack@5 to work with ESM.
I think you can still write CSF stories, but the piece of code you want to test could include packages using ESM, and there is more and more ESM nowadays.
Could you create a minimal reproduction of your pb for me to could help you? Or else, share your package.json, I wanna catch it (:
Happened to me using Sanity CMS as well.
I've been lazy and just fixed the version to 2.1.1.
It's ok to get going for me at the moment.
Would also like to see this reverted if possible. Not all tooling is ready for ESM only modules.
Got the same issue but with a CRA + react-admin stack:
./node_modules/usehooks-ts/dist/esm/useIntersectionObserver/useIntersectionObserver.js 11:23
Module parse failed: Unexpected token (11:23)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| } = _ref;
| const [entry, setEntry] = useState();
> const frozen = entry?.isIntersecting && freezeOnceVisible;
|
| const updateEntry = _ref2 => {
Going back to v2.1.1 "solves" the issue.
I will work on this.
Technical, the update doesn't upgrade the package to an only ESM module, the commonjs version is still compiled.
Currently, I'm not sure where is the real problem, maybe in the project's configuration, maybe in the usehooks-ts package, maybe in the migration from v2.1.1. I prefer do not to revert but find why there is these bug and fix them properly.
You could indeed still use the v2.1.1 version, waiting for the fix.
I take you updated here asap.
Hi,
unpkg.com may be useful for comparing the builds of different versions:
https://unpkg.com/browse/[email protected]/dist/ https://unpkg.com/browse/[email protected]/dist/ https://unpkg.com/browse/[email protected]/dist/
The ESM build was automatically picked up by Webpack here and caused some breakage. It's not common to transpile node_modules so I'd have thought the ESM build should be transpiled.
(There are also some untranspiled files under dist/cjs fyi, but I haven't looked at those in detail.)
Hi everyone, I made some tests and did some researches and I think we have to move to a clean ESM-only package.
Here is why:
- ESM is supported since node@12 and node@10 is now obsolete. And here, we only use this package in modern React apps (at least [email protected]), not is old
nodejsprojects. - ESM is necessary for a library like
useHooks, indeed, there are some hooks' quantity, and you don't want to include all of them in your production bundle if you only use some ones. With ESM, we can do it well on top of the tree-shaking feature. - I wanted a smooth transition from
cjstoesmusing the dual build (ESM with a build step that transpiles aCommonJSfallback). But it seems to cause a lot of bugs, and we aren't alone (Dual packages have their own problems.). - Additionally, this library only exists as an npm package since few months (#26). So the migration should be reasonable.
Thus, I think to follow Sindre Sorhus and contribute to moving forward the JS ecosystem using only ESM.
I would recommend you to move to ESM too, and if you don't want, you can still use the 2.2.1 version. ¯\(ツ)/¯
Here you can find an upgrade guide:
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
Hi, any progress on this? We're using create-react-app with typescript, and usehooks-ts 2.4.2 doesn't work (2.2.1 does).
I would be happy with 2.2.1 but it'd be great if we didn't have to stick to a specific version.
./node_modules/usehooks-ts/dist/esm/useEventListener/useEventListener.js 10:34
Module parse failed: Unexpected token (10:34)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| }, [handler]);
| useEffect(() => {
> const targetElement = element?.current || window;
|
| if (!(targetElement && targetElement.addEventListener)) {
@juliencrn but that doesn't change fact that many people can just update project to esm... is there any issue with cjs and the double build?
@juliencrn From the gist you linked Create React App doesn't yet support full ESM. It seems counter productive to publish a react library that isn't compatible with CRA which is probably the most used react setup. I'd love to use this library but I think it is a bit much to ask everyone to eject their CRA apps just to utilize it.
@jamestenglish, like this thread describe it, there are some cases where we are ESM compatibility issues.
But useHooks-ts works like a charm with default CRA.
If someone knows how to fix it or want to give a try to make this library CJS/ESM compatible, it is really welcome.
I think a double build with a correct CJS/ESM detection in the package.json could be good, but each time I try to make it, I'm not able to make it working well on both environments.
A very important point to keep in mind is keeping the tree-shaking functionality working, I don't want to load a ton of JS if your feature only requires some hooks.
Breaking change is this case is ok, we will publish a v3 when this bug will be fixed.
Hi everyone, I've made a test package with a hybrid build esm/cjs using babel. I've made some tests using hardhat (cjs), ESM (cra, gatsby) and it works too with webpack and storybook.
Currently, there are two output:
- transpiled unbundled commonjs
- transpiled unbundled ES module
If necessary (IDK), we could add a bundled ESM version and an AMD/UMD too.
I've added a temporary utility function isEsm(): boolean at the root to give us feedback to help to test.
You could test it using test-usehooks-ts instead of usehooks-ts.
And obviously, if you have any feedback, it is more than welcome!!
Develop branch: https://github.com/juliencrn/usehooks-ts/tree/feature/esm-cjs Test package: https://www.npmjs.com/package/test-usehooks-ts
Hi, just tried it - no, it doesn't seem to help.
I did
npm install test-usehooks-ts
npm remove usehooks-ts
I also updated the imports etc. I even deleted node_modules and did a fresh npm install. I still get:
./node_modules/test-usehooks-ts/dist/esm/useIntersectionObserver/useIntersectionObserver.js 10:23
Module parse failed: Unexpected token (10:23)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| } = _ref;
| const [entry, setEntry] = useState();
> const frozen = entry?.isIntersecting && freezeOnceVisible;
|
| const updateEntry = _ref2 => {
HI @trombipeti, thanks for feedback, please could you tell me more about your dependencies and versions such as showing your package.json.
There you go
{
"name": "...",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/lab": "^5.0.0-alpha.77",
"@mui/material": "^5.6.1",
"@testing-library/jest-dom": "^5.13.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/autobahn": "^20.9.0",
"@types/jest": "^26.0.23",
"@types/lodash.debounce": "^4.0.6",
"@types/node": "^12.20.14",
"@types/react": "^17.0.9",
"@types/react-dom": "^17.0.6",
"allotment": "^1.11.1",
"autobahn": "^20.9.2",
"bootstrap": "^5.1.3",
"i18next": "^21.6.11",
"lodash.debounce": "^4.0.8",
"react": "^17.0.2",
"react-bootstrap": "^2.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.4",
"react-scripts": "^4.0.3",
"react-select": "^5.2.1",
"typescript": "^4.3.2",
"usehooks-ts": "~2.2.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"extract": "i18next 'src/**/*.{ts,tsx}'"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"plugins": [
"i18next"
],
"rules": {
"i18next/no-literal-string": [
1,
{
"markupOnly": true,
"ignoreAttribute": [
"placement"
]
}
]
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-plugin-i18next": "^5.1.2",
"i18next-parser": "^5.4.0"
}
}
@juliencrn is there anything i can do to test this out? I'd like to help solve as its related to #162 and i'm using nextjs in esm mode
Shouldn't all the files in esm folder be generated with mts or mjs since the package.json doesn't specify type: "module"?
Hi @ShravanSunder,
You can test the hybrid version replacing usehooks-ts by test-usehooks-ts.
Hmm, files are still in .js, but they are created twice in dist/esm/*.js and dist/cjs/*.js. I think it could work, maybe I'm wrong.
@juliencrn i manually tried to change the package.json to the following for a test:
"main": "./dist/esm/index.js",
"module": "./dist/esm/index.js",
"types": "./dist/esm/index.d.ts",
"type": "module",
it looks like now the module is being loaded as esm. However there's another issue due to the export used
unhandledRejection: Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import
'/Users/shravansunder/Documents/dev/open-source/ethereum/scaffold-eth/scaffold-eth-typescript/packages/nextjs-app-ts/node_modules/usehooks-ts/dist/esm/useBoolean' is not supported resolving ES modules imported from
/Users/shravansunder/Documents/dev/open-source/ethereum/scaffold-eth/scaffold-eth-typescript/packages/nextjs-app-ts/node_modules/usehooks-ts/dist/esm/index.js
i think we would need to use extensions in the import / export to make it work with esm. i.e. import './folder/file.js'
For example in esm
import { a, b } from './stuff/index.js'
// If you have multiple named exports, you need to import like this.
import * as a from './a.js';
see: https://stackoverflow.com/a/68621282/2696641
if i change the exports to esm specification they seem to work. i.e. export * from './useBoolean/index.js'; in esm/index.js
@juliencrn So good news test-usehooks-ts works with my nextjs esm app. The esm-cjs branch seems to produce esm and the app is using it as esm :)
Is it possible to release it as beta in usehooks-ts its rather inconvenient and error to change package names in the code. thanks for all the hard work!
Hi @ShravanSunder, thanks for your help 🙌
if i change the exports to esm specification they seem to work. i.e. export * from './useBoolean/index.js'; in esm/index.js
Good to know, but we don't really want to have to put the extension in the import you know. Maybe renaming the transpilled files to mjs could fix it you told? It was with which codebase? The current package or test-usehooks-ts ?
So good news test-usehooks-ts works with my nextjs esm app. The esm-cjs branch seems to produce esm and the app is using it as esm :)
Super cool, it was the goal 😎
Is it possible to release it as beta in usehooks-ts its rather inconvenient and error to change package names in the code. thanks for all the hard work!
Yes, we will do it, it's better indeed.
Hi @ShravanSunder, thanks for your help 🙌
if i change the exports to esm specification they seem to work. i.e. export * from './useBoolean/index.js'; in esm/index.js
Good to know, but we don't really want to have to put the extension in the import you know. Maybe renaming the transpilled files to mjs could fix it you told? It was with which codebase? The current package or
test-usehooks-ts?
@juliencrn this was with usehooks-ts (the original package), but i think this was a wrong assumption in my part.
So good news test-usehooks-ts works with my nextjs esm app. The esm-cjs branch seems to produce esm and the app is using it as esm :)
Super cool, it was the goal 😎
Is it possible to release it as beta in usehooks-ts its rather inconvenient and error to change package names in the code. thanks for all the hard work!
Yes, we will do it, it's better indeed.
I do still have issues with non dynamically loaded files in nextjs with test-usehooks-ts, it seems to think that they are cjs modules when compiling in nextjs. but its a bit strange as i see the right modules delivered to the browser. i'm going to dig into this a bit more.