443 comments found.
How do we get in touch with your team?
Hi syqel,
Thanks for purchasing.
To reach us you can reply here or via mail message from https://themeforest.net/user/ilhammeidi
Regards.
how works the LanguageProvider component? this template is multi language?
Hi rhonalejandro,
Thanks for purchasing.
This template doesn’t have multi-language feature. This template base on react-boilerplate, to use multi-language please follow this docs https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/js/i18n.md
Feel free if you have any further queries.
Regards.
Hi Ilhammeidi,
I have facing a strange bug related to routing. I have declared my private routes like this for now
<PrivateRoute exact path="/app/screens" component={Screens} />
Code for PrivateRoute HOC:-
import React, { Fragment } from 'react';
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";
const PrivateRoute = ({ component: Component, auth, ...rest }) => {
return (
<Route
{...rest}
render={
props => auth.isAuthenticated === true ? (
<Fragment>
<Component {...props} />
</Fragment>
) : (
<Redirect to="/login" />
)
}
/>
)
};
const mapStateToProps = (state) => {
return {
auth: state.auth
}
}
export default connect(mapStateToProps)(PrivateRoute);
And code for route <PrivateRoute exact path=”/app/screens” component={Screens} /> can be re written like this <PrivateRoute exact path=”/app/screens” component={(props) => ( <Screens {...props}/> )} />
everything still works file but when i import redux state and actions in components and fetch the data using action inside useEffect hook and use state data components starts re-rending infinitely in the case when i declare my route like this :-
<PrivateRoute exact path="/app/screens" component={(props) => (
<Screens {...props}/>
)} />
but it works fine when written like this :-
<PrivateRoute exact path="/app/screens" component={Screens} />
after checking i found that my PrivateRoute HOC is infinitely when i declare private route in component={(props) => <Screens {...props}/>} form. I need to write routes in this format because i need to use some other library to manage access control.
Everything is working fine in my vanilla Material UI project but with the theme i am facing this issue and I am using immer for state management in dandelion theme.
Hi rishabhlocad
If re-rending infinitely happen, this might from useEffect. Please try by adding an empty array as the callback.
useEffect(() => {
// code
}, []);
Hope this can help.
Regards.
Hi ilhammeidi,
Empty array is already present so its not the case please go through my earlier comment again, even my Route HOC is re-rendering infinitely only in the case when I declare component(Using redux state and actions) like this :-
import Comp from "./Comp";
<Route exact path="/app" component={ () => <Comp /> } />
It Works fine when it’s declared like this :-
import Comp from "./Comp";
<Route exact path="/app" component={Comp} />
It should work fine in both the cases as I am using it in my current project without any issue(Material UI React), I have encountered this bug while using the same code in Dandelion Pro. You can reproduce same bug in the starter files just declare Components which are using state and actions in the Application.js route file using component={() => <MyComp/>} syntax. Let me know if you need any other clarification.
Hi rishabhlocad,
I can reproduce now.
The mapStateToProps cannot read the auth state because get from function, not as component directly component={(props) => <Screens {...props}/>},
There are some possibilities might from react/redux version, immutable config, or else. So please try to use react hooks instead by use useSelector from react-redux.
Here’s my code Application.js https://gist.github.com/ilhammeidi/991eebcc1ebc5d8744017d674748f414
Login reducer https://gist.github.com/ilhammeidi/5256b9a9964da508b56bed86b420ba99Hope this can help.
Regards.
Hi ilhammeidi,
Thanks for the revert I tried this but still it is giving me infinite loop issue and my auth state was already present in HOC so using useSelector or mapStateToProps didn’t make any difference still giving same error(infinite loop) and I have ported the theme from immutableJs to immer by referencing official react-boilerplate repo which is using immer now instead of ImmutableJs so It seems to me the issues is not with Immutable config. I think somewhere nested router import are happing or there is some routing hooks issue.
Hi rishabhlocad,
I have try, but couldn’t reproduce the issue(infinite loop). And here’s some discussions about this
- https://stackoverflow.com/questions/51053723/react-infinite-loop-on-router-route
Also you can try with React useContext to send value accross components and routes https://dmitripavlutin.com/react-context-and-usecontext/ In this template ract context uses in app/containers/App/Application.js and /app/containers/App/ThemeWrapper.js
Hope this can help.
Regards.
Hi ilhammeidi,
Thanks for the revert I have checked the links you provided seems like these issues are not present in my case and I did some more debugging and tried to declare route instead of using my PrivateRoute HOC, just with Route and the issue is still happening(Infinite loop) with this
<Route exact path="/app/screens" component={() => <Screens />} />
and then I tried to declare route in index.js file instead of Application.js and it fixed the issue no infinite loop but as application.js is Wrapped inside the Dashboard Component so directly importing the the routes inside index.js will not have sidebar and other styles.
Now with this there are two observations
1. First in index.js the Component imports are direct i.e. Import Comp from ./Comp
2. In Application.js the Component imports are async which comes from a file pageListAsync.js
In pageListAsync.js files are imported like this :-
import React from 'react';
import Loading from 'dan-components/Loading';
import loadable from '../utils/loadable';
export const BlankPage = loadable(() =>
import('./Pages/BlankPage'), {
fallback: <Loading />,
});
and In ../utils/loadable
Loadable.js
import React, { lazy, Suspense } from 'react';
const loadable = (importFunc, { fallback = null } = { fallback: null }) => {
const LazyComponent = lazy(importFunc);
return props => (
<Suspense fallback={fallback}>
<LazyComponent {...props} />
</Suspense>
);
};
export default loadable;
After this I tried to declare route again with PrivateRoute HOC and console the Component in both the cases these were my findings
In case 1:-
import Screens from '../pageListAsync';
<PrivateRoute exact path="/app/screens" component={Screens} />
Console.log out put :-
In case 2:-
import Screens from '../pageListAsync';
<PrivateRoute exact path="/app/screens" component={() => <Screens/>} />
Console.log out put :-
As you can see both the function calling default.a.createElement differently when compiled by webpack.
I am using casl for Authorization https://casl.js.org/v5/en/guide/intro it has a companion @casl/react library for react(https://casl.js.org/v5/en/package/casl-react).
I use it like this :-
<PrivateRoute exact path=”/app/screens” component={(props) => ( <Can I=”view” a=”Screens”> <Screens {...props}/> </Can> )} />
I think the way Components are imported in async manner is causing this issue. If there is a way the <Can> can be used in async imports then this issue can be resolved either in pageListAsync or in Loadable.js
Hi rishabhlocad,
The loadable.js uses React Suspense for codesplitting. Another plugin is https://www.npmjs.com/package/react-loadable You can put like example https://www.npmjs.com/package/react-loadable in pageListAsync
I’m not familiar with casl.js, but I think it should be ok for casl-react without async imports.
Regards.
Hi ilhammeidi,
On installing react-csv theme is giving error please check after installation I ran the npm run build:dll it’s giving me this error(below).
ERROR in ./node_modules/react-csv/src/components/Link.js 13:22 Module parse failed: Unexpected token (13:22) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | */ | class CSVLink extends React.Component { > static defaultProps = commonDefaultProps; | static propTypes = commonPropTypes; | @ ./node_modules/react-csv/src/index.js 2:0-37 5:23-27 @ dll reactBoilerplateDeps
ERROR in ./node_modules/react-csv/src/components/Download.js 16:22 Module parse failed: Unexpected token (16:22) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | class CSVDownload extends React.Component { | > static defaultProps = Object.assign( | commonDefaultProps, | defaultProps @ ./node_modules/react-csv/src/index.js 1:0-45 4:27-35 @ dll reactBoilerplateDeps
Hi rishabhlocad,
Thanks for purchasing.
Please try to add the react-csv as excluded dllPlugin list in:
- package.json
"dllPlugin": {
"exclude": [
"react-csv"
]
}
- internals/config.js
dllPlugin: {
defaults: {
exclude: [
"react-csv"
]
}
}
Then install the react-csv again.
Hope this can help. And feel free if you have any further queries.
Regards.
Hi,
Thanks for the revert but it didn’t fix the issue. npm run build:dll was successful but it is still giving the loader error. I am attaching image for reference.
Hi rishabhlocad,
It seem’s the react-csv code has deprecated for the common react version. Please find the compiled native js version, I guess it should be https://github.com/react-csv/react-csv/blob/master/cdn/react-csv-latest.min.js And try to import from node_modules folders import { CSVLink } from "react-csv/cdn/react-csv-latest";
Also here’s some react csv plugins https://openbase.com/categories/js/best-react-csv-builder-libraries
Hope this can help.
Regards.
static files i put under public folder are never built and cant be rechable after build and deploy.
Hi kburkay,
After build, by default the static assets always be stored in public. So plese run from root project with npm run start:prod. But If you start from build/ folder please copy the public folder to build/ manually.
Hope this can help.
Regards.
Hi There is major update from Mui v4 to Mui v5 Accodingly JSS is not supported and other major changes in MUi theme. IS the latest updated in this dandelion-pro-react-admin-dashboard-template has take care of these changes ?
Hi puneeta2,
Hi puneeta 2, The latest update is not support for MUI v5 yet. I just started researched how to migrate it. And seems many things changes. I will update once ready.
Regards.
Hello good evening. Thank you very much for your help but now I had another error and this is happening every time I try to use SweetAlert (https://www.npmjs.com/package/react-bootstrap-sweetalert) when I do the installation the whole system stops working and it starts showing these errors:
npm i react-bootstrap-sweetalert
added 1 package, removed 2 packages, and audited 2122 packages in 7s
186 packages are looking for funding run `npm fund` for details
12 vulnerabilities (4 low, 8 moderate)
To address all issues (including breaking changes), run: npm audit fix—force
Run `npm audit` for details.
❯ npm audit fix—force
npm WARN using—force Recommended protections disabled.
npm WARN audit Updating add-asset-html-webpack-plugin to 2.1.2,which is a SemVer major change.
npm WARN audit Updating recompose to 0.17.0,which is a SemVer major change.
npm WARN audit Updating webpack to 5.54.0,which is a SemVer major change.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: add-asset-html-webpack-plugin@2.1.2
npm WARN Found: html-webpack-plugin@4.5.2
npm WARN node_modules/html-webpack-plugin
npm WARN dev html-webpack-plugin@”4.5.2” from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer html-webpack-plugin@”2.10.0” from add-asset-html-webpack-plugin@2.1.2
npm WARN node_modules/add-asset-html-webpack-plugin
npm WARN dev add-asset-html-webpack-plugin@”2.1.2” from the root project
npm WARN
npm WARN Conflicting peer dependency: html-webpack-plugin@2.30.1
npm WARN node_modules/html-webpack-plugin
npm WARN peer html-webpack-plugin@”2.10.0” from add-asset-html-webpack-plugin@2.1.2
npm WARN node_modules/add-asset-html-webpack-plugin
npm WARN dev add-asset-html-webpack-plugin@”2.1.2” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: css-loader@2.1.1
npm WARN Found: webpack@5.54.0
npm WARN node_modules/webpack
npm WARN dev webpack@”5.54.0” from the root project
npm WARN 10 more (@webpack-cli/configtest, babel-loader, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@”4.0.0” from css-loader@2.1.1
npm WARN node_modules/css-loader
npm WARN dev css-loader@”2.1.1” from the root project
npm WARN
npm WARN Conflicting peer dependency: webpack@4.43.0
npm WARN node_modules/webpack
npm WARN peer webpack@”4.0.0” from css-loader@2.1.1
npm WARN node_modules/css-loader
npm WARN dev css-loader@”2.1.1” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-loader@2.2.1
npm WARN Found: webpack@5.54.0
npm WARN node_modules/webpack
npm WARN dev webpack@”5.54.0” from the root project
npm WARN 10 more (@webpack-cli/configtest, babel-loader, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@”>=2.0.0 <5.0.0” from eslint-loader@2.2.1
npm WARN node_modules/eslint-loader
npm WARN dev eslint-loader@”2.1.1” from the root project
npm WARN
npm WARN Conflicting peer dependency: webpack@4.43.0
npm WARN node_modules/webpack
npm WARN peer webpack@”>=2.0.0 <5.0.0” from eslint-loader@2.2.1
npm WARN node_modules/eslint-loader
npm WARN dev eslint-loader@”2.1.1” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: file-loader@3.0.1
npm WARN Found: webpack@5.54.0
npm WARN node_modules/webpack
npm WARN dev webpack@”5.54.0” from the root project
npm WARN 10 more (@webpack-cli/configtest, babel-loader, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@”4.0.0” from file-loader@3.0.1
npm WARN node_modules/file-loader
npm WARN dev file-loader@”3.0.1” from the root project
npm WARN
npm WARN Conflicting peer dependency: webpack@4.43.0
npm WARN node_modules/webpack
npm WARN peer webpack@”4.0.0” from file-loader@3.0.1
npm WARN node_modules/file-loader
npm WARN dev file-loader@”3.0.1” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: optimize-css-assets-webpack-plugin@5.0.1
npm WARN Found: webpack@5.54.0
npm WARN node_modules/webpack
npm WARN dev webpack@”5.54.0” from the root project
npm WARN 10 more (@webpack-cli/configtest, babel-loader, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@”4.0.0” from optimize-css-assets-webpack-plugin@5.0.1
npm WARN node_modules/optimize-css-assets-webpack-plugin
npm WARN dev optimize-css-assets-webpack-plugin@”5.0.1” from the root project
npm WARN
npm WARN Conflicting peer dependency: webpack@4.43.0
npm WARN node_modules/webpack
npm WARN peer webpack@”4.0.0” from optimize-css-assets-webpack-plugin@5.0.1
npm WARN node_modules/optimize-css-assets-webpack-plugin
npm WARN dev optimize-css-assets-webpack-plugin@”5.0.1” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: raw-loader@2.0.0
npm WARN Found: webpack@5.54.0
npm WARN node_modules/webpack
npm WARN dev webpack@”5.54.0” from the root project
npm WARN 10 more (@webpack-cli/configtest, babel-loader, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@”4.3.0” from raw-loader@2.0.0
npm WARN node_modules/raw-loader
npm WARN dev raw-loader@”2.0.0” from the root project
npm WARN
npm WARN Conflicting peer dependency: webpack@4.43.0
npm WARN node_modules/webpack
npm WARN peer webpack@”4.3.0” from raw-loader@2.0.0
npm WARN node_modules/raw-loader
npm WARN dev raw-loader@”2.0.0” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: recompose@0.17.0
npm WARN Found: react@16.13.1
npm WARN node_modules/react
npm WARN peer react@”15.5.0 || ^16.0.0 || ^17.0.0” from @draft-js-plugins/buttons@4.1.1
npm WARN node_modules/@draft-js-plugins/buttons
npm WARN draft-js-plugins/buttons“4.0.0” from @draft-js-plugins/inline-toolbar@4.1.2
npm WARN node_modules/@draft-js-plugins/inline-toolbar
npm WARN 77 more (@draft-js-plugins/editor, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@”0.14.0 || ^15.0.0” from recompose@0.17.0
npm WARN node_modules/recompose
npm WARN recompose@”0.17.0” from the root project
npm WARN
npm WARN Conflicting peer dependency: react@15.7.0
npm WARN node_modules/react
npm WARN peer react@”0.14.0 || 15.0.0” from recompose@0.17.0
npm WARN node_modules/recompose
npm WARN recompose@”0.17.0” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: sass-loader@8.0.0
npm WARN Found: webpack@5.54.0
npm WARN node_modules/webpack
npm WARN dev webpack@”5.54.0” from the root project
npm WARN 10 more (@webpack-cli/configtest, babel-loader, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@”4.36.0” from sass-loader@8.0.0
npm WARN node_modules/sass-loader
npm WARN dev sass-loader@”8.0.0” from the root project
npm WARN
npm WARN Conflicting peer dependency: webpack@4.43.0
npm WARN node_modules/webpack
npm WARN peer webpack@”4.36.0” from sass-loader@8.0.0
npm WARN node_modules/sass-loader
npm WARN dev sass-loader@”8.0.0” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: url-loader@1.1.2
npm WARN Found: webpack@5.54.0
npm WARN node_modules/webpack
npm WARN dev webpack@”5.54.0” from the root project
npm WARN 10 more (@webpack-cli/configtest, babel-loader, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@”3.0.0 || 4.0.0” from url-loader@1.1.2
npm WARN node_modules/url-loader
npm WARN dev url-loader@”1.1.2” from the root project
npm WARN
npm WARN Conflicting peer dependency: webpack@4.43.0
npm WARN node_modules/webpack
npm WARN peer webpack@”3.0.0 || ^4.0.0” from url-loader@1.1.2
npm WARN node_modules/url-loader
npm WARN dev url-loader@”1.1.2” from the root project
added 56 packages, removed 32 packages, changed 28 packages, and audited 2147 packages in 11s
189 packages are looking for funding run `npm fund` for details
found 0 vulnerabilities ❯ npm start
> mis-terapias@0.1.0 start > cross-env NODE_ENV=development node server
The DLL manifest is missing. Please run `npm run build:dll` ❯ npm run build
> mis-terapias@0.1.0 prebuild > npm run build:clean
> mis-terapias@0.1.0 build:clean > rimraf ./build
> mis-terapias@0.1.0 build > cross-env NODE_ENV=production webpack—config internals/webpack/webpack.prod.babel.js—color—progress
[webpack-cli] Failed to load ’/Users/williamnievagutierrez/Development/mis-terapias/internals/webpack/webpack.prod.babel.js’ config [webpack-cli] TypeError: HashedModuleIdsPlugin is not a constructor at Object.<anonymous> (/Users/williamnievagutierrez/Development/mis-terapias/internals/webpack/webpack.prod.babel.js:144:5) at Module._compile (/Users/williamnievagutierrez/Development/mis-terapias/node_modules/v8-compile-cache/v8-compile-cache.js:192:30) at Module._compile (/Users/williamnievagutierrez/Development/mis-terapias/node_modules/pirates/lib/index.js:99:24) at Module._extensions..js (internal/modules/cjs/loader.js:1097:10) at Object.newLoader [as .js] (/Users/williamnievagutierrez/Development/mis-terapias/node_modules/pirates/lib/index.js:104:7) at Module.load (internal/modules/cjs/loader.js:933:32) at Function.Module._load (internal/modules/cjs/loader.js:774:14) at Module.require (internal/modules/cjs/loader.js:957:19) at require (/Users/williamnievagutierrez/Development/mis-terapias/node_modules/v8-compile-cache/v8-compile-cache.js:159:20) at WebpackCLI.tryRequireThenImport (/Users/williamnievagutierrez/Development/mis-terapias/node_modules/webpack-cli/lib/webpack-cli.js:32:22) ❯ npm run build:dll
> mis-terapias@0.1.0 build:dll > node ./internals/scripts/dependencies.js
Building the Webpack DLL… [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. – configuration.node has an unknown property ‘fs’. These properties are valid: object { __dirname?, __filename?, global? } -> Options object for node compatibility features. ❯ clear
❯ npm start
> mis-terapias@0.1.0 start > cross-env NODE_ENV=development node server
The DLL manifest is missing. Please run `npm run build:dll` ❯ npm run build:dll
> mis-terapias@0.1.0 build:dll > node ./internals/scripts/dependencies.js
Building the Webpack DLL… [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. – configuration.node has an unknown property ‘fs’. These properties are valid: object { __dirname?, __filename?, global? } -> Options object for node compatibility features. ❯ npm run build:dll
> mis-terapias@0.1.0 build:dll > node ./internals/scripts/dependencies.js
Building the Webpack DLL… [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. – configuration.node has an unknown property ‘fs’. These properties are valid: object { __dirname?, __filename?, global? } -> Options object for node compatibility features.
I hope you can help me like you did before. I am using version 2.1.1 as you recommended it to me. Greetings and first of all thank you very much.
Hi wnieva,
After you installed new plugin, please run npm run build:dll without npm audit fix—force . If you have run audit—force fix, please revert with the original/previous package.json then package.lock.json and run npm install again.
After that, you can install the new plugin. The other way you can put the new plugin in package.json in dependencies: {...} and run npm install
Hope this can help. And feel free if you have any further queries.
Regards.
Thanks very much !!!!
Hi Ilhammeidi,
I am facing CSS related issues with the Autocomplete component of the Material-UI library. I am sharing Image link for the reference please let me know how can I fix this.
import Autocomplete from '@material-ui/lab/Autocomplete';
As you can see the input label and icons are displaced.
Hi rishabhlocad,
Thanks for purchasing.
For auto complete please put some adjustment in /app/styles/theme/applicationTheme.js inside overrides: {} by adding
MuiAutocomplete: {
inputRoot: {
padding: '24px 8px',
top: -3,
'& $endAdornment': {
paddingTop: 0
}
},
tag: {
padding: '0 !important'
}
},
FYI I’ve fix this issue a couple weeks ago in update version 2.1.1.
And for Texfied icon please check the usage here http://dandelion.ux-maestro.com/app/forms/textfields And here’s the code app/containers/Forms/demos/InputAdornments.js
<TextField
className={classes.margin}
id="input-with-icon-textfield"
label="TextField"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
/>
Hope this can help. And feel free if you have any further queries.
Regards.
Hi ,
Thanks for the revert I applied the code provided in the overrides. It has fixed the icon issue but the labels are still dislocated. I am attaching image for the reference.
I am not customizing the component just using the regular Autocomplete component provided.
import { Autocomplete } from "@material-ui/lab";
<Autocomplete
id="city"
value={filter.city}
options={cities}
multiple
size="small"
onChange={onCityChange}
getOptionLabel={(option) => option}
renderInput={(params) => <TextField {...params} label="City" variant="outlined" />}
/>
Hi I have removed the variant=”outlined” props seems like it has fixed the issue, as you mentioned you have released the new version few weeks back so what are the main changes that I can copy/Import to my project? I have ported the whole theme from immutable to immer so I cant directly copy paste the code.
Hi rishabhlocad,
For the changes files please see in documentation > change log: https://ilhammeidi.github.io/dandelion-docs/#log
You can use diffchecker to see the changes.
Regards.
Hi, I have this problem and I need your help plz !!! Everything was fine, I restarted my macbook and the application stopped working showing this error.
npm start
> Mis-Terapias@0.0.1 start > cross-env NODE_ENV=development node server
Happy[js]: Version: 5.0.1. Threads: 5 (shared pool) (node:9874) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead (Use `node—trace-deprecation …` to show where the warning was created) Server started ! ✓
Access URLs:
Localhost: http://localhost:3001 LAN: http://192.168.1.92:3001
Press CTRL-C to stop Webpack is building script…
Happy[js]: All set; signaling webpack to proceed. webpack built 0b938b80700c66d8b737 in 9654ms ✖ ｢wdm｣: ERROR in ./app/components/SourceReader/SourceReader.js Module not found: Error: Can’t resolve ‘react-syntax-highlighter/languages/prism/jsx’ in ’/Users/xxxxxxx/Development/xxx-xxxxxxx/app/components/SourceReader’ @ ./app/components/SourceReader/SourceReader.js 19:0-63 136:26-29 @ ./app/components/index.js @ ./app/containers/Pages/Standalone/NotFoundDedicated.js @ ./app/containers/App/index.js @ ./app/app.js @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js
ERROR in ./app/components/SourceReader/SourceReader.js Module not found: Error: Can’t resolve ‘react-syntax-highlighter/prism-light’ in ’/Users/xxxxxxxxxxx/Development/xxx-xxxxxx/app/components/SourceReader’ @ ./app/components/SourceReader/SourceReader.js 18:0-91 136:2-18 170:42-59 @ ./app/components/index.js @ ./app/containers/Pages/Standalone/NotFoundDedicated.js @ ./app/containers/App/index.js @ ./app/app.js @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js
ERROR in ./app/components/SourceReader/SourceReader.js Module not found: Error: Can’t resolve ‘react-syntax-highlighter/styles/prism/prism’ in ’/Users/xxxxxxxxxx/Development/xxx-xxxxxxx/app/components/SourceReader’ @ ./app/components/SourceReader/SourceReader.js 20:0-69 172:46-56 @ ./app/components/index.js @ ./app/containers/Pages/Standalone/NotFoundDedicated.js @ ./app/containers/App/index.js @ ./app/app.js @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js
ERROR in ./app/components/SourceReader/SourceReader.js Module not found: Error: Can’t resolve ‘react-syntax-highlighter/styles/prism/xonokai’ in ’/Users/xxxxxxxxxx/Development/xxx-xxxxxxx/app/components/SourceReader’ @ ./app/components/SourceReader/SourceReader.js 21:0-70 172:34-43 @ ./app/components/index.js @ ./app/containers/Pages/Standalone/NotFoundDedicated.js @ ./app/containers/App/index.js @ ./app/app.js @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js
If you need more information you can request it and I will send it to you. It is very urgent for me to solve this problem, I thank you for helping me.
Hi wnieva,
Thanks for purchasing.
Please try to change with the fixed version of some dependencies in packages.json.
"react-syntax-highlighter": "7.0.0", "prismjs": "1.11.0",
And run npm install again.
FYI I have update some dependencies issues in Dandelion Pro latest version v2.1.1
Hope this can help. Feel free if you have any further queries.
Regards.
Hi, I need support from you.
Spinner.gif is working in dev environment but not in production.
Quick response will be appriciated.
Hi gpstracking,
Thanks for purchasing.
Please make sure the public/images/spinner.gif is exist in production. After run npm run start:prod from root project it should load default assets from public/ folder. If you run the apps from dist/ folder, you can copy images/ folder to dist/.
Feel free if you have any further queries.
Regards.
Hi,
Thanks for this nice theme I have a query how can I port immutable.js code to immer for redux state management ?
Hi rishabhlocad,
Thanks for purchasing and the appreciation.
To use immer please use plain object in reducer and component.
Example for initial state in reducer:/app/redux/modules/login.js
const initialState = {
usersLogin: Map({
email: 'johndoe@mail.com',
password: '12345678',
remember: false
})
};
// remove the Map function
const initialState = {
usersLogin: {
email: 'johndoe@mail.com',
password: '12345678',
remember: false
}
};
And for call in components
const FormInit = connect(
state => ({
initialValues: state.login.usersLogin,
})
}
Feel free if you have any further queries.
Regards.
Sorry I mean like this one
/app/redux/modules/login.js
import produce from "immer"
import { INIT } from '../constants/reduxFormConstants';
const initialState = {
usersLogin: {
email: 'johndoe@mail.com',
password: '12345678',
remember: false
}
};
/* eslint-disable default-case, no-param-reassign */
const loginReducer = (state = initialState, action = {}) =>
produce(state, draft => {
switch (action.type) {
case INIT:
draft.userLogin = state;
break;
default:
break;
}
});
export default loginReducer;
And for call in components in app/components/Forms/LoginForm.js
const FormInit = connect(
state => ({
initialValues: state.get('login').usersLogin,
}),
)(LoginFormReduxed);
Hello,
Deployment build has not contained images path is not making in proper JS file contains path is not found. Need webpack configuration help. The homepage is not set to default in package.json
Thanks.
Hi priyanktyagi09,
Thanks for purchasing.
The images folder inside public/ in root project. It’s for both development and production mode. If you want to move to build/ you can try https://webpack.js.org/plugins/copy-webpack-plugin/
And then implement it in internals/webpack/webpack.prod.babel.js inside plugin array.
Feel free if you have any further queries.
Regards.
hi , great work , Could you let me know how can i turn a reduxtable into a datatable with pagination ?
I have followed the CrudTableForm with all it requirements , but now i am planning to change it into a table with pagination , could you tell what the steps ? Thanks you
Hi manuslimhelu,
Thanks for purchasing and the appreciation.
For table pagination you can use material-ui https://material-ui.com/components/tables/#custom-pagination-actions and implement it in app/components/Tables/tableParts/MainTableForm.js bellow TableBody
If this method too complicated, i suggest to use DevExpress https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/data-editing/ which more flexible.
Regards.
I have a problem, where it keeps loading forever. Sometimes it helps reloding a random number of times. Other times I need to open it in inkognito or another browser. Do you know what triggers this behavior?
Hi keanottesen,
Thanks for purchasing.
It seem’s your’e running in production mode. So it’s because the offline cache. Please try to clear cache and local storage of browser every new build.
You can disable the offline cache https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/remove.md#removing-offline-access Or Here’s the latest docs for enable/disable offline cache https://ilhammeidi.github.io/dandelion-docs/#offline
Feel free if you have any further queries..
Regards.
hi , great job , but i have followed the instructions about how change the theme . But i get this error when reloading the page : Cannot read property ‘palette’ of undefined
Hi manuslimhelu,
Thanks for purchasing and the appreciation.
Please make sure to change in both color mode
- Light mode: app/api/palette/lightPalette.js
- Dark mode: app/api/palette/darkPalette.js
And if you change the theme name, please update in app/redux/modules/ui.js as well.
const initialState = {
//..rest code
palette: List([
{ name: 'Your Theme', value: 'yourTheme' },
])
}
Hope this can help.
Regards.
Thanks , i had updated the theme inside themePalette but have forgot inside light and darkTheme.
Can this work with highcharts?
https://www.highcharts.com/Hi kaushik1979,
Thanks for purchasing.
This template uses react.js And here the guide to use highchart with react https://www.highcharts.com/blog/tutorials/highcharts-react-wrapper/
Feel free if you have any further queries.
Regards.
Hi,
I’m looking to purchase dandelion pro. Do you offer any paid service to help us wire it up. Anything we could possibly hire you for freelance? I’m the Engineering Director of Gaia Coin, and we’re looking to scale out quickly. We also have offerings of large sums of Gaia Coin, that we are currently in ICO with. Anyways, would love to chat.
Cheers,
Will will@gaiacoin.orgHi Will,
Thanks for visiting my portfolio. Unfortunately I’m not available for freelance.
Regards.
I`m low level skill How to start templet???
(4 folders in zip file)
Hi figureking,
Thanks for purchasing.
To start please read the documentation by open index.html in documentation folder or online version https://ilhammeidi.github.io/dandelion-docs/
Regards.
I tried deploying the template on Firebase hoisting. Not changed any config . it get deployed successfully. But facing issue in when refreshing or writing manually routes it throw 404 page not found error. As soon as i refresh the page it throw error . Can you please help me out here ( i already disable offline mode)
Hi puneeta2,
Thanks for purchasing.
For deployment with static site method need to enable offline mode https://ilhammeidi.github.io/dandelion-docs/#offline
But I recommend to run with node server including server/index.js and all files in server/ folder then start the server with npm run start:prod or cross-env NODE_ENV=production node server. For firebase you can try with custom script deployment https://stackoverflow.com/questions/49003794/firebase-deploy-how-to-modify-pre-deploy
Feel free if you have any further queries.
Regards.
we got following error
ERROR in ./app/styles/layout/base.scss (./node_modules/css-loader/dist/cjs.js??ref-8-1-8-3!./app/styles/layout/base.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
at getSassImplementation (/home/dotin/Downloads/themeforest-5lxZohBp-dandelion-pro-react-admin-dashboard-template/dandelion-pro_v210/starter-project/node_modules/sass-loader/dist/getSassImplementation.js:46:13)
at Object.loader (/home/dotin/Downloads/themeforest-5lxZohBp-dandelion-pro-react-admin-dashboard-template/dandelion-pro_v210/starter-project/node_modules/sass-loader/dist/index.js:40:61)
ERROR in ./app/styles/components/Messages.scss (./node_modules/css-loader/dist/cjs.js??ref-./node_modules/sass-loader/dist/cjs.js??ref
8-1-8-3!./app/styles/components/Messages.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
at getSassImplementation (/home/dotin/Downloads/themeforest-5lxZohBp-dandelion-pro-react-admin-dashboard-template/dandelion-pro_v210/starter-project/node_modules/sass-loader/dist/getSassImplementation.js:46:13)
at Object.loader (/home/dotin/Downloads/themeforest-5lxZohBp-dandelion-pro-react-admin-dashboard-template/dandelion-pro_v210/starter-project/node_modules/sass-loader/dist/index.js:40:61)./node_modules/sass-loader/dist/cjs.js??ref
Hi revinair,
Thanks for purchasing.
The following error probably you have node-sass installed globally in your system. This template already uses sass(dart sass), which is node-sass already deprecated.
1. Please try to Uninstall node-sass: npm uninstall node-sass
npm install -g sass
or
npm install --save-dev sass
Feel free if you have any further queries.
Regards.
