We Keep Coding

Can we disable some 'css-' class names that MUI is injecting onto it's components? (Next JS & MUI)

So yesterday, I've just migrated my create-react-app project over to Next JS using the latest version currently out there (12.1.0), following the guide at https://nextjs.org/docs/migrating/from-create-react-app. I am also using MUI still (as before I migrated) using some of the below packages:
"#mui/icons-material": "^5.3.0",
"#mui/lab": "^5.0.0-alpha.62",
"#mui/material": "^5.3.0",
Apart from ironing out a few of the issues in the last 24 hours, I am coming across a new issue where I have noticed that ALL of my 'MuiButton' components used around my site now contain a new CSS class name (which so far appears to be out of my control and injected on it somehow). For example, a button in my menu navigation now contains css-1w1rijm-MuiButtonBase-root-MuiButton-root (as seen below) at the very end of the class attribute.
<button class="MuiButton-root MuiButton-navigation MuiButton-navigationPrimary MuiButton-sizeMedium MuiButton-navigationSizeMedium MuiButtonBase-root HeaderOptsstyle__OptionButton-sc-pfmh6j-3 elnHDd css-1w1rijm-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" aria-label="my account">
This wouldn't be a problem really if there were no CSS styles being applied to this class name, however that is unfortunately the case. It appears that there are lots of styles being imported from somewhere which is overriding my theme I have set up in my global 'createTheme'.
Already been digging around the web for any reason as to why this has suddenly started happening since the migration, but I'm not seeing any clear reasons here and wonder if anyone can help me to understand this, or what needs to be done to prevent this from interfering with my own styles.
I know this was NOT happening on my CRA before migration as my staging server has not been re-deployed since and it currently does NOT contain any of the 'css-' classes on the same buttons, and the MUI versions have not changed since.
Apologies if I'm lacking any information to help assist with this, but happy to provide any bits if asked.
My package.json dependancies and devDependencies are also seen below.
"#chec/commerce.js": "^2.8.0",
"#date-io/date-fns": "^1.3.13",
"#emotion/cache": "^11.7.1",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.3.0",
"#mui/lab": "^5.0.0-alpha.62",
"#mui/material": "^5.3.0",
"#types/date-fns": "^2.6.0",
"babel-plugin-styled-components": "^2.0.3",
"date-fns": "^2.28.0",
"dotenv": "^8.2.0",
"embla-carousel-react": "^2.0.3",
"hex-rgb": "^5.0.0",
"hex-rgba": "^1.0.2",
"lodash": "^4.17.21",
"lodash-webpack-plugin": "^0.11.6",
"moment": "^2.29.1",
"next": "latest",
"react": "17.0.2",
"react-app-polyfill": "^2.0.0",
"react-datepicker": "^4.4.0",
"react-dom": "17.0.2",
"react-hook-form": "^7.26.0",
"react-redux": "^7.2.4",
"react-uuid": "^1.0.2",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"rgb-hex": "^4.0.0",
"string-strip-html": "^9.1.5",
"styled-components": "^5.2.1"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/preset-env": "^7.12.16",
"#babel/preset-react": "^7.12.13",
"#babel/register": "^7.12.13",
"#svgr/webpack": "^6.2.1",
"#zeit/next-sass": "1.0.1",
"babel-loader": "^8.2.2",
"babel-plugin-transform-imports": "^2.0.0",
"node-sass": "7.0.1"
},```

The issue is that your styling engine (emotion) and MUI are competing on what styles to apply when a css selector has the same level of specificity. To solve this you need to explicitly setup emotion to prepend the styles so that the stylesheets you write take precedence over MUI. MUI has further instructions here.

React Material UI Button component not working

I have installed create-react-app and material-ui/core and have proceeded to make a simple Button.
After adding the Button to App file and using command npm start I'd expect the button to show in the browser, instead I get Error invalid hook call.
The only issue I could think of is the dependencies may be corrupt as the hook is clearly valid.
Here is the simple Button:
App.js
import {Button} from '#material-ui/core';
export default function App() {
return (
<div className="App">
<Button>Click Me</Button>
</div>
);
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Index.html
<div id='root'></div>
And here is the package.json file (dependencies only shown here to reduce code length):
{
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}

Solved: There was an issue with the dependencies, I learnt that even if you install an npm package you must still go to the terminal in the source code editor and install the dependency into the package.json file. Here is the fixed file that allows the button to be displayed in the browser:
package.json:
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
The line "#material-ui/core": "^4.12.3", has been added so that the package can use the dependency.

try by adding the packages you want manually and then run npm install on the terminal

Syntax Error: Error: Failed to load config "ckeditor5" to extend from. While importing CKEditor to Vuejs

Hi guys so currently im encountering a problem. Im trying customize a build, so everything works fine in the ckeditor ( which i cloned ) the sample.html works fine too. But when im trying to implement the customize build in Vue 2 i got the error like the title ( the original works okay btw, like the classic build ).
Syntax Error: Error: Failed to load config "ckeditor5" to extend from.
Referenced from: C:\Users\nam\Desktop\CKEditorLib\ckeditor5\.eslintrc.js
at _normalizeObjectConfigDataBody.next (<anonymous>)
at _normalizeObjectConfigData.next (<anonymous>)
I dont know why the referenced error is from the library, not the package that i have installed.
Here is my package.json
"#ckeditor/ckeditor5-adapter-ckfinder": "^24.0.0",
"#ckeditor/ckeditor5-alignment": "^24.0.0",
"#ckeditor/ckeditor5-autoformat": "^24.0.0",
"#ckeditor/ckeditor5-basic-styles": "^24.0.0",
"#ckeditor/ckeditor5-block-quote": "^24.0.0",
"#ckeditor/ckeditor5-build-custom": "file:../../CKEditorLib/ckeditor5/packages/ckeditor5-build-custom",
"#ckeditor/ckeditor5-ckfinder": "^24.0.0",
"#ckeditor/ckeditor5-core": "^24.0.0",
"#ckeditor/ckeditor5-dev-utils": "^20.0.0",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^23.6.1",
"#ckeditor/ckeditor5-easy-image": "^24.0.0",
"#ckeditor/ckeditor5-editor-classic": "^24.0.0",
"#ckeditor/ckeditor5-essentials": "^24.0.0",
"#ckeditor/ckeditor5-heading": "^24.0.0",
"#ckeditor/ckeditor5-image": "^24.0.0",
"#ckeditor/ckeditor5-indent": "^24.0.0",
"#ckeditor/ckeditor5-link": "^24.0.0",
"#ckeditor/ckeditor5-list": "^24.0.0",
"#ckeditor/ckeditor5-media-embed": "^24.0.0",
"#ckeditor/ckeditor5-paragraph": "^24.0.0",
"#ckeditor/ckeditor5-paste-from-office": "^24.0.0",
"#ckeditor/ckeditor5-table": "^24.0.0",
"#ckeditor/ckeditor5-theme-lark": "^24.0.0",
"#ckeditor/ckeditor5-typing": "^24.0.0",
"#ckeditor/ckeditor5-vue2": "^1.0.5",
"core-js": "^3.6.5",
"postcss-loader": "^3.0.0",
"raw-loader": "^0.5.1",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.2",
"vue": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
And here is the code in .vue file, one thing
<template>
<div class="hello">
<ckeditor
:editor="editor"
v-model="editorData"
:config="editorConfig">
</ckeditor>
</div>
</template>
<script>
import ClassicEditor from '#ckeditor/ckeditor5-build-custom/src/ckeditor'
//Same error happened if i try to import ClassicEditor from /buid/ckeditor
export default {
name: 'HelloWorld',
data() {
return {
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
// The configuration of the editor.
}
};
}
}
</script>
Thank you for reading, will be appreciated for any help

So this popup becauseof the conflict version of ESLint in my package.json and in ckeditor5 ( which i forked ) is different.
Anyway, if you want to build a custom like me
Fork all the repo.
Create your custom build but dont push it into the repo which you forked.
Instead create a new reposity, push your custom build into there.
Install it via
npm i <your-github-name>/<your-repo-name>#<your-branch>

React-Native Upgrade 0.26 "Super expression must either be null or a function, not null"

After upgrading from ReactNative 0.25 to 0.26 i get this well known error:
"Super expression must either be null or a function, not null".
I know that the most common reason is to import 'Component' from 'react-native' instead from 'react'.
But in all my components i do it right apparently:
import React, { Component } from 'react';
Has anyone experienced another root cause for this error? For now, i create a second, complete new project and try to build it up from scratch with the already existing code of the main project until the error may occur someday. But this is really a time killer....
I don't use RNMK-Library, which is known for this deprecation.
My Dependencies seems to be valid for 0.26:
"dependencies": {
"immutable": "^3.8.1",
"react": "15.0.2",
"react-native": "0.26.2",
"react-native-app-intro": "^1.0.2",
"react-native-button": "^1.6.0",
"react-native-drawer": "^2.2.2",
"react-native-fetch-blob": "^0.4.2",
"react-native-fs": "^1.4.0",
"react-native-i18n": "0.0.8",
"react-native-navbar": "^1.5.0",
"react-native-router-flux": "^3.22.23",
"react-native-router-redux": "^0.2.2",
"react-native-search-bar": "^2.11.0",
"react-native-side-menu": "^0.19.0",
"react-native-simple-store": "^1.0.1",
"react-native-sound": "^0.8.3",
"react-native-sqlite-storage": "^2.1.6",
"react-native-swiper": "^1.4.4",
"react-native-vector-icons": "^2.0.2",
"react-redux": "^4.4.5",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-saga": "^0.10.4",
"redux-thunk": "^2.1.0",
"rnpm": "^1.7.0"
}

In between i found out the root cause and provided a pull request to the following library: https://github.com/Qwikly/react-native-router-redux/pull/46
(but the dependencies of this library should be updated also, i wrote about it in the comments section of the PR)

Browserify module not found with recursive require (post-Babel transpile)

I have the Browserify entry-file index.js that imports from a file in the same directory and the the 'render' function from 'react-dom', which is installed in node_modules (see Package.json for versioning) --
// index.js
import { Header } from './header'
import { render } from 'react-dom'
render(<Header />, document.getElementById('root'));
I also have another file header.js which imports 'react' and creates a simple React class --
// header.js
import React from 'react'
export const Header = React.createClass({
render:() => {
return (
<div>
some header title
</div>
)
}
});
I use Babel to transpile es6 code so the "import" statements map to the necessary "require" statements. As far as I can tell this step is working properly. After transpiling with Babel, I use Browserify to package all the dependencies into a single file. The problem I am running into is I'm getting an "Uncaught ReferenceError: React is not defined" once I attempt to render the packaged javascript.
It looks like imports work fine in index.js but are not being resolved properly in header.js. For example, if I import React from 'react' in index.js, everything renders properly. It looks like I'm having an issue with recursive requires, but I can't seem to figure out why that is the case. Any thoughts would be greatly appreciated. I would be glad to supply more information as well.
For reference, here is an excerpt from my Package.json --
{
"dependencies": {
"babel-preset-es2015": "~6.3.13",
"babel-preset-react": "~6.1.18",
"babel-register": "~6.2.0",
"history": "^1.12.0",
"material-ui": "^0.13.4",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "~1.0.0",
"react-tap-event-plugin": "^0.2.1"
},
"devDependencies": {
"browserify": "~11.2.0",
"del": "^2.1.0",
"express": "~4.13.3",
"express-urlrewrite": "~1.2.0",
"gulp": "~3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "~6.1.1",
"gulp-print": "~2.0.1",
"gulp-rename": "~1.2.2",
"gulp-sass": "~2.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-uglify": "^1.5.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
}

For example, if I import React from 'react' in index.js, everything renders properly
Every file that uses JSX syntax (e.g. <Header />) needs to import React. You get the error because you are not doing that in index.js and it works once you are doing it.
If you'd look at the compiled code, you will see that <Header /> is converted to React.createElement(Header).