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!

[trombipeti]

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]

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.