creativetimofficial / ct-nextjs-material-kit-pro Goto Github PK
View Code? Open in Web Editor NEWNextJS version of Material Kit PRO React
Home Page: https://demos.creative-tim.com/nextjs-material-kit-pro/presentation
NextJS version of Material Kit PRO React
Home Page: https://demos.creative-tim.com/nextjs-material-kit-pro/presentation
1.0.0
https://jsfiddle.net/#&togetherjs=HMQxCQ5Izo
Apple
Mac Book Pro
Chrome 80.0.3987.162
I've installed the product as directed in the documentation. I'm using the default NextJS "hello-nextjs" application.
I've created a project level next.config.js file and included all items from the next.config.js within the project folder next-js-material-kit-pro-v1.0.0.
I've installed all necessary components from next.config.js
It appears the next.config.js copied is set to utilize absolute paths as described in the documentation
I should be able to include components in the index file and produce them.
I'm getting an error: Module not found: Error: Can't resolve 'assets/jss/nextjs-material-kit-pro/components/badgeStyle.js' in '/Users/linaar/repos/hello-next/nextjs-material-kit-pro-v1.0.0/components/Badge'
All of the folders and assets are present as expected. It appears that the index is picking up the actual component reference but then I get this error.
I can provide the whole project if necessary. It's just the most basic nextjs startup application.
Tried to use pattern to validate password input, which is from a inherit of a CustomInput, but the pattern does no work, please help
Code snippet:
**<CustomInput
id="pass"
labelText="Your password"
formControlProps={{
fullWidth: true,
}}
inputProps={{
onChange: (event) => handleChange(event),
placeholder: "Password",
type: "password",
startAdornment: (
<InputAdornment position="start">
<Icon className={classes.inputIconsColor}>
lock_utline
</Icon>
</InputAdornment>
),
autoComplete: "off",
required: true,
pattern: "[A-Z]{3,4}",
}}
/>**
1.3.1
https://www.creative-tim.com/new-issue/nextjs-material-kit-pro
macOS monterey version 12.6
macbook pro
Chrome Version 108.0.5359.124 (Official Build) (x86_64is up to date)
cd kit
npm run dev
go to localhost:3000
visit different pages
turn on inspect console
free of errors and a few warnings
navigating the pages for 3 minutes, I see 19 errors and 62 user messages.
The warnings are all related to react 18 no longer supporting ReactDom.render so it should be a quick fix in your next release. The errors seem to be caused by including google map api multiple times causing issues and some other issues related type errors.
I also have a few other questions:
We are trying to refactor a React app into a Nextjs app and we thought it would be a lot easier to code and refactor if the _index and _app components were already in a modern, functional format - instead of being older class components. This is just an easy and minor change, but it will be a huge improvement. I hope that you will seriously consider this. Thanks!
1.2.0
It's the out of the box ZIP file.
Windows 11
Dell XPS 15
N/A
Things are installed and I can run the app
npm install:clean fails on windows because it uses the rm -rf
command which is not a valid command on windows. npm install fails because of an issue with gyp installing node-sass. Updating the version of node-sass from v5 to v6 appears to break a rule somewhere and then fails for that reason.
For the issue with install:clean, you may want to create a separate command for windows users that uses a natively available command; alternately, I think some projects previously made use of the rimraf package for this, though my memory is shaky there.
Surprised to see how out of date some of the libraries are in the theme. I'd expect a purchased product to be using the latest libraries for a fresh start, not versions from a year ago; or at least kept up with the latest bugfix/patch releases. Was hoping to use this product to give myself a jump start; instead I had to spend time trying to fix it.
1.0.0 (according to package.json)
https://www.creative-tim.com/new-issue/nextjs-material-kit-pro
mac os
MacBook pro
chrome 80.0.3987.149 (Official Build) (64-bit)
Go to the ecommerce demo page (link above)
The hover only partially shows, it's clipped along the left hand side
the ripple is similarly obscured, clipped along the left hand side
Should see the full circle of hover/ripple
It's obscured by the block to the left
Presumably I need to change the relative zIndexes - but initial tests haven't worked
1.0
https://github.com/zeit/next.js/blob/master/errors/opt-out-auto-static-optimization.md
Mac
mac
any
npm run build
After updating to nextjs version 9.3 there are some problems. nextjs has implemented Next-gen Static Site Generation (SSG) Support
and the getInitialProps is replaced by new functionality.
The error message is
Warning: You have opted-out of Automatic Static Optimization due to getInitialProps
in pages/_app
.
Read more: https://err.sh/next.js/opt-out-auto-static-optimization
Update the NextJS Material Kit PRO to reflect changes in nextjs 9.3
Registered an issue with [email protected]
but encountered the following errors.
n.a.
https://demos.creative-tim.com/nextjs-material-kit-pro/documentation/styles
OS
MacBook Pro
Chrome 79.0.3945.130
We've decided to use the makeStyles function from Material-UI to override some of thier styles.
Expecting to read the word "their"
Reading the word "thier"
Fix the typo by replacing the word "thier" by the word "their"
Hi where can i put in api key for google maps?
1.3.1
https://www.creative-tim.com/new-issue/nextjs-material-kit-pro
macOS monterey version 12.6
macbook pro
Chrome Version 108.0.5359.124 (Official Build) (x86_64is up to date)
download the kit
cd kit
npm install
build next
should build successfully
adena% next build
info - Linting and checking validity of types
info - Creating an optimized production build
Failed to compile.
./styles/scss/nextjs-material-kit-pro.scss
To use Next.js' built-in Sass support, you first need to install sass
.
Run npm i sass
or yarn add sass
inside your workspace.
Learn more: https://nextjs.org/docs/messages/install-sass
Build failed because of webpack errors
npm run build
see the screen output
adena% npm run build
[email protected] build
next build
info - Linting and checking validity of types ..warn - No ESLint configuration detected. Run next lint to begin setup
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
Warning: You have opted-out of Automatic Static Optimization due to getInitialProps
in pages/_app
. This does not opt-out pages with getStaticProps
Read more: https://nextjs.org/docs/messages/opt-out-auto-static-optimization
info - Collecting page data
Route (pages) Size First Load JS
...
(Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
I encountered this issue when using "build next", it can be overcome using "npm run build". It is just strange that npm run build actually executes next build.
I am just concerned about the webpack errors.
Please note, I don't have a reproducible example because it is your own code base. I just ordered it and wanted to see if it can build.
1.1.0
https://www.creative-tim.com/new-issue/nextjs-material-kit-pro
OSX
Mac Book Pro
Chrome 89.0.4389.90
error - ./assets/scss/nextjs-material-kit-pro.scss?v=1.1.0
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
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
Successful build
Build fails with:
error - ./assets/scss/nextjs-material-kit-pro.scss?v=1.1.0
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
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
I don't know how to provide a basic reproduction without standing up the entire project.
Seeing as how the next-images README advertises this theme I think this should be a priority.
1.3.1
Windows 10
Desktop
Microsoft Edge 109.0.1518.70
1 - Click an item on the Header menu
The menu should appear under the button (item) that was clicked.
appears in the middle of the button (item), hiding the same
None of the links at the bottom of the docs work.
https://demos.creative-tim.com/nextjs-material-kit-pro/documentation/inputs
screensize >960 login div is sized too small
https://ibb.co/NypyT0r
https://ibb.co/Y3jjrc9
thx for checking
Device: Mac / Chrome / Safari
1.3.2
https://demos.creative-tim.com/nextjs-material-kit-pro/presentation
N/A
N/A
N/A
N/A
The heading tags should be following an order by hierarchy.
The title, description and other meta tags shouldn't be the same for all pages.
Not SEO friendly.
1.2.1
http://example.com/no/minimal/repro
Windows 10
Dell laptop
No browser
Download v1.2.1 and unzip it
in folder run "npm install"
the install succeeds
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @material-ui/core@"4.11.4" from the root project
No current solution. I installed using --legacy-peer-deps but I'm wary abut doing so.
I guess I could change package.json to load the last v17 of react.
As I understand it material-ui/core doesn't work with react 18. And I believe react 18 has some breaking changes, and it only works material v5. So I don't see how this will work.
1.2
npm
mac
chrome
just install it with npm install
When using v1.2 there is some conflict between react-animate-on-scroll and react library.
I attach the detail about it.
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= 15.4.1 < 17.0.0-0" from [email protected]
npm ERR! node_modules/react-animate-on-scroll
npm ERR! react-animate-on-scroll@"2.1.5" from the root project
I solve this problem by install with force option, but I have some worry about it.
Is it okay to install with force option?
STEPS TO REPRODUCE
This issue is evident on the live demo site:
https://demos.creative-tim.com/nextjs-material-kit-pro/presentation
...and also if you do a new clean install locally.
ISSUE
When the menu opens, the tooltip box pushes down the entire header, so that everything becomes out of line.
EXPECTED BEHAVIOUR
The dropdown should appear over the main body of the page, so that the header does not change size.
This is the behaviour in the bootstrap version of the demo site:
https://demos.creative-tim.com/material-kit-pro/presentation.html
1.0.0
OSX, iOS
MacBook, iPhone
Latest updates on both devices
The presentation page without issues.
There is a grey bar on top.
Most of the components are not displayed at all.
Most of the proportions are quirked.
The main-card is cut of like this for example.
The code is untouched, I did not make any changes.
While in development mode everything is working fine, but local in production mode or remote deployment with Zeit/Now shows the bug.
1.2.0
https://github.com/creativetimofficial/ct-nextjs-material-kit-pro
OS X 11.5.2
MacBook Pro
v16.2.0
Npm install completes successfully
lots of errors:
npm ERR! gyp ERR! node -v v16.2.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
Hi, I'm going to pay for NextJS Material Kit Pro, and I'm interested in Typescript source code, but I didn't see it in the Product description. Do this product support Typescript code ?
Please can you add an autocomplete custom input? In case that I want to search something that could be preloaded. It's posible? Thanks
1.2.0
https://ntg-sveltekit.azurewebsites.net
linux
any
edge@latest, firefox@latest, chrome@latest
Navigate to the site... View in responsive mode... Look at the site in mobile phone form factors
The banner would remain visible as in all other form factors
The banner and the header section display on top of each other
nextjs-material-kit-pro-v1.1.0
http://localhost:3000/academics/class
Windows
Laptop
Version 83.0.4103.106
Create a link to a page using next/link, lets say you have three pages
Page 1 ( on page I have a link like To Page 2 )
Page 2 - on page 2 redirect to page 3 like router.push('/page3')
Page 3 - Issue is here content loading is not being loaded successfully
Now you click on To Page 3 link if render page 3 but with content loading progress at the top shown in the attached image
Page 3 should be loaded successfully
Content loading is being displayed on the page forever with following error in the console log
index.js:1 Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.
No Idea
Please help me out here, I paid $200 for the winter bundle and the main product I needed from there doesn't even work.
1.2.0
https://github.com/creativetimofficial/nextjs-material-kit
MacOS
Macbook
Chrome Version 96.0.4664.110
npm fails complaining about the React version.
Yarn fails running node-sass
Dependencies install properly so I can work on the template I paid for.
Install fails.
1.2.0
https://demos.creative-tim.com/nextjs-material-kit-pro/components
Windows 10
Chrome
90.0.4430.212 64bit
The option is selected, dropdown menu is staying in place
The option is indeed selected, but menu jumps for whatever reason. If menu has greater amount of inputs, the 'jump' might be pretty huge.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.