create-react-app babel-loader clash #4764
Comments
|
Yes, you need. These are direct deps for CRA, but peer for the Storybook, which means you need to install them. |
|
This is a problem, when installing I don't believe it is good to make users install Is there a better way to support this? For example, once #4587 is supported, can we infer these packages like how CRA2 does it? |
shilman
added
compatibility with other tools
cra
|
For example:
Unfortunately, node deps can't be transitive and we can't assume that some third party tool will bring some dep for us. Also, we can't make sure how npm/yarn will install these deps. How can we now make everyone happy? Maybe we need to start deprecating older tooling in favor of newer... In that case, we will be able to move some of the PS.. @storybooks/team this is something we should talk about on the next roadmap meeting. |
|
Maybe a preset for CRA 1 (assumes using Babel 6, vanilla CSS, etc.) and 2 (assumes using Babel 7, no PostCSS, ready for TS, etc.) |
|
In my vision, we need to extract presets out of the supported frameworks and make CLI install them when it recognizes one or another tool. |
|
It sounds like maybe the problem you describe can be solved by optional [react] presets that depend on these various things directly @igor-dv? Then the CLI can install the preset for you and as a user maybe you don't actually need to understand what's happening |
|
Exactly ! |
|
Perhaps before you build or start storybook our CLI does a quick check on node_nodules. We know what storybook needs... So if we detect missing things, we add then before running. (and then run). This way we don't have to bother users at all, and we can re-use whatever version people have though whatever means.. |
|
I am facing the same error as @mohamedmansour I've removed my package-lock.json and my node_modules, the issue is still there. My depedencies: |
|
Weird fix: After doing that you should not remove EDIT: Doing this has broken my tests 💀 |
Yes, then remove the |
|
I've updated react-scripts (2.1.5) and storybook react and its addons (4.1.11). The issue is still there but it's about |
|
😭 There's a PR to fix the babel-loader version, and make it match cra's one. I haven't been able to check it out and verify it's good. If someone here can help us review the PR, we may be able to get it merged faster. |
|
@tmeasday thanks for your feedback! |
It's hard because CRA is a moving target :/ |
|
I'm sorry guys, this is on me too - as I got caught up and haven't gotten back to refactoring that POC/PR. We need a more reliable system here. Right now we have an issue that's kind of related to this, so once we get through that, I think we can talk more about a long-term solution here. facebook/create-react-app#6398 I'll talk to the CRA team on this and see what ideas we can come up with to make this a more robust experience for all. On a side note, if you're using Yarn resolutions, you can also tell Yarn to force Storybook to match CRAs versions of dependencies. |
|
No more issue since v5. |
|
That's great to hear. Closing this now, but feel free to re-open if the issue hasn't gone away. |
|
I'm having this exact issue. Here is my sb info and here is the versioning problem: When I try to build my App got this message: The only solution that worked for me was manually install |
|
Fixed in #13607 and released in |
|
@shilman could you explain how that works? |
|
it turns out it needs to be in the dev dependencies not the dependencies. We had it this way because of eslint expecting a storybook plugin to exist, and the fact that we deploy storybook on production. I moved the |
|
I am still seeing this issue. How can I fix it? npm is my package manager. Here is my sb info: This is the problem after updating react-scripts to 4.0.1: ├─┬ @storybook/react@6.1.15 |
|
@FutureKode is storybook in your devDependencies? |
Hi @AskAlice , this is what is in my devDependencies: Yes I have tried deleting |
|
I found this medium article helpful in understanding what it means by 'higher up the tree'. As I understand it, it is insisting (pointlessly) that its desired version of babel-loader is the first one to be installed into node_modules. However npm installs dependencies in alphabetical order, so there's really no way to actually enforce this (without yarn). The hacky solution I found was this:
If you get a new error for a different dependency on step 5, you need to back to step 1. I also found that I needed to add the package |
|
The issue went away after adding "resolutions" : { "babel-loader": "8.1.0"} to my package.json, delete yarn.lock, yarn install and then it worked ! |
* Adds storybook * Fixes issue between CRA and storybook as seen in storybookjs/storybook#4764 (comment)
* Feature/frontend scaffolding (#1) * Adds react base app * Adds prettier and extends eslint rules with airbnb's ones * Fixes reported issue with create react app when running eslint See on facebook/create-react-app#8936 * Adds lint command to run eslint in the project * Adds missing jsx and js extensions to eslint command * Fixes linting errors * Adds husky, lint-staged and pre-commit and pre-push rules * Create CHANGELOG.md * Feature/storybook (#2) * Adds storybook * Fixes issue between CRA and storybook as seen in storybookjs/storybook#4764 (comment) * Feature/components foundation (#3) * Adds material ui library * Adds dark theme * Adds theme provider to the App main component * Integrates material ui library with storybook * Adds prop-types * Adds themes and theme provider * Adds window.matchMedia mock in jest configuration * Feature/layout (#4) * Updates light theme colors * Removes padding from storybook stories * Adds MainLayout component * Feature/keyboard component (#5) * Adds material-ui icons * Adds key component * Adds eslint rule omission for story files * Adds keyboard component * Fix/style improvements (#6) * Changes themes colors and fixes deprecation message from createMuiTheme * Solves issue related with 100vh on some mobile devices * Makes key component responsive and replaces Paper wrapper component * Update yarn.lock * Adds css reset to storybook stories * Removes maxWidth from Keyboard component * Feature/screen component (#7) * Adds Suggestions component * Adds Screen component * Adds Layout with Keyboard and Screen components story * Feature/improves screen components (#8) * Adds word button component * Disables import/order eslint rule * Adds ScreenText component * Modifies Screen component and moves it to organisms * Feature/local t9 typing (#9) * Adds T9 keys handler * Adds type definition file * Adds useWord hook to handle the state of the words written by the user * Adds useWriter hook to manage the t9's prediction words * Ensambles the state and some components into the App component * Feature/t9 service layer for frontend (#10) * Adds service layer for T9 word prediction * Replaces useWriter's fetchSuggestion function * Update CHANGELOG.md * Update README.md * Feature/backend scaffolding (#11) * Adds express-tool generated scaffold * Adds eslint, prettier and airbnb linting rules * Adds lint command * Adds cors dependency * Adds jest and supertest * Adds jest rules for eslint * Adds simple route test * Feature/global commands (#12) * Removes husky and lint-staged from frontend * Adds root folder commands for both applications * Splits lint-staged commands * Backend t9 implementation (#13) * Adds 10k words english dictionary sorted by global word frequency * Adds Trie data structure * Adds t9 key mapping * Adds t9 service * Adds nodemon * Adds command to run tests on both, backend and frontend * Updates README and CHANGELOG (#14)
This force the entire team to use However I found this npm force resolutions and maybe it's a way to all in the team have the problem resolved. |
They should be forced to use either or, shouldn't mix package managers in the same project. Besides you can disable the check that CRA does. |
|
I'm also experiencing this problem. The following code does not work for me. This is the output of |
and others
Original Post Hidden As It Relates to CRAv2
When installing create-react-app 2, it already has
babel-loaderand@babel/core. We need to add those two as apeerDependency?My
packages.json:{ "version": "0.1.0", "private": true, "license": "ISC", "dependencies": { "react": "^16.6.1", "react-dom": "^16.6.1", }, "devDependencies": { "@storybook/react": "^4.0.4", "@types/node": "^10.12.5", "@types/react": "^16.7.1", "@types/react-dom": "^16.0.9", "@types/storybook__react": "^4.0.0", "react-scripts": "^2.1.1", "typescript": "3.1.6" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "storybook": "start-storybook -p 9001 -c .storybook" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }The errors warnings are:
The text was updated successfully, but these errors were encountered: