I'm working with laravel and react, and installed browsersync to speed things up.
However, I noticed on the CMD that it keeps detecting changes to the .scss file and re-builds, literally non stop.
It's my first time using BS, and I couldn't track the reason for this.
edit: Apparently I did something wrong while adding a custom font. I moved it directly to public/fonts, instead of adding to assets/fonts and having webpack move it to public/fonts. Fixing this solved the issue.
Apparently I did something wrong while adding a custom font. I moved it directly to public/fonts, instead of adding to assets/fonts and having webpack move it to public/fonts. Fixing this solved the issue.
Related
I added react-refresh and react-refresh-webpack-plugin to my webpack configuration. Everything works fine if I change something directly in the component. For example, I add a new jsx. HMR works fine. The problem arises when I want to change a style in the module.less file that my component uses. Then i have to manually refresh the page to see the new changes, which can be tiresome.
What do I need to do to make react-refresh also respond to changes in css/less files? Maybe I need to add something directly in webpack configuration?
In another project I use vite and there everything works great for js and css files too.
I am using the #lekoarts gatsby-theme-minimal-blog. You can view my code here:
https://github.com/CodyWMitchell/my-site
I feel like I am losing hair because of how much time I have spent trying to get this working. I am running Gatsby locally, and I've somehow successfully shadowed the footer component. I want to shadow the header component, but for some reason nothing is working at all.
In the lekoarts theme, the footer is in the same folder location as the header component, but when I add a file called header.tsx to overwrite the other header.tsx in the same location as the footer that is successfully shadowing nothing happens. I tried adding it in every other possible place I can think of, restarting the local build, and I'm at my wits end.
Here's the kicker, when I remove footer.tsx from the local src directory I added it to, It gives me an error now? Why would it give me an error for a file not existing that wasn't even there in the theme to begin with until I added it?
I really (really) want to give a static site generator a shot, but this feels extremely frustrating for something that should be simple, and it's discouraging me for suggesting something like this for any kind of complex project.
Any help or advice would be much appreciated.
Try to clean .cache folder and re-run the dev. Every time you "shadow" or change the components in theme folder, you should do it.
Just run gatsby clean or npm run clean - I saw that script in your repo.
I am using Tailwind in my Next.js application and it sometimes behaves strangely. I could get 99% of the classes work but in some occasions classes doesn't apply at all. Just to give an example, when I add h-48 which produces height:12rem; its completely fine but when its changed to number above 48 it doesn't work like h-96.
Another problematic class is max-height. Regardless of the value it doesn't apply at all. Same thing happens with any classes that has point in it. For example m-h-0.5.
At the same time, if I change the config file and assign h-96 to any value it still applies. What do you think that might be causing tailwind to behave in that way?
I ran into this issue just now and found the fix.
This happens if you don't have a postcss.config.js config in your root. This happened to me because I was upgrading from an older version of Tailwind and for some reason that config hadn't been generated initially. You can use tailwind to generate a new one - just run the below code in your root.
npx tailwindcss init -p
I was trying to integrate a React.js app in Cordova. Everything goes well, but I was not able to debug the app in the simulator. With chrome://inspect it seems like there's no way to do it, because I can only see the "compiled code". Any solution? Thanks
Maybe there is another better way, but what do the trick for me is to build react with some custom files that i took from node_modules/react-scripts/
(i do that, to avoid react eject)
You need all the sources map on your app.
React by default, use a certain webpack config, but that config doesn't work in your phone.
By default, react use this
You can check it on the file node_modules/react-scripts/config/webpack.config.js
What i do, is to build react with the next webpack config
devtool: "eval-source-map",
So you must
Copy these files on your source code and adapt some imports (there are some import with relative path) You only need these two files
node_modules/react-scripts/scripts/build.js
node_modules/react-scripts/config/webpack.config.js
On the first one, modify it to use the second one,
On the second one, add this devtool: "eval-source-map"
Create new task on package.json , new custom build to use the script your custom build.js
Build with this script, and copy all the source maps with your code, and thats it.
The debug could crash sometimes, (i try it also with iphone + safari, sometimes works, sometimes don't so you must keep trying)
On android tend to work in a better way.
The debug is a little bit slow in compare to the web debug.
I hope this works for you too.
(Sorry for my bad English)
I installed all recommended extensions, still VSCode won't recognize any React syntax.
What must i do to make VSCode play nice with React (js / jsx) syntax?
The plugin that was causing issues for me here actually Babel ES6/ES7 as mentioned in another comment.
Once removing that plugin and reloading, it all worked well
VS Code has built-in support for JSX and TSX. You do not need to install any extensions unless you want additional functionality
As the OP noted, the problem was one of their extensions was inserting spaces around the tags. I suspect it was the js css html formatter extensions since this has caused problem for people in the past
1.Delete all html-js-css formatters.
2.If you want to work with this formatters,
install prettier.
Right click and select format document with and then select prettier. Repeat this every saving.
This happens because you use some HTML formatter, so first go to your react native or js extension settings(simple click the bottom bar language mod), and check the HTML fomatter in that setting page.
"[html]": {
"editor.defaultFormatter": "apility.beautify-blade"
}
remove this, and you are good to go.
Afaik, vscode does not understand JSX by default. Installing jsx plugin should help there.
Install Babel ES6/ES7 extension from here.
Works like charm.