Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I need a "appropriate loader" #97

Closed
tilnea opened this issue Jan 31, 2022 · 39 comments
Closed

I need a "appropriate loader" #97

tilnea opened this issue Jan 31, 2022 · 39 comments

Comments

@tilnea
Copy link

tilnea commented Jan 31, 2022

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!

@juliencrn
Copy link
Owner

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 usehooks-ts@2.2.1, but I think it should work.

@tilnea
Copy link
Author

tilnea commented Feb 1, 2022

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?

@juliencrn
Copy link
Owner

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 (:

@a-barbieri
Copy link

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.

@SimeonGriggs
Copy link

Would also like to see this reverted if possible. Not all tooling is ready for ESM only modules.

@Kepro
Copy link

Kepro commented Feb 18, 2022

same here, can we please revert that ESM? :)

@soullivaneuh
Copy link
Contributor

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.

@juliencrn
Copy link
Owner

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.

@jpveooys
Copy link

jpveooys commented Feb 22, 2022

Hi,

unpkg.com may be useful for comparing the builds of different versions:

https://unpkg.com/browse/usehooks-ts@2.2.1/dist/
https://unpkg.com/browse/usehooks-ts@2.2.2/dist/
https://unpkg.com/browse/usehooks-ts@2.4.1/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.)

@juliencrn
Copy link
Owner

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 React@16.8), not is old nodejs projects.
  • 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 cjs to esm using the dual build (ESM with a build step that transpiles a CommonJS fallback). 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 (Publish on npm? #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

@trombipeti
Copy link

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)) {

@Kepro
Copy link

Kepro commented Mar 29, 2022

@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?

@akd-io
Copy link

akd-io commented Mar 31, 2022

Hitting this issue too. Will have to copy/paste the hooks for now.

@oliexe
Copy link

oliexe commented Apr 12, 2022

Same issue here

@jamestenglish
Copy link

@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.

@juliencrn
Copy link
Owner

@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.

@juliencrn
Copy link
Owner

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.

@juliencrn
Copy link
Owner

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

@juliencrn
Copy link
Owner

Is test-usehooks-ts solving your loader issues?

@trombipeti
Copy link

trombipeti commented May 30, 2022

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 => {

@juliencrn
Copy link
Owner

HI @trombipeti, thanks for feedback, please could you tell me more about your dependencies and versions such as showing your package.json.

@trombipeti
Copy link

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"
  }
}

@ShravanSunder
Copy link

ShravanSunder commented May 30, 2022

@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

@ShravanSunder
Copy link

Shouldn't all the files in esm folder be generated with mts or mjs since the package.json doesn't specify type: "module"?

@juliencrn
Copy link
Owner

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.

@ShravanSunder
Copy link

ShravanSunder commented May 30, 2022

@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

@ShravanSunder
Copy link

if i change the exports to esm specification they seem to work. i.e. export * from './useBoolean/index.js'; in esm/index.js

@ShravanSunder
Copy link

@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!

@juliencrn
Copy link
Owner

juliencrn commented May 31, 2022

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.

@ShravanSunder
Copy link

ShravanSunder commented May 31, 2022

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.

@ShravanSunder
Copy link

@juliencrn one thing i notices is in the babelrc file

i think for esm, the modules should be set to false or esm? i'm not sure esm is default?

module.exports = {
  env: {
    esm: shared,
    cjs: {
      ...shared,
      presets: [
        [
          '@babel/env',
          {
            modules: 'commonjs',
          },
        ],
        ...sharedPresets,
      ],
    },
  },
}

``

@juliencrn
Copy link
Owner

juliencrn commented May 31, 2022

@ShravanSunder I'm not very comfortable with babel, but it seems right: https://babeljs.io/docs/en/babel-preset-env#modules. Also, I've tested test-usehooks-ts in nextjs as well and I haven't any issues, how can I reproduce your issues?

@trombipeti I'm not able to launch a CRA using your dependencies, but upgrading to react 18, it works well

`package.json`
{
  "name": "my-app2",
  "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.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/autobahn": "^20.9.0",
    "@types/jest": "^27.5.1",
    "@types/lodash.debounce": "^4.0.6",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "allotment": "^1.11.1",
    "autobahn": "^20.9.2",
    "bootstrap": "^5.1.3",
    "i18next": "^21.6.11",
    "lodash.debounce": "^4.0.8",
    "react": "^18.1.0",
    "react-bootstrap": "^2.0.2",
    "react-dom": "^18.1.0",
    "react-i18next": "^11.15.4",
    "react-scripts": "5.0.1",
    "react-select": "^5.2.1",
    "typescript": "^4.7.2",
    "test-usehooks-ts": "latest",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
  }
}

@ShravanSunder
Copy link

@juliencrn i did some more expriments. so the test-usehooks-ts works if i import it directly, but does not if it is imported in eth-hooks.

Something in my packaging causes test-usehooks-ts to default to commonjs even though my package is esm. I'm using esbuild to package eth-hooks, so it might be related to: evanw/esbuild#2164.

i'm a bit stumped at the moment.

@trombipeti
Copy link

@juliencrn thanks for the feedback - we'll then stick with the version that's working for us for the time being. When we'll upgrade to React 18 I'll give this another go, and if it still doesn't work, I'll let you know (but hopefully it will).

So thanks again :)

@trombipeti
Copy link

The latest version (2.9.1) seems to work with React 18!

@juliencrn
Copy link
Owner

Closing this issue due to inactivity, but feel free to reopen or create a new issue if needed. Thanks!

@mikahFSmusic
Copy link

I'm running into this issue with version 3.1.0 with React 17. Can this be reopened? Here's the error I'm getting:

ERROR in ./node_modules/usehooks-ts/dist/index.js 51:72
Module parse failed: Unexpected token (51:72)
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 == null ? void 0 : element.current) ?? window;
|     if (!(targetElement && targetElement.addEventListener)) return;
|     const listener = event => {

@pkasarda
Copy link

pkasarda commented Aug 9, 2024

the issue is not react 17, please share your setup information...

@hellpirat
Copy link

hellpirat commented Sep 5, 2024

I got the same error after upgraded to v3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests