I am refactoring an application from Nuxt2 to Nuxt3 and I use PanZoom for panning and zooming a specific div.
My package.json looks like below
{ "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "devDependencies": { "nuxt": "^3.0.0" }, "dependencies": { "vue-panzoom": "^1.1.6" } }
as proposed, I use the plugin folder to declare my panzoom plugin like
import panZoom from 'vue-panzoom' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(panZoom) })
I do not declare the plugin in the nuxt.config.ts file as Nuxt 3 auto-configures plugins.
then I try to test the installation with a snippet like
<panZoom> <img src="https://picsum.photos/300"> </panZoom>
This does not work. The console.log shows
Cannot create panzoom for the current type of dom element
this shows that Nuxt foundn the panzoom plugin, but cannot use it for a reason unknown to me.
Can anybody help me on this.
Thanks i advance
see details of problem
Related
I have a nuxt 3 app, where i want to set global styles via .less files.
nuxt.config.ts
css: [
"#/assets/less/main.less"
],
If i run yarn run dev everything works fine, but when i run
yarn run build (nuxt build) and yarn run preview(nuxt preview) the .less files are just not there. For some reason the build doesnt contain any of the styles from the .less files.
I tried to add the less-loader package (although as i know its not needed in nuxt3).
I guess the problem is around the difference of NODE_ENV production / develop,but im not sure how or what should i config to get the build involve the .less files.
here is my package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"analyze": "nuxt analyze",
"cleanup": "nuxt cleanup"
},
"devDependencies": {
"#nuxtjs/eslint-config": "^11.0.0",
"#nuxtjs/eslint-config-typescript": "^11.0.0",
"#popperjs/core": "^2.11.6",
"bootstrap": "^5.2.2",
"dayjs": "^1.11.5",
"eslint": "^8.24.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"line-clamp": "^1.0.0",
"nuxt": "3.0.0-rc.10",
"vue": "^3.2.40"
},
"dependencies": {
"#microsoft/signalr": "^7.0.0",
"bootstrap-vue-3": "0.4.13",
"mitt": "^3.0.0",
"vue-disqus": "^5.1.0",
"vue-gtag": "^2.0.1",
"vue-next-masonry": "1.1.3",
"vue-tweet": "^2.0.2"
}
}
Is there anyone else who faced the issues just like me? I try to make a GET request to my API endpoint it keeps on returning 404 when the application is deployed on Vercel - it works perfectly fine on locally.
Even it is a simple api that are provided by the Next.JS by default.
default api location: pages/api/hello
export default async function handler(req, res) {
res.status(200).json({
name: 'John Doe',
})
}
My package.json
{
"name": "my-next-js-sample"
"version": "0.1.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"axios": "^1.1.3",
"cheerio": "^1.0.0-rc.12",
"dayjs": "^1.11.6",
"firebase": "^9.13.0",
"next": "13.0.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.26.0",
"eslint-config-next": "13.0.0"
}
}
This is how I'd structured my folders.
This is how'd called the api routes.
http://localhost:3000/api/hello
http://localhost:3000/api/v2/live
Perfectly can call any api routes just like this example in local development.
Vercel Project Settings
After I'd created a new vercel account and deployed this project into that new one, then the problem has solved without knowing the actual issues.
For anyone crossing with this problem, this issue might be your guy
In a nutshell: Standalone configuration is not yet supported.
I have a developed a sample application in nextjs and deployed this sample application using npm run build command.
I am following this (https://nextjs.org/docs/advanced-features/custom-server) article for a custom server deployment.
I have created a server.js file for custom server at the root level of build directory.
and modified the following in package.json:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
and next.config.js
module.exports = {
reactStrictMode: true,
};
const path = require("path");
module.exports = {
distDir: "build",
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
env: {
DOM: process.env.DOM,
SERDOM: process.env.SERDOM,
PAPI: process.env.PAPI,
UAPI: process.env.UAPI,
PAEXIST: process.env.PAEXIST,
USEREXIST: process.env.USEREXIST
},
};
Now after that , I am a bit confused. Should I give the path of server.js using pm2 ?
server.js is using port 3000 and nextjs frontend app is using 3001.
Initially my deployment was not working and throwing 404 error but now it is working but here is some issue in it.
When I run the npm run build command to generate a new build/release and try to deploy again then my nextjs deployed app is not displaying the new changes.
Why ?
Does it get from somewhere else or from cached objects ?
How can I enable/display the updated deployment to my end user ?
Moreover, what is the best way to deploy nextjs app first time and after then latest deployment ?
================================package.json================================
{
"name": "New demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"bootstrap": "^5.0.2",
"next": "11.0.1",
"node-sass": "^4.14.1",
"react": "17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "17.0.2",
"react-icons": "^4.2.0"
},
"devDependencies": {
"eslint": "7.29.0",
"eslint-config-next": "11.0.1"
},
"proxy": "http://localhost:3008"
}
Try like this
"scripts": {
"web:local": "env-cmd -f environments/.env.local node server.js",
"dev": "next dev",
"build": "next build",
"start": "next start"
},
where environments/.env.local is your local settins and some private info (you need to create environments folder and .env.local file). Server.js is your file, code example below
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
// these are keys to run your localhost with https protocol, you can // if you dont need it
const httpsOptions = {
key: fs.readFileSync('./environments/key.pem'),
cert: fs.readFileSync('./environments/cert.pem')
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(3000, err => {
if (err) throw err;
console.log('> Ready on https://localhost:3000');
});
});
Then you run your application with npm run web:local
Why ?
Because you did a build, it's not dynamically updated
Does it get from somewhere else or from cached objects ?
No, its a "built" of your project
Moreover, what is the best way to deploy nextjs app first time and after then latest deployment ?
You upload your code to git, you link git to Vercel. In vercel you need to also add environment variables. Don't forget also, you need to.gitignore /environments folder!
I'm looking to get Chakra UI set up (latest V1) with a simple Next.js app. Having followed the 'getting started' steps at https://chakra-ui.com/docs/getting-started I'm running into the following error when running dev server:
error - ./node_modules/#chakra-ui/portal/dist/esm/portal.js
Attempted import error: 'useCallbackRef' is not exported from '#chakra-ui/hooks'.
Here's my _app.js file:
import { ChakraProvider } from "#chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#chakra-ui/react": "^1.1.3",
"#emotion/react": "^11.1.4",
"#emotion/styled": "^11.0.0",
"framer-motion": "^3.2.0",
"next": "10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1"
}
}
I've had a rummage through the prescribed portal.js node module, but there doesn't look to be anything untoward.
Any help would be greatly appreciated, thanks for your time in advance.
Set version to #chakra-ui/react": "1.1.2",
It's a bug and they are working on a fix: https://github.com/chakra-ui/chakra-ui/issues/3006
For now just revert to a lower version until the fix is through.
Same problem here, get a older chakra-ui version.
For example: "#chakra-ui/react": "1.0.4"
I created a new app using create-react-app, and added scss to the project (simply ran npm install node-sass)
Now, when I want to use a .scss as a module, I have to name the file x.module.scss.
How can make every .scss file to automatically considered a module?
desired result example:
import styles from './test.scss'
.
.
.
currently I have to do this:
import styles from './test.module.scss'
.
.
.
Thanks!
run -> react-scripts eject
GOTO -> /config/webpack.config.dev.js
I just created a create-react-app application and added node-sass. You can see the versions below:
package.json
{
"name": "test-sass",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"node-sass": "^4.13.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I changed the .css files to .scss files without the module keyword, and it works fine like a charm.
I guess maybe you have check the versions or other configuration. The eject is not necessary here. it is a build-in feature.