I need a "appropriate loader"
See original GitHub issueHello!
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!
Issue Analytics
- State:
- Created 2 years ago
- Reactions:8
- Comments:34 (12 by maintainers)
Top Results From Across the Web
"You may need an appropriate loader to handle this file type ...
All my index.js file is doing is importing react, but it seems like the 'babel-loader' is not working. I am using 'babel-loader ......
Read more >You may need an appropriate loader to handle this file type ...
I'm having a problem configuring Webpack for Typescript and React. After running the NPM script: webpack serves ./webpack/webpack.config.ts ...
Read more >Module parse failed: Unexpected token. You may ... - GitHub
Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type, currently no loaders are configured to process...
Read more >You might need an appropriate loader to handle the file type ...
You may need an appropriate loader to handle this file type. | var tokenString = localStorage.getItem("token");. | var userToken = JSON.parse( ...
Read more >How to fix the error You may need an appropriate loader to ...
How to fix the error “You may need an appropriate loader to handle this file type, currently no loaders are configured to process...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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.