I need a "appropriate loader" #97
Comments
|
Hello @tilnea, Thanks for your bug report (: It's maybe because of useHooks upgrades to ES module in the Also, does your config using storybook support ESM? You can be back to |
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.. 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 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 |
|
Happened to me using Sanity CMS as well. I've been lazy and just fixed the version to |
|
Would also like to see this reverted if possible. Not all tooling is ready for ESM only modules. |
|
same here, can we please revert that ESM? :) |
|
Got the same issue but with a CRA + react-admin stack: Going back to |
|
I will work on this. Currently, I'm not sure where is the real problem, maybe in the project's configuration, maybe in the You could indeed still use the I take you updated here asap. |
|
Hi,
https://unpkg.com/browse/usehooks-ts@2.2.1/dist/ The ESM build was automatically picked up by Webpack here and caused some breakage. It's not common to transpile (There are also some untranspiled files under |
|
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:
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 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. |
|
@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? |
|
Hitting this issue too. Will have to copy/paste the hooks for now. |
|
Same issue here |
|
@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. |
|
If someone knows how to fix it or want to give a try to make this library CJS/ESM compatible, it is really welcome. 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, Currently, there are two output:
If necessary (IDK), we could add a bundled ESM version and an AMD/UMD too. I've added a temporary utility function You could test it using And obviously, if you have any feedback, it is more than welcome!! Develop branch: https://github.com/juliencrn/usehooks-ts/tree/feature/esm-cjs |
|
Is |
|
Hi, just tried it - no, it doesn't seem to help. I did I also updated the imports etc. I even deleted node_modules and did a fresh npm install. |
|
HI @trombipeti, thanks for feedback, please could you tell me more about your dependencies and versions such as showing your |
|
There you go |
|
@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 |
|
Hi @ShravanSunder, You can test the hybrid version replacing Hmm, files are still in |
|
@juliencrn i manually tried to change the package.json to the following for a test: it looks like now the module is being loaded as esm. However there's another issue due to the export used 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 |
|
if i change the exports to esm specification they seem to work. i.e. |
|
@juliencrn So good news Is it possible to release it as |
|
Hi @ShravanSunder, thanks for your help 🙌
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
Super cool, it was the goal 😎
Yes, we will do it, it's better indeed. |
@juliencrn this was with usehooks-ts (the original package), but i think this was a wrong assumption in my part.
I do still have issues with non dynamically loaded files in nextjs with |
|
@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? |
|
@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 @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"
}
} |
|
@juliencrn i did some more expriments. so the Something in my packaging causes i'm a bit stumped at the moment. |
|
@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 :) |
|
The latest version (2.9.1) seems to work with React 18! |
|
Closing this issue due to inactivity, but feel free to reopen or create a new issue if needed. Thanks! |
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:
Do you know why? And how I can solve it?
Thanks!
The text was updated successfully, but these errors were encountered: