I am trying to use swiper with NextJS but the simplest example is causing Invalid hook call. I tried to downgrade the swiper version to 7 but that didn't worked.
Here is my package.json
"dependencies": {
"clsx": "^1.1.1",
"next": "12.1.6",
"next-sanity": "^0.5.2",
"next-sanity-extra": "^0.2.3",
"react": "18.1.0",
"react-dom": "18.1.0",
"sanity-react-extra": "^0.2.4",
"swiper": "^8.2.4",
"zustand": "^4.0.0-rc.1"
},
"devDependencies": {
"#types/node": "17.0.38",
"#types/react": "18.0.10",
"#types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"eslint": "8.16.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24",
"typescript": "4.7.2"
}
Here is the swiper component
import React from "react";
import { HomHeroProps } from "#lib/#types/home.types";
import { Swiper, SwiperSlide } from "swiper/react";
export const Hero: React.FC<HomHeroProps> = ({ carousel, description }) => {
return (
<Swiper
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log("slide change")}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
</Swiper>
);
};
Temporarily fixed it by downgrading to react 17
Related
I'm working on a NextJS application with PurgeCSS. I have to restart the server every single time I change the classname of a component.
Here are my postcss.config.js:
plugins: [
[
'#fullhuman/postcss-purgecss',
{
content: [
'./src/pages/**/*.{js,jsx,ts,tsx}',
'./src/pages/*.{js,jsx,ts,tsx}',
'./src/components/**/*.{js,jsx,ts,tsx}',
'./src/containers/**/*.{js,jsx,ts,tsx}',
],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ['html', 'body'],
enableDevPurge: false,
},
],
'postcss-preset-env',
],
};
My package.json dependencies:
"dependencies": {
"date-fns": "^2.29.3",
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.7.1",
"sass": "^1.57.1"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^5.0.0",
"#types/node": "18.11.18",
"#types/react": "18.0.26",
"#types/react-dom": "18.0.10",
"#typescript-eslint/eslint-plugin": "5.48.0",
"#typescript-eslint/parser": "5.48.0",
"autoprefixer": "^10.4.13",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-next": "^0.0.0",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.3",
"lint-staged": "13.1.0",
"next-purge-css-modules": "1.1.0",
"postcss": "^8.4.20",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.8.3",
"prettier": "^2.8.1",
"typescript": "4.9.4"
}
I'm using global styles, not module styles, and scss instead of css.
This is my _app.tsx:
import '../styles/Global.scss';
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
Say I have these two styles:
.bg-blue { background-color: blue; }
.bg-red { background-color: red; }
If I had bg-blue used on a div's className, and I change it to bg-red, its ruleset is missing from the stylesheet.
I'm assuming purgecss doesn't update the stylesheet and does only one purge on server start.
It's definitely not ideal, but I don't care if I can just disable the whole purge functionality. However, can't find a way for that either.
Any tips?
I am using Parcel to create bundles for my React Typescript application along with Shadow.
Below are my configurations,
///index.tsx file
import customCSS from "bundle-text:./assets/antd.scss"
const appContainer = document
.getElementById(config.containerId)
?.attachShadow({ mode: "open" }) as ShadowRoot
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
appContainer
)
let style = document.createElement("style")
style.textContent = customCSS
appContainer.appendChild(style)
And below is app.tsx file
import React, { Suspense } from "react"
import { BrowserRouter, Route, Routes } from "react-router-dom"
import "./app.scss"
import NotFound from "./pages/404"
import HomePage from "./pages/Home"
import Layout from "./pages/Layout"
const Application: React.FC<any> = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<BrowserRouter basename="/">
<Routes>
<Route path="*" element={<NotFound />} />
<Route element={<Layout />}>
<Route index element={<HomePage />} />
</Route>
</Routes>
</BrowserRouter>
</Suspense>
)
}
below is assets/antd.scss file
#import "npm:antd/dist/antd.min.css";
I have added declaration.d.ts file for declaring bundle-text:.
declare module "bundle-text:*" {
const value: string
export default value
}
ISSUE:
Now issue is that bundle-text is working fine but normal css import is not working. If I comment the bundle-text, then regular CSS import is working fine.
EXPECTED:
Both bundle-text and regular CSS import should work properly.
Below is my package.json dependencies,
"dependencies": {
"antd": "^4.18.8",
"history": "^5.2.0",
"i18next": "^21.6.11",
"parcel": "2.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.4",
"react-router-dom": "^6.2.1",
"typescript": "4.5.5"
},
"devDependencies": {
"#csstools/normalize.css": "^12.0.0",
"#parcel/transformer-inline-string": "2.3.2",
"#parcel/transformer-sass": "^2.3.2",
"#trivago/prettier-plugin-sort-imports": "^3.2.0",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"#typescript-eslint/eslint-plugin": "^5.12.0",
"#typescript-eslint/parser": "^5.12.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.9.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^27.5.1",
"node-sass": "^7.0.1",
"parcel": "^2.3.2",
"postcss": "^8.4.6",
"postcss-modules": "^4.3.0",
"prettier": "^2.5.1",
"process": "^0.11.10",
"sass": "^1.49.8",
"typescript": "^4.5.5"
},
Is it something which I am missing here?
Update:
I have updated added my code to the sandbox environment -
parcel-shadowDOM-react-app
Unfortunately, I think this a bug in parcel - I created a simplified reproduction here and filed this github issue.
As a workaround that you could use before we fix this, I've found that if you do all your css imports through the bundle-text pipeline, parcel will keep it straight. I.e. you'll want to find places in your app where you do global css imports (e.g. import "./styles.css") with this:
import stylesString from "bundle-text:./styles.css"
let styleElement = document.createElement("style");
styleElement.textContent = stylesString ;
shadowRoot.appendChild(styleElement);
You need use sass-to-string package to transform your scss in css first
I have a vuetify application that is set up using vue cli. Unfortunately, some CSS styles are not applied properly.
Example: I am using a v-text-field which is rendered fine except that the input element gets borders set by user agent stylesheet.
I saw this post, and followed its advise to explicitly import VTextField in my main.ts. The result is that I do get the correct CSS loaded and applied to my input field, but unfortunately only in dev mode (npm run serve). When I build my app for production (npm run build), the styles are not linked.
Any advise?
main.ts (with explicitly loading components like VTextField):
import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure you are using css-loader
import "../node_modules/typeface-roboto/index.css";
import Vue from "vue";
import { VBtn, VCol, VContainer, VList, VRow, VTextField } from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
Vue.use(vuetify, {
iconfont: "md",
components: {
VBtn,
VCol,
VContainer,
VList,
VRow,
VTextField
}
});
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");
App.vue:
<v-app>
<TopNavigationbar />
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</template>
<script lang="ts">
import Vue from "vue";
import TopNavigationbar from "./components/TopNavigationbar.vue";
export default Vue.extend({
name: "App",
components: {
TopNavigationbar
},
data: () => ({
//
})
});
</script>
<style lang="scss">
#import "../node_modules/typeface-roboto/index.css";
$font-stack: Roboto, sans-serif;
#app {
font: 100% $font-stack;
}
</style>
And package.json:
{
"name": "rpgbattle-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "./node_modules/.bin/vue-cli-service serve",
"build": "./node_modules/.bin/vue-cli-service build",
"test:unit": "./node_modules/.bin/vue-cli-service test:unit",
"lint": "./node_modules/.bin/vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"material-design-icons-iconfont": "^5.0.1",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"uuid": "^7.0.3",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.1.6",
"vuetify": "^2.2.26",
"vuex": "^3.3.0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#types/sockjs-client": "^1.1.1",
"#types/stompjs": "^2.3.4",
"#types/uuid": "^7.0.3",
"#typescript-eslint/eslint-plugin": "^2.30.0",
"#typescript-eslint/parser": "^2.30.0",
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-typescript": "~4.3.0",
"#vue/cli-plugin-unit-jest": "~4.3.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "1.0.0-beta.31",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.1.2",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.14.0",
"prettier": "^1.19.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typeface-roboto": "0.0.75",
"typescript": "~3.8.3",
"vue-cli-plugin-vuetify": "~2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"engines": {
"node": "^10.14.1",
"npm": "^6.4.1"
}
}
I solved the problem by cleaning up my code, not sure which change exactly made the difference:
I had a duplicate call of Vue.use(Vuetify), one in my main.ts (as posted), a second one in the imported file plugins/vuetify.ts.
In the same file (plugins/vuetify.ts), I had a line import Vuertify from "vuetify" which I changed to import Vuertify from "vuetify/lib", according to this documentation.
I am using asp.net core and React.js for an application.Everything is happeing in visual studio. I am trying to create a schedule but I have an error when I use 'let ajax = new Ajax('Home/GetData', 'GET', false); '. The error:
Unexpected token. a constructor method accessor or property was
expected
Scheduler.tsx
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '#syncfusion/ej2-react-schedule';
import { RouteComponentProps, withRouter } from 'react-router';
import { connect } from 'react-redux';
import { Ajax } from '#syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '#syncfusion/ej2-data';
export default class Scheduler extends React.Component<RouteComponentProps<{}>, {}> {
private dataManager: object = [];
let ajax = new Ajax('Home/GetData', 'GET', false); //here
render() {
<h1>nerge</h1>
return <ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: dataManager }}>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>;
}
}
package.json
{
"name": "WebApplication",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "4.6.0",
"#types/react": "15.0.35",
"#types/react-dom": "15.5.1",
"#types/react-hot-loader": "3.0.3",
"#types/react-redux": "4.4.45",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/react-router-redux": "5.0.3",
"#types/webpack": "2.2.15",
"#types/webpack-env": "1.13.0",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"domain-task": "^3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"history": "4.6.3",
"jquery": "3.2.1",
"node-noop": "1.0.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-router-dom": "4.1.1",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0"
},
"dependencies": {
"#syncfusion/ej2-react-schedule": "^18.1.44"
}
}
How can I solve this problem? Thank you.
No matter I use Provider in my rendering code or not, I get a blank screen. Then, I found that even I just import Provider from react-redux , I will get a blank screen. But if I comment out the import { Provider } from 'react-redux', the apps work sucessfully.
As suggested by the official repo, I have checked there is no duplicate react module installed with npm ls react and the version of react-redux is above 5, which should be working with react-native.
How should I solve the problem?
Thanks.
App.js:
import React from 'react';
import {
Platform,
} from 'react-native';
import { Router, Scene } from 'react-native-router-flux';
import { Provider } from 'react-redux';
import Home from './pages/Home';
import Chat from './pages/Chat';
export default class App extends React.Component {
render() {
return (
<Router>
<Scene key='root' style={{paddingTop: Platform.OS === 'ios' ? 64 : 54}}>
<Scene key='home' title='Home' component={Home}/>
<Scene key='chat' title='Chat' component={Chat}/>
</Scene>
</Router>
);
}
}
Package.json dependencies:
"dependencies": {
"async-storage": "^0.1.0",
"body-parser": "^1.18.1",
"classnames": "^2.2.5",
"cookie": "^0.3.1",
"es6-promise": "^4.1.1",
"express": "^4.15.4",
"firebase": "^3.9.0",
"jsonwebtoken": "^8.0.1",
"mkdirp": "^0.5.1",
"moment": "^2.18.1",
"mongoose": "^4.11.11",
"morgan": "^1.8.2",
"multer": "^1.3.0",
"nodemailer": "^4.1.0",
"normalizr": "^3.2.3",
"object-assign": "^4.1.1",
"passport": "^0.4.0",
"passport-facebook": "^2.1.1",
"passport-jwt": "^3.0.0",
"prop-types": "^15.5.10",
"react": "16.0.0-alpha.12",
"react-native": "0.47.0",
"react-native-gifted-chat": "0.0.10",
"react-native-router-flux": "^4.0.0-beta.21",
"react-redux": "5.0.5",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-form": "^7.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^4.9.1",
"redux-thunk": "^2.2.0",
"serialize-javascript": "^1.4.0",
"superagent": "^3.6.0",
"validator": "^8.2.0",
"webpack-isomorphic-tools": "^3.0.4"
}
}
Why dont you use react's component. Look below
import React, { Component } from 'react'
use the react-redux for the connect like
import { connect } from 'react-redux'
and
export default connect(mapStateToProps, {sampleActionHere})(ComponentsName)
I think I have solved the problem by upgrading react-redux to 5.0.6.