Page doesnt update despite route url changed - javascript

I am working with sveltekit+vite project. There 3pages here. It should navigate from one page to another page without reloading browser. I am using navigate('/') from 'svelte-routing'.
But the page doesnot update, but route url changes to another one. Here is package json
Part of folder structure:
routes:
result -> +page.svelte
+page.svelte (It should redirect to result page from here.)
{
"name": "vite-project",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"#fontsource/fira-mono": "^4.5.10",
"#neoconfetti/svelte": "^1.0.0",
"#popperjs/core": "^2.11.6",
"#sveltejs/adapter-auto": "^1.0.0",
"#sveltejs/kit": "^1.0.0",
"#types/cookie": "^0.5.1",
"autoprefixer": "^10.4.7",
"classnames": "^2.3.2",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0",
"flowbite": "^1.6.3",
"flowbite-svelte": "^0.29.13",
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.1.5",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"yup": "^0.32.11"
},
"type": "module",
"dependencies": {
"#esbuild/darwin-arm64": "^0.17.5",
"core-js": "^3.27.2",
"sass": "^1.58.0",
"svelte-routing": "^1.6.0"
}
}
It should reload the page to another one.

you can use the navigate method from svelte-routing
<script>
import { navigate } from 'svelte-routing';
const handleClick = () => {
navigate('/result');
};
</script>
<button on:click={handleClick}>Go to Result Page</button>

Related

Error: `experimental.runtime` requires `experimental.reactRoot` to be enabled along with React 18

I've a project with (next 12.1.6 + react 18.1 + react-dom 18.1). Now i want to add React Server Components to it. Updated my next.config.js like this
const nextConfig = {
distDir: '../../.next',
reactStrictMode: true,
experimental: {
runtime: 'nodejs',
serverComponents: true,
concurrentFeatures: true,
},
};
module.exports = nextConfig;
But regardless of that, when i execute npm run start:dev (npm run build works fine i believe) i get the error:
Error: `experimental.runtime` requires `experimental.reactRoot` to be enabled along with React 18. at Object.getBaseWebpackConfig [as default] (G:\ORLVNIcard\orlvni-business-card\node_modules\next\build\webpack-config.ts:355:11) at async Promise.all (index 0) at Span.traceAsyncFn (G:\ORLVNIcard\orlvni-business-card\node_modules\next\trace\trace.ts:106:14) at Span.traceAsyncFn (G:\ORLVNIcard\orlvni-business-card\node_modules\next\trace\trace.ts:106:14) at HotReloader.start (G:\ORLVNIcard\orlvni-business-card\node_modules\next\server\dev\hot-reloader.ts:518:21) at DevServer.prepare (G:\ORLVNIcard\orlvni-business-card\node_modules\next\server\dev\next-dev-server.ts:404:5) at ViewService.onModuleInit (G:\ORLVNIcard\orlvni-business-card\src\server\view\view.service.ts:19:7) at async Promise.all (index 0) at Object.callModuleInitHook (G:\ORLVNIcard\orlvni-business-card\node_modules\#nestjs\core\hooks\on-module-init.hook.js:43:5) at NestApplication.callInitHook (G:\ORLVNIcard\orlvni-business-card\node_modules\#nestjs\core\nest-application-context.js:169:13)
Next.js documentation says in https://nextjs.org/docs/advanced-features/react-18/server-components that i should use next#canary instead of next#12.1.6, and it works, but i have another problem with #canary in HookWebpackError: The "to" argument must be of type string. Received undefined and #12.1.6 does not throw the error in fresh barely empty project with (next 12.1.6 + react 18.1 + react-dom 18.1).
Part of my package.json looks like this
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build && cd src/client && next build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "nest start",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
"test": "jest",
"typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
},
"dependencies": {
"#nestjs/common": "^8.0.0",
"#nestjs/config": "^1.1.5",
"#nestjs/core": "^8.0.0",
"#nestjs/jwt": "^8.0.0",
"#nestjs/mongoose": "^9.0.2",
"#nestjs/passport": "^8.0.1",
"#nestjs/platform-express": "^8.0.0",
"#types/bcrypt": "^5.0.0",
"#types/mongoose": "^5.11.97",
"bcrypt": "^5.0.1",
"cookie-parser": "^1.4.6",
"dotenv": "^10.0.0",
"mongodb": "^4.3.1",
"mongoose": "^6.1.10",
"mssql": "^7.3.0",
"next": "^12.1.6",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0",
"react": "18.1.0",
"react-dom": "18.1.0",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0",
"sass": "^1.45.0",
"ts-node": "^10.0.0"
},
"devDependencies": {
"#nestjs/cli": "^8.0.0",
"#nestjs/schematics": "^8.0.0",
"#nestjs/testing": "^8.0.0",
"#types/cookie-parser": "^1.4.2",
"#types/express": "^4.17.13",
"#types/jest": "27.0.2",
"#types/node": "^16.0.0",
"#types/passport-jwt": "^3.0.6",
"#types/react": "^18.0.12",
"#types/react-dom": "^18.0.5",
"#types/supertest": "^2.0.11",
"#typescript-eslint/eslint-plugin": "^5.0.0",
"#typescript-eslint/parser": "^5.0.0",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^27.2.5",
"prettier": "^2.3.2",
"source-map-support": "^0.5.20",
"supertest": "^6.1.3",
"ts-jest": "^27.0.3",
"ts-loader": "^9.2.3",
"ts-node": "^10.0.0",
"tsconfig-paths": "^3.10.1",
"typescript": "^4.3.5"
},
And this is how i start my next app
import { Injectable, OnModuleInit } from '#nestjs/common';
import { ConfigService } from '#nestjs/config';
import createServer from 'next';
import { NextServer } from 'next/dist/server/next';
import { Request, Response } from 'express';
#Injectable()
export class ViewService implements OnModuleInit {
private server: NextServer;
constructor(private configService: ConfigService) {}
async onModuleInit(): Promise<void> {
try {
this.server = createServer({
dev: this.configService.get<string>('NODE_ENV') !== 'production',
dir: './src/client',
});
await this.server.prepare();
} catch (error) {
console.error(error);
}
}
handler(req: Request, res: Response) {
return this.server.getRequestHandler()(req, res);
}
}
Guess the error is due to next somehow not seeing react 18 in #12.1.6, but i can't realize why, especially while in new project everything works fine.
Remove your package-lock.json and install the canary version of next
npm install next#canary react#latest react-dom#latest
Then add expermiental settings in your next.config.js
experimental: {
reactRoot: true,
runtime: "nodejs",
serverComponents: true,
concurrentFeatures: true
}
Apparently the error was thrown 'cause by default createServer() method of Next.js is creating react server with react 17 and old methods of react, like render(), hydrate() and so on. To make createServer() create react 18 server it's necessary to define __NEXT_REACT_ROOT as true in the environment of the process of our custom server. At least i've understood it this way. So the solution is
async onModuleInit(): Promise<void> {
process.env.__NEXT_REACT_ROOT = 'true';
try {
this.server = createServer({
dev: this.configService.get<string>('NODE_ENV') !== 'production',
dir: './src/client',
});
await this.server.prepare();
} catch (error) {
console.error(error);
}
}
It solved the problem for me.
Just add this line to your .env file and it will fix the issue
__NEXT_REACT_ROOT=true

why is require not working in javascript for mailchimp api

Not sure what I have done wrong, I am following the quick start guide for mailchimp developers. https://mailchimp.com/developer/marketing/guides/quick-start/. I feel like I am missing a crucial step. I installed webpack. I am not getting the ping "everything is chimpy" instead its just perm reloading and highlighting requires in the sources tap in chrome dev tools.
It's highlighted 'require'.
const mailchimp = require("#mailchimp/mailchimp_marketing");
mailchimp.setConfig({
apiKey: "7effff5342f8e4669e427c885b0b0088-us5",
server: "us5",
});
async function run() {
const response = await mailchimp.ping.get();
console.log(response);
}
run();
this is my package.json
{
"name": "mail-chimp",
"version": "1.0.0",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#mailchimp/mailchimp_marketing": "^3.0.70",
"clone-deep": "^4.0.1",
"find-up": "^4.1.0",
"locate-path": "^5.0.0",
"npm-run-path": "^4.0.1",
"onetime": "^5.1.2",
"p-locate": "^4.1.0",
"p-try": "^2.2.0",
"path-exists": "^4.0.0",
"path-key": "^3.1.1",
"path-parse": "^1.0.7",
"picocolors": "^1.0.0",
"pkg-dir": "^4.2.0",
"punycode": "^2.1.1",
"randombytes": "^2.1.0",
"resolve": "^1.20.0",
"resolve-cwd": "^3.0.0",
"resolve-from": "^5.0.0",
"safe-buffer": "^5.2.1",
"serialize-javascript": "^6.0.0",
"shallow-clone": "^3.0.1",
"shebang-regex": "^3.0.0"
},
"devDependencies": {
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1"
},
"description": ""
}
Just write this line of code :
import mailchimp from '#mailchimp/mailchimp_marketing'
It will start working.

"You require appropriate loaders", Using react native and expo. App fails to compile on the web, but runs on android

I'm using react native expo. The app works fine on android, but when run on the web gets a compilation error. It was working fine in before, but I suspect this started after installing some new package.
/ReactNativeFrontend/node_modules/#codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js 13:12
Module parse failed: Unexpected token (13:12)
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
| } from 'react-native'
| import { isIphoneX } from 'react-native-iphone-x-helper'
> import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
|
| const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49
My babel config
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
My package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#codler/native-base": "^2.14.2",
"#material-ui/core": "^4.11.0",
"#react-native-community/art": "^1.2.0",
"#react-native-community/async-storage": "^1.11.0",
"#react-native-community/datetimepicker": "^2.4.0",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/voice": "^1.1.6",
"#risingstack/react-easy-state": "^6.3.0",
"axios": "^0.19.2",
"easy-peasy": "^3.3.1",
"expo": "~38.0.8",
"expo-camera": "^8.3.1",
"expo-constants": "^9.1.1",
"expo-font": "~8.2.1",
"expo-gl": "^8.3.1",
"expo-image-picker": "^8.3.0",
"expo-permissions": "^9.0.1",
"expo-pixi": "^1.2.0",
"expo-speech": "~8.2.1",
"expo-status-bar": "^1.0.2",
"i18n-js": "^3.7.1",
"lodash.memoize": "^4.1.2",
"native-base": "^2.13.12",
"proxy": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-instantsearch-native": "^6.7.0",
"react-native-chatbot": "0.0.1-alpha.12",
"react-native-datepicker": "^1.7.2",
"react-native-dialogflow": "^3.2.2",
"react-native-elements": "^2.0.4",
"react-native-fade-in-view": "^1.1.0",
"react-native-gesture-handler": "~1.6.0",
"react-native-gifted-chat": "^0.16.3",
"react-native-localization": "^2.1.6",
"react-native-localize": "^1.4.1",
"react-native-no-flicker-image": "^1.0.2",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-signature-capture": "^0.4.10",
"react-native-star-rating": "^1.1.0",
"react-native-vector-icons": "^7.0.0",
"react-native-voice": "^0.3.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2",
"react-navigation-tabs": "^2.9.0",
"styled-components": "^5.1.1"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#babel/preset-env": "^7.11.0",
"babel-preset-expo": "~8.1.0",
"react-native": "^0.63.2"
},
"private": true,
"rnpm": {
"assets": "./assets/fonts"
},
"proxy": "http://localhost:19002"
}
How to add appropriate loaders, or identify the package causing this issue.
I had this exact same issue, I found a solution today.
Thanks to this kind user on the expo forums.
judipuak's post
Install the react-native-keyboard-aware-scroll-view package into your node_modules with yarn on npm
Navigate to native base/dist/src/basic and open Content.js
Find var _reactNativeKeyboardAwareScrollView=require('#codler/react-native-keyboard-aware-scroll-view')
Change this to var _reactNativeKeyboardAwareScrollView=require('react-native-keyboard-aware-scroll-view') (remove the #codler)
Update:
Here's a more permanent solution
courtesy of patarapolw
I downgrade two things, and upgrade one thing, in package.json
{
"dependencies": {
"native-base": "~2.11",
"react-native-web": "~0.11"
},
"resolutions": {
"react-native-keyboard-aware-scroll-view": "^0.9.0"
},
}
This is a native-base library problem. While You are using it's some Components there might error occur. I found that this error is not occurring in 2.11 or it's less version so try to install that specific version
npm install native-base#2.11

Plugin 0 specified, provided an invalid property of "default" (Jest React Native)

Hey all I am just trying to get a simple test running and I keep running into this error after running "yarn test" which is using jest.
Plugin 0 specified in "/Users/Documents/Dev/appname/node_modules/babel-preset-react-native/index.js" provided an invalid property of "default" (While processing preset: "/Users/Documents/Dev/appname/node_modules/babel-preset-react-native/index.js")
at Plugin.init (node_modules/babel-core/lib/transformation/plugin.js:131:13)
at Function.normalisePlugin (node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
at Array.map (<anonymous>)
at Function.normalisePlugins (node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
at Array.map (<anonymous>)
at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
Here is my package.json, what am I missing, im sure its a configuration issue and not a test issue.
{
"name": "appname",
"version": "0.0.1",
"private": true,
"rnpm": {
"assets": [
"resources/fonts"
]
},
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.18.0",
"lodash": "^4.17.10",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-autocomplete-input": "^3.5.0",
"react-native-code-push": "^5.4.2",
"react-native-elements": "^1.0.0-beta2",
"react-native-form-validator": "^0.2.0",
"react-native-image-pan-zoom": "^2.1.9",
"react-native-image-zoom-viewer": "^2.2.18",
"react-native-material-dropdown": "^0.11.1",
"react-native-remote-svg": "^1.3.0",
"react-native-vector-icons": "^5.0.0",
"react-native-version-number": "^0.3.5",
"react-navigation": "^2.11.2"
},
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "^5",
"jest": "23.5.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
don't know if you solved that already but I had the same issue and I was able to make things work again with RN 0.56. I changed this:
"babel-preset-react-native": "^5",
to
"babel-preset-react-native": "4.0.0",
here's the full discussion around the issue: https://github.com/storybooks/storybook/issues/3897
if the above breaks your react-native env, another solution would be to install babel-bridge:
npm install babel-core#7.0.0-bridge.0 --save-dev

You seem to not be depending on "#angular/core". This is an error. Angular project

So I am trying the run the environment scripts and APIs for the development side of the website my team is building and every time I run ng build for each environment API this error pops up:
Example of the error that is being produced
now here is my pack.json file:
{
"name": "clark-gateway",
"version": "1.0.0-beta.4.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "npm run gulp-tsc",
"build": "node_modules/.bin/gulp tsc",
"gulp-tsc": "node_modules/.bin/gulp start",
"lint": "node_modules/.bin/tslint --project ./src/**",
"pack": "npm run build && cp ./package.json ./dist && cd ./dist && zip -r ../dist.zip ./* & cd ..",
"zip": "cp ./package.json ./dist && cd ./dist && zip -r ../dist.zip ./* & cd ..",
"deploy": "eb deploy CLARK-Gateway-Production --label CLARK-Gateway-v$(node -p \"require('./package.json').version\")",
"document": "node_modules/.bin/typedoc --out ./docs/ ./src/"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#types/express-jwt": "0.0.38",
"#types/jsonwebtoken": "^7.2.3",
"#types/raven": "^2.1.3",
"#types/request-promise": "^4.1.39",
"#types/express": "^4.0.39",
"#types/node": "^8.0.32",
"concurrently": "^3.5.0",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1",
"gulp-typescript": "^3.1.7",
"pre-commit": "^1.2.2",
"tslint": "^5.7.0",
"tslint-config-airbnb": "^5.3.0",
"typedoc": "^0.9.0",
"typescript": "^2.3.4"
},
"dependencies": {
"#cyber4all/clark-entity": "^2.1.0-beta.0.4",
"#cyber4all/clark-taxonomy": "^2.0.0",
"#types/socket.io": "^1.4.33",
"aws-sdk": "^2.147.0",
"body-parser": "^1.17.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.4",
"dotenv": "^4.0.0",
"express": "^4.15.2",
"express-http-proxy": "^1.1.0",
"express-jwt": "^5.3.0",
"helmet": "^3.6.1",
"jsonwebtoken": "^7.4.1",
"morgan": "^1.9.0",
"multer": "^1.3.0",
"ngx-cookie": "^2.0.1",
"raven": "^2.3.0",
"request": "^2.85.0",
"serverless-http": "^1.5.3",
"socket.io": "^2.1.0"
},
"pre-commit": [
"lint"
],
"prettier": {
"singleQuote": true,
"trailingComma": "all"
}
}
Things that I have tried:
- I have deleted the node modules folder numerous times (3 times to be exact)
- npm installed 3 times also deleted the pack-lock.json file
- Also I did the recommended commands and it gave me more errors such as
PS C:\Clark-Development\CLARK-Environment-master\cart-service> ng
build
Local workspace file ('angular.json') could not be found.
Error: Local workspace file ('angular.json') could not be found.
at WorkspaceLoader._getProjectWorkspaceFilePath (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\workspace-loader.js:37:19)
at WorkspaceLoader.loadWorkspace (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\workspace-loader.js:24:21)
at BuildCommand._loadWorkspaceAndArchitect (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:180:32)
at BuildCommand. (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:47:25)
at Generator.next ()
at C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:7:71
at new Promise ()
at __awaiter (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:3:12)
at BuildCommand.initialize (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:46:16)
at Object. (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\command-runner.js:87:23)
This error occurs after I execute the command npm install --save-dev #angular/core#latest
So it turns out I was running the wrong commands, which explains why its saying it needs angular-cli to use the command I was using. I used npm start which worked flawlessly

Categories

Resources