I am having an issue with Storybook 6.3 since it uses Webpack 5 and I am installing it on a clean create-react-app which uses Webpack 4.41.8.
I tried to update react webpack and all and still no luck. The problem started after I tried to add sass support for my storybook project, and went into dependency hell.
I just want to install an older version of Storybook like 5.3, how do I do that? Since Storybook uses npx sb init?
So in the end I found this to be the answer to all my problems (having latest Storybook and working sass support) that has been using the standard webpack-loaders as shown in the official Storybook docs, do not forget to import them and the entry .scss file in the root/.storybook/preview.js file e.g. import "!style-loader!css-loader!sass-loader!../stories/assets/main.scss"
You could downgrade storybook.
This is the official manual
If you'd like to downgrade to a stable version, manually edit the
package version numbers in your package.json and re-install.
Related
Typescript is added to the version 16 react application created with create react app.
I have installed the latest v.18 version of #types/react and #types/react-dom, but I would like to know if it is a problem that the version is different from react.
Thank you.
npx typesync will resolve type syncing issues. The script checks your package.json and searches the web for the #types version of your package, if one is not already installed. This may also remove the #types packages should you no longer need it.
You can go a step further and add this in your package.json:
“postinstall”: “npx typesync”
Now every time you install or update your packages you’ll automatically run the postinstall script!
Yes, as you'll have TS types for React 18, but JS code for React 16. For example, you may be able to import a new feature from React 18 but get a runtime error because you only have React 16.
You can solve this by using #types/react and #types/react-dom version 16 until you're ready to upgrade to React 18.
I made react app with Tailwind CSS version 2, now they have new version 3.0.
The version i have in my app needs craco to run, and i saw in the new documentation of installing Tailwind CSS with react app that the craco step doesn't exist anymore.
So how can I upgrade to version 3?
Thank you in advance!!
Try it like this:
npm uninstall craco
Follow the upgrade process Tailwind CSS project from v2 to V3 precisely.
Apply the required changes
I created a project via create-react-app 4.0.3 which uses tailwindcss 2. I just tried to upgrade the project to tailwindcss 3, but quickly ran into troubles, since tailwindcss 3 relies on Post CSS 8, which is not supported by create-react-app 4.0.3 , so I also needed to upgrade to create-react-app 5.0.0
The official Create-React-App documentation says "In most cases bumping the react-scripts version in package.json and running npm install in this folder should be enough, but it’s good to consult the changelog for potential breaking changes."
The official Tailwind Upgrade Guide says "update Tailwind, as well as PostCSS and autoprefixer, using npm" and adds to that some minor changes in tailwind.config.js
I followed this steps and ended up with a huge error message when trying to run npm run start
I am thinking that in the end it might be easier to set up the project from a fresh 5.0.0 create-react-app installation, where I install tailwind 3 on top instead of trying to repair all the issues that were caused by the upgrade.
However, before I do this I wanted to ask: What is the recommended solution for upgrading from tailwind 2 to 3 AND upgrade from create-react-app from 4.0.3 to 5.0.0 (since my understanding is that you need to do both to make tailwind work). How did other people solve the issues laid out above?
First you need to update react-scripts to version 5.0.0
Then uninstall craco
Finally update tailwind with the command
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
You can also follow official guide at https://tailwindcss.com/docs/upgrade-guide to update the new color names and update the tailwind.config.js file
Now yo can run the command npm run start to see the changes and in the console you can see the new build process
I recently migrated a create-react-app to typescript. After migration my scss files are being ignored in the .tsx components. I'm importing the files like so:
import './styles/scss/style.scss';
this was working fine in js. I've already installed node-sass and even tried installing #types/node-sass. I'd like to do this without ejecting. Would appreciate any help.
According with this documentation https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
If you use react-scripts#2.0.0 or higher just
npm install node-sass
restart and enjoy.
I'm getting this error with in all my files:
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in...
I'm using the latest version of react: 15.4.0.
webpack: 1.12.11
Any help?
One quick solution to this will be use npm to install reactjs.
npm install --save react react-dom
Don't use standalone react bundle.
More solutions can be provided if you post your webpack config file.
The problems seems to be located in react-hot-loader library.
As mentioned #gaereon in my react gitub post, apps should not rely on internal APIs. So, react-hot-loader is using ReactMount.
I asked to fix it, for now I will return to latest version of React.
UPDATE
I had the 1x version. I switched to 3x beta version and works fine.