How to use AtlasKit Editor with Next.js? - next.js

I'm trying to use AtlasKit with Next.js 8, but for some reason, there is a SyntaxError: Unexpected token export error when attempting to build.
I think it's an issue with #atlaskit/editor-core not being properly preprocessed for ES6 (via webpack or babel, etc), but I'm not sure. Any ideas?
//Home.tsx
import * as React from 'react';
import * as classnames from 'classnames';
import * as css from './Home.css';
import { Editor } from '#atlaskit/editor-core';
export const Home: React.FunctionComponent = props => (
<div className={classnames('test', css.home)}>
<Editor />
</div>
);
I've created a repo to replicate the issue here: https://github.com/brandontle/nextjs-with-atlaskit
The file that uses AtlasKit Editor is ~/src/components/Home.tsx.

Related

Destructuring CSS module import

I use CSS modules in my React app. Today I was trying to code and had to upgrade some dependencies - react from 17.0.1 to 17.0.2, react-scripts from 4.0.3 to ^5.0.0, eslint from ^7.32.0 to 8.0.0 - and I had a bunch of errors. I managed to fix a lot of them, but I'm getting a lot of errors like this one:
export 'headerImageWrapper' (imported as 'headerImageWrapper') was not found in './Header.module.css' (possible exports: default)
I've been importing destructured classes from CSS modules - and it was working until today.
import React from 'react';
import logo from '../../assets/logo.png';
import {
headerWrapper,
headerImageWrapper,
headerLogo,
headerTitleWrapper,
} from './Header.module.css';
export default function Header() {
return (
<div className={headerWrapper}>
<div className={headerImageWrapper}>
<img className={headerLogo} src={logo} alt="Logo" />
</div>
<div className={headerTitleWrapper}>
<p>Biblioteca</p>
<p>Colégio</p>
</div>
</div>
);
}
It does work when I import it as "styles", but I wanted to keep it destructured so I didn't have to use "styles.headerWrapper"
I am getting this same error and don't want to revert to styles.myStyle. So right now I am still importing the entire styles object, import styles from "./blah.module.css", but then I deconstruct the variables after const {styleOne, styleTwo} = styles;. This allows you to keep everything else the same, but still kinda annoying.

nextjs " Failed to compile pages/_app.js " how to fix it [duplicate]

This question already has answers here:
Next.js Global CSS cannot be imported from files other than your Custom <App>
(11 answers)
Closed 1 year ago.
How to fix it, it happens when compiling
This is the official document for your problem from the Next.js team:
https://nextjs.org/docs/basic-features/built-in-css-support
You need to import global CSS in the _app.js file to use it globally in your application.
For example, use Tailwind CSS as global like this:
// your _app.js file
// import your CSS file you want to use globally here
import 'tailwindcss/tailwind.css';
const CustomApp = ({ Component, pageProps }) => (
<Component {...pageProps} />
);
export default CustomApp;
If you just want to use CSS for specific components, please use module CSS. It will be helpful to code splitting your bundle files when you build the production version.
Example to use modular CSS just only for your component:
import styles from './index.module.scss';
const YourComponent = () => {
return <div className={styles.example}>...</div>;
};
export default YourComponent;
For special cases that you need to import CSS files from the library inside your node_modules. You can import that CSS file from node_modules inside your specific component.
For example:
import { FC } from 'react';
import Slider from 'react-slick';
import 'react-slick/css/slick.css';
import 'react-slick/css/slick-theme.css';
const SlickSlider: FC<any> = ({ children, ...restProps }) => {
return <Slider {...restProps}>{children}</Slider>;
};
export default SlickSlider;

Import .stories file into another .stories file with Storybook?

Can you import one .stories file into another .stories with Storybook?
Eg I have
/component1/component1.tsx
/component1/component1.stories.tsx
/component2/component2.tsx
/component2/component2.stories.tsx
I would like to also have a story for all of my components:
In /all-components/all-components.stories.tsx
import * as React from 'react';
import Component1Story from '../component1/component1.stories.tsx';
import Component2Story from '../component2/component2.stories.tsx';
export const Test = () => {
return (
<div>
<Component1Story />
<Component2Story />
</div>
);
};
export default {
title: 'Components',
};
I get this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of storyFn.
this should be doable as your stories are just React components. Your problem is happening because you're trying to import the default from your module, which is actually just an object:
export default {
title: 'Components',
};
All stories are named exports, and you should import them with destructuring:
import { Component1Story } from '../component1/component1.stories';
import { Component2Story } from '../component2/component2.stories';
I created an example for you which shows a working scenario here.
p.s. It's interesting to know that starting with Storybook 6 there's a new mechanism to simplify the creation and reuse of stories so stay tuned! It's called Args.

problem with react-quill library with next.js project

I'm running into a weird problem. I'm using NextJS for its server-side rendering capabilities and I am using ReactQuill as my rich-text editor. To get around ReactQuill's tie to the DOM, I'm dynamically importing it. However, that presents another problem which is that when I try to access the component where I'm importing ReactQuill via a anchor link is not working but I can access it via manually hit the route. Here is my directories overview,
components/
crud/
BlogCreate.js
pages/
admin/
crud/
blog.js
index.js
blogs/
index.js
In my pages/admin/index.js
...
<li className="list-group-item">
<Link href="/admin/crud/blog">
<a>Create Blog</a>
</Link>
</li>
...
In my pages/admin/crud/blog.js
import BlogCreate from "../../../components/crud/BlogCreate";
...
<div className="col-md-12">
<BlogCreate />
</div>
In my components/crud/BlogCreate.js
import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "../../node_modules/react-quill/dist/quill.snow.css";
...
<div className="form-group">
<ReactQuill
value={body}
placeholder="Write something amazing..."
onChange={handleBody}
/>
</div>
in order to use import "../../node_modules/react-quill/dist/quill.snow.css" in components/crud/BlogCreate.js I use #zeit/next-css and here is my next.config.js
const withCSS = require("#zeit/next-css");
module.exports = withCSS({
publicRuntimeConfig: {
...
}
});
Problem
when I click the Create Blog it should be redirect me http://localhost:3000/admin/crud/blog but it just freeze.
But if I manually hit http://localhost:3000/admin/crud/blog then it go to the desire page and work perfect.
And as soon as I manually load that page then Create Blog works. Now I really don't understand where is the problem? Because it show no error that's why I haven't no term to describe my problem that's why I give all the nasty code and directories which I suspect the reason of this error.
It's hard to give you any solution without seeing the entire project(As you mentioned that it shows no error).
You may remove the #zeit/next-css plugin because Next.js 9.3 is Built-in Sass Support for Global Stylesheets. You can use it for css also.
Create a pages/_app.js file if not already present. Then, import the quill.snow.css file:
import "../../node_modules/react-quill/dist/quill.snow.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
If it gives any error then you can create a directory/file to copy-paste the quill.snow.css code in that file.
pages/
_app.js
styles/
quill_style.css
Then import the file in _app.js like,
import "../styles/styles_quill.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
Eventually you can import your custom gobal css here also.
If although the problem remains then provide your git repository. happy coding ✌️
First: remove your #zeit/next-css setup not needed anymore since next.js version 10.
Second: update nex.js to version 10 you could then use regular import on your modules.
import "../../node_modules/react-quill/dist/quill.snow.css";
By the way, I had the same issue with your Nextjs course. ;)

JssProvider in Material-UI isn't applying my custom production prefix to CSS

I've built a fairly simple React app based on create-react-app which uses the Material-UI for its interface components. It also depends on one of my own packages which also uses Material-UI (same version) for a couple of shared components.
Things were looking good locally until I ran a production build and deployed it. Some of the styles were behaving oddly, for example the Material-UI grid was much narrower than when running locally.
I did some reading and found a few instances of people discussing colliding class names under my scenario. This took me to some official Material-UI documentation which provides the following example code to use a custom class name prefix:
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
dangerouslyUseGlobalCSS: true,
productionPrefix: 'c',
});
function App() {
return (
<JssProvider generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
Before applying this fix when inspecting my production app's source code I could see the outermost DIV using the CSS class jss2 jss24.
After applying this fix my production app actually visually renders the same layout as my development version and so would appear to be fixed. However, examining the source shows the outermost DIV to have the class MuiGrid-container-2 MuiGrid-spacing-xs-8-24 which suggests to me something isn't right. I could leave it like this but it does mean I'm running with unoptimised code.
Am I doing something wrong here? Or is there an alternative resolution? I'm using current latest version of #material-ui/core (3.3.2) and the full contents of my App.js are:
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { OidcProvider } from 'redux-oidc';
import JssProvider from 'react-jss/lib/JssProvider';
import Routes from './routes';
import store from './store';
import userManager from './utils/userManager';
import {
CustomUiTheme as Theme,
CustomUiLayout as Layout,
CustomUiSnackbar as Snackbar,
CustomUiModalAlert as Alert
} from 'custom-ui';
import Loading from './components/loading';
import { createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
dangerouslyUseGlobalCSS: true,
productionPrefix: 'tw',
});
class App extends Component {
render() {
return (
<JssProvider generateClassName={generateClassName}>
<Provider store={store}>
<OidcProvider store={store} userManager={userManager}>
<Theme>
<Loading />
<Layout variant="xmas">
<Alert />
<Routes />
<Snackbar />
</Layout>
</Theme>
</OidcProvider>
</Provider>
</JssProvider>
);
}
}
export default App;

Resources