133 comments found.
Hi, I am using the files in NextJS and its not working with the mixin @import ”@left4code/tw-starter/dist/css/mixins/_media.css”;
I am getting this error during nom run dev. Syntax error: C:\Tech\Repos\divinex.ecommerce\node_modules\@left4code\tw-starter\dist\css\mixins\_media.css ‘screens.#{$screen}’ does not exist in your theme config. ‘screens’ has the following valid keys: ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘2xl’ > 3 | @media (min-width: calc(theme(“screens.#{$screen}”) – 1px)) { | ^ 4 | & { 5 | @content;
1 | /* Breakpoint up */
2 | @mixin media-breakpoint-up($screen) {Can you please guide on a fix.
Hi there,
Thank you for reaching out to us,
Have you made sure the postcss config is loaded correctly?
Hi – My postcss config looks like this – module.exports = { plugins: { “postcss-import”: {}, “tailwindcss/nesting”: “postcss-nesting”, tailwindcss: {}, autoprefixer: {}, }, };
Ami i missing anything?
Hi,
Thank you for your reply,
Can you try `console.log` something to see if the config loads properly?
The message should appear on the console if the configuration is correct.
Hi – i added console.log in postcss config and it did not show the log in the console. What should i do?
https://drive.google.com/file/d/1g7BfYgUl05VOBo0wIW0sCodxq0lm_jTY/view?usp=sharingHi, do you have any figma design component based on your design that we can use to tell developers which of your component to use where?
Hi there,
Thank you for reaching out to us,
Unfortunately, we don’t have a figma design file.
Good afternoon. Excuse the question. How do I activate the scroll bar on the main screen? The thing is that the side menu menu is too long and you can’t scroll down to see the options.
my code:
<RecoilRoot>
<Provider store={store}>
<BrowserRouter>
<EmeraldApp />
<ScrollToTop />
</BrowserRouter>
</Provider>
</RecoilRoot>Hi, check the problem in detail. It turns out that if I don’t have all my routes in a single file inside the Router folder, it doesn’t take into account the scrollbar component. And I can’t have all my routes in one file because I separate the routes into three different files. How do I make the scrollbar apply to the entire system regardless of where my routes are?
I have searched in detail, but I have not found a solution. If the routes are not in a single file inside the router folder, the scrollbar does not work. It’s not about the component. Please I need help.
Hi there,
Thank you for reaching out to us,
Sorry, but I’m not sure I fully understand your question, can you provide a screenshot of the issue?
The scrollbar does not appear when the page has a lot of content and it is because I have my system routes located in a different file than the main routes file. It automatically adds the overflow-y-hidden class to the body. To fix, I had to remove the class when loading the menu
Is there a way to reproduce this issue? We’ll check it immediately.
Hi, I would like to have access to the source code of left4code/tw-starter which is one of the main dependencies… Could you please provide me a copy of the source code ? Thank you
Hi there,
Thank you for reaching out to us,
Please check the following directory ”/node_modules/@left4code/tw-starter”.
Let me know if you have any other question.
I woulkd like to buy your template, but I have a question.. will you have this template detailed in figma or at any adobe program? thanks
Hi there,
Thank you for reaching out,
Unfortunately, we don’t provide the design file.
Goodnight. How can the <TomSelect> component be validated using yup. Because when I add the following line {...register(“select”)} it gives me an error
Hi there,
Sorry for the late reply,
You can use the “Controller” component, please check this link.https://react-hook-form.com/get-started#IntegratingwithUIlibraries
Example code:
<div>
<Controller
name="actor"
control={control}
render={({ field }) => (
<div classname="{classnames({
" border="" border-danger="" errors.actor="">
<TomSelect
value={field.value}
onChange={field.onChange}
options={{
placeholder: "Select your favorite actors",
}}
className="w-full"
>
<option value="1">Leonardo DiCaprio</option>
<option value="2">Johnny Deep</option>
<option value="3">Robert Downey, Jr</option>
<option value="4">Samuel L. Jackson</option>
<option value="5">Morgan Freeman</option>
</TomSelect>
</div>
)}
/>
</div>
{errors.actor && (
<div classname="text-danger mt-2">
{errors.actor.message}
</div>
)}
Usage:https://i.imgur.com/DCOQvgI.png
Hello,
I run react version – Enigma Layout but not run pls guide me on how to run Enigma Layout in react. I download node js and install yarn but it does not run.
Hi,
Thank you for reaching out to us,
Is there any error or something we can check?
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
Hi,
Thank you for your reply,
Unfortunately, we never found the error you experienced. Can you send a screen recording of the step-by-step installation to run the compiler? What version of node/npm are you using?
Excuse my lack of knowledge. I’m starting to react and what I handle is redux. My question is, can I work redux on the app? And if so, where in my tree should I place the component?
<React.StrictMode>
<Provider store={ store }>// —-> here?
<RecoilRoot><Provider store={ store }> // ----> OR here?<BrowserRouter><PokemonApp /></BrowserRouter></Provider></React.StrictMode>
Hi there,
Thank you for reaching out to us,
Both are correct, we have plans to replace recoil with redux in the next version.
Good afternoon. I bought the template on Jul 19, 2022. I have nodejs 18.4.0 npm 8.12.1. I did npm installa and then it asked me to do npm audit fix—force which I did. When I run npm run dev, I run it on localhost port 3001 and it gives me the following error.
Uncaught SyntaxError: The requested module ’/node_modules/.vite/deps/xlsx.js?v=c08ff8c4’ does not provide an export named ‘default’ (at Main.jsx:9:1)
the error line is:
import xlsx from “xlsx”;
I disable the line and everything works correctly.
Hi there,
Thank you for reaching out to us,
Running “npm audit fix—force” is not necessary as it will install another version of the dependencies used in the template. So you can simply run “npm run install” to install dependencies and “npm run dev” to run the compiler.
Colour Pallet changing option is not available I am using the HTML one in the version that I purchased which was React+HTML
Here is the screenshot of it:- https://imgur.com/a/xlqScf1 I marked it on green that it’s missing the color pallet option in the HTML version I have it only on the react version which I am not using.
Thank You.
Hi there,
Thank you for reaching out,
We did not include a color switcher in the HTML version because there will be a theme change delay when the page loads for the first time. This is because the javascript code will be executed after the page has been successfully loaded.
We recommend that you add the classname on the backend/server side code. You can simply add the classname to the root HTML tag as follows.
https://i.imgur.com/MxN0mDc.pngHowever, you can try using the following code if you still want to try using the client side color switcher.
// HTML
<!-- BEGIN: Main Color Switcher-->
<div class="shadow-md fixed bottom-0 right-0 box border rounded-full h-12 px-5 flex items-center justify-center z-50 mb-10 mr-52">
<div class="mr-4 hidden sm:block text-slate-600 dark:text-slate-200">Color Scheme</div>
<a href="javascript:;" data-theme="default" class="color-switcher block w-8 h-8 cursor-pointer bg-blue-800 rounded-full border-4 mr-1 hover:border-slate-200"></a>
<a href="javascript:;" data-theme="theme-1" class="color-switcher block w-8 h-8 cursor-pointer bg-emerald-900 rounded-full border-4 mr-1 hover:border-slate-200"></a>
<a href="javascript:;" data-theme="theme-2" class="color-switcher block w-8 h-8 cursor-pointer bg-blue-900 rounded-full border-4 mr-1 hover:border-slate-200"></a>
<a href="javascript:;" data-theme="theme-3" class="color-switcher block w-8 h-8 cursor-pointer bg-cyan-900 rounded-full border-4 mr-1 hover:border-slate-200"></a>
<a href="javascript:;" data-theme="theme-4" class="color-switcher block w-8 h-8 cursor-pointer bg-indigo-900 rounded-full border-4 hover:border-slate-200"></a>
</div>
<!-- END: Main Color Switcher-->
// JS (Create new file ”/src/js/color-switcher.js”)
(function () {
"use strict";
const switchTheme = function (theme) {
localStorage.setItem("theme", theme);
window.location.reload();
};
const setTheme = function () {
$("html").addClass(localStorage.getItem("theme"));
};
setTheme();
$(".color-switcher").on("click", function () {
switchTheme($(this).data("theme"));
});
})();
// JS (Update ”/src/js/app.js”)
Import “color-switcher.js”.
https://i.imgur.com/xi1Wg8P.png
Run “yarn run watch” to run the compiler.
Hello npm run build gives chunk error while building application.Some chunks are larger than 500 KiB after minification. Consider: - Using dynamic import() to code-split the application - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
Please help
Hi,
Thank you for reaching out,
Can you send step by step to reproduce the issue?
Thank you very much for your prompt response. Last question to finish. I am currently working with nodejs18 and npm 8. And these requirements are not suitable for a template that I had bought, so I would like to know what are the optimal requirements to run this template without creating errors. Thank you
Hi,
Thank you for your reply,
This is the version of node and NPM we are currently using.
Node: v18.0.0
NPM: 8.6.0
Good afternoon, I’m interested in buying the template but I wanted to ask if React 18’s programming is based on hooks or classes as before. I ask because I’m taking a React course and they only teach Hooks and I don’t want to buy the template only to find myself with a script that I can’t modify. And another question, is your template easy to manage with react, because I bought the vuexy template and so far I haven’t been able to modify or implement it, nor are they quick to support it.
Could you also explain to me the difference with your other product, the Rocketman template – Tailwind CSS React 18+. It is to decide which one to buy and why to buy it. Thanks for your time
Hi there,
Thank you for reaching out to us,
In short, yes, we used hooks.
We cannot claim or compare our template with other templates as being the easiest to customize as each developer’s level and experience may vary. But we do our best to use a structure that is easy to use and understand for advanced or beginner developers.
Rocketman and Midone have different theme variations and framework bundles. You can check out our item descriptions and live preview to see the difference.
Thank you
After the support expires. Will I receive updates? Or do I have to buy it again?
Hi,
Thank you for reaching out,
Yes, you will still get the latest updates.
Hi there, i already bought the HTML Version. Back then you didn’t offer a React Version. So i ported it myself – somewhat sloppily to be honest. Would it be possible to have a look at some sample components, so i could evaluate whether the upgrade would be worth it? Kind Regards Marvin Neumann
Hi there,
Thank you for reaching out,
We have attached an example of the component usage on the demo page, please check the following link.
https://rubick-react.left4code.com/tab
https://rubick-react.left4code.com/accordion
https://rubick-react.left4code.com/modal
Let me know if you have any further question.
Thank you very much. I completely missed that. Is there a way to just buy the React Template, bc i already own the HTML Version. Thanks in advance!
Hi,
Sorry for the late reply,
Yes, we can help you with that, please submit a refund request for the HTML version at this link.https://themeforest.net/refund_requests/new
I need a help with VITE.
import {basename} from ‘path’ import {createReadStream} from ‘fs’
I need import this both, but I got error
The requested module ’/@id/__vite-browser-external:path?t=1656686216086’ does not provide an export named ‘basename’
Could you help me with this, I never used vite before.
Hi there,
Thank you for reaching out,
Using the import module in Vite is the same as any other bundler, it looks like the object you are importing is not found in that package. You might try to re-check the package version used.
Or you might try importing without destructuring to see the objects you want to import.
import path from ‘path’;
import fs from ‘fs’;
// check if `basename` object available
console.log(path)
console.log(path.basename)
// check if `createReadStream` object available
console.log(fs)
console.log(fs.createReadStream)
Please don’t hesitate to contact us if you have any further question.
Another question, what is your suggestion to make the Breadcrumb work?
Hi,
I’ll suggest you to create a new store (Eg: /src/stores/breadcrumb.js) contains a simple array and modify the array on each page to set the breadcrumb.
https://i.imgur.com/TiIq6aD.pngHow we change the animation speed of the page?
?
Hi,
Thank you for reaching out,
Please create a new file `/src/assets/css/components/_intro.css` with the following code.
* {
@for $i from 1 to 50 {
> .intro-x:nth-child($i) {
z-index: calc(50 - $i);
opacity: 0;
position: relative;
transform: translateX(50px);
animation: 0.4s intro-x-animation ease-in-out 0.33333s;
animation-fill-mode: forwards;
animation-delay: calc($i * 0.1s);
}
> .-intro-x:nth-child($i) {
z-index: calc(50 - $i);
opacity: 0;
position: relative;
transform: translateX(-50px);
animation: 0.4s intro-x-animation ease-in-out 0.33333s;
animation-fill-mode: forwards;
animation-delay: calc($i * 0.1s);
}
> .intro-y:nth-child($i) {
z-index: calc(50 - $i);
opacity: 0;
position: relative;
transform: translateY(50px);
animation: 0.4s intro-y-animation ease-in-out 0.33333s;
animation-fill-mode: forwards;
animation-delay: calc($i * 0.1s);
}
> .-intro-y:nth-child($i) {
z-index: calc(50 - $i);
opacity: 0;
position: relative;
transform: translateY(-50px);
animation: 0.4s intro-y-animation ease-in-out 0.33333s;
animation-fill-mode: forwards;
animation-delay: calc($i * 0.1s);
}
}
}
@keyframes intro-x-animation {
100% {
opacity: 1;
transform: translateX(0px);
}
}
@keyframes intro-y-animation {
100% {
opacity: 1;
transform: translateY(0px);
}
}
Next, change the import file at `/src/assets/css/app.css`.https://i.imgur.com/EBZ1zPG.png
You can change the animation speed by changing the value `0.33333s` in the `animation` property.
To change the side menu animation speed, please open this file `/src/assets/css/components/_side-nav.css` and change the following values.
https://i.imgur.com/BXtoPhN.png
Please use chrome incognito or another browser if you can’t open the link, thanks.
Thanks! Works perfectly!
I have one suggestion for you. Change your toaster for https://react-hot-toast.com/.
You’re welcome.. 
We’ll have a look at the plugin.
Hi, I’m trying to set the default theme to dark.
currently on first load, it shows light mode, but I have a temporary solution inside the app.jsx
const setDarkMode = () => {
localStorage.setItem("darkMode", "true");
localStorage.setItem("colorScheme", "theme-4");
}I’m wondering if there’s a switch or something that I may have missed to make dark theme the default, to ensure first load also see a dark theme, rather than having to reload to use dark theme.
First load: https://gyazo.com/36f0063f189e4395019695e8fd030e75 Second reload: https://gyazo.com/8b9934fc7bd5f4e305508d23453c8c3aThanks
Hi there,
Thank you for reaching out,
Please check this file ”/src/stores/dark-mode.js” and replace some lines as follows.
https://i.imgur.com/jbEsHqf.png
import { atom, selector } from "recoil";
const darkModeValue = atom({
key: "darkModeValue",
default:
localStorage.getItem("darkMode") === null
? true
: localStorage.getItem("darkMode") === "true",
});
const darkMode = selector({
key: "darkMode",
get: ({ get }) => {
if (localStorage.getItem("darkMode") === null) {
localStorage.setItem("darkMode", true);
}
return get(darkModeValue);
},
});
export { darkModeValue, darkMode };
You may also need to update `index.html` file and add the `dark` class to the HTML root tag to get rid of the light theme that appears slightly before the page is rendered.
https://i.imgur.com/Pb6RSnx.png
To change the default theme color please open this file `/src/assets/css/_colors.css` and change the color config with the color from another theme or choose your own color.
https://i.imgur.com/gvHQ85O.png
Please use chrome incognito or another browser if you can’t open the link, thanks.
These fixes worked, Thanks!
Kind Regards.
Glad to be helpful..
Hi, Is it possible to migrate to redux manually? or is there any limitation?
Hi,
Thank you for reaching out to us,
No, there is no limitation for that. But it’s not included in the item support so you need to customize it yourself.
Thx
You’re welcome..
