We Keep Coding

Next.js router.push does not change locale in URL

I'm changing locale by binding the onClick to two <div> elements:
import { useRouter } from 'next/router'
// other codes
const router = useRouter()
const changeLocale = (locale) => {
router.push({
router: router.pathname,
query: router.query
}, router.asPath, { locale })
}
return <div>
<div onClick={() => changeLocale('en')}>EN</div>
<div onClick={() => changeLocale('ru')}>RU</div>
</div>
The problem is that it does not change the URL. When I go to /en/about and click this RU the URL does not become /ru/about.
Why router.push does not work as expected?

Note
router.push({}) does not have the router property!
To handle routing, provide a list of locales and the default locale and Next.js will automatically handle the routing.
// next.config.js
module.exports = {
i18n: {
// These are all the locales you want to support in
// your application
locales: ['en', 'ru'],
// This is the default locale you want to be used when visiting
// a non-locale prefixed path e.g. `/hello`
defaultLocale: 'en',
},
}
Assuming you are using next 12, to add a prefix to the default locale, update your next config:
// next.config.js
module.exports = {
i18n: {
locales: ['default', 'en', 'ru'],
defaultLocale: 'default',
localeDetection: false,
},
trailingSlash: true,
}
Next, to add a custom routing rules, create a new file middleware.js in your pages:
// middleware.js
import { NextRequest, NextResponse } from 'next/server'
const PUBLIC_FILE = /\.(.*)$/
export async function middleware(req: NextRequest) {
if (
req.nextUrl.pathname.startsWith('/_next') ||
req.nextUrl.pathname.includes('/api/') ||
PUBLIC_FILE.test(req.nextUrl.pathname)
) {
return
}
if (req.nextUrl.locale === 'default') {
return NextResponse.redirect(new URL(`/en${req.nextUrl.pathname}`, req.url))
}
}
Please visit nextjs docs to learn more about locale strategies

How to use Vue 3 Meta with Vue.js 3?

It seems that Vue Meta has been upgraded to handle Vue.js 3 with a new npm package called vue-3-meta
Before Vue.js 3, it was easy to use vue-meta by adding it to the Vue instance:
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
// optional pluginOptions
refreshOnceOnNavigation: true
})
However in Vue.js 3, there is no Vue instance; and instead you create the app by running createApp like such:
const app = createApp(App);
const router = createVueRouter();
app.use(router);
// need to make app use Vue-Meta here
I cannot find any documentation for vue-3-meta. import VueMeta from 'vue-meta' no longer works.
How do I import the vue-3-meta plugin properly and use it with app like in prior versions?

Disclaimer: vue-meta v3 is still in alpha!
This was the minimal implementation I needed to get started:
Update vue-meta to v3 (in package.json)
- "vue-meta": "^2.4.0",
+ "vue-meta": "^3.0.0-alpha.7",
...or with yarn:
yarn add vue-meta#alpha
Add metaManager to Vue app
import { createMetaManager } from 'vue-meta'
const app = createApp(App)
.use(router)
.use(store)
.use(createMetaManager()) // add this line
await router.isReady()
app.mount('#app')
Add <metainfo> to App.vue <template> (this is also where I set a "title template")
<template>
<metainfo>
<template v-slot:title="{ content }">{{ content ? `${content} | SITE_NAME` : `SITE_NAME` }}</template>
</metainfo>
<header />
<router-view />
<footer />
</template>
Set default meta in App.vue <script>
Vue 3 vanilla:
import { useMeta } from 'vue-meta'
export default {
setup () {
useMeta({
title: '',
htmlAttrs: { lang: 'en', amp: true }
})
}
}
or with vue-class-component:
import { setup, Vue } from 'vue-class-component'
import { useMeta } from 'vue-meta'
export default class App extends Vue {
meta = setup(() => useMeta({
title: '',
htmlAttrs: { lang: 'en', amp: true }
})
}
Override meta in each component
Vue 3 vanilla:
import { useMeta } from 'vue-meta'
export default {
setup () {
useMeta({ title: 'Some Page' })
}
}
or with vue-class-component:
import { computed } from '#vue/runtime-core'
import { setup, Vue } from 'vue-class-component'
import { useMeta } from 'vue-meta'
export default class SomePage extends Vue {
meta = setup(() => useMeta(
computed(() => ({ title: this.something?.field ?? 'Default' })))
)
}
See also:
"Quick Usage" (vue-meta next branch)
Vue Router Example (vue-meta next branch)

In addition to the previous answers, I also needed to add a transpileDependency in my vue.config.js, as I was using vue-cli:
module.exports = {
transpileDependencies: ['vue-meta']
}
Else, I would get the error:
error in ./node_modules/vue-meta/dist/vue-meta.esm-browser.min.js
Module parse failed: Unexpected token (8:7170)
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
Thanks to this thread for pointing me to this: https://stackoverflow.com/a/65844988/3433137

metaManager is a MetaManager instance created from createMetaManager() of vue-meta.
Based on the Vue 3 + Vue Router example for vue-meta, here's an example usage:
import { createApp } from 'vue'
import { createMetaManager, defaultConfig, resolveOption, useMeta } from 'vue-meta'
const decisionMaker5000000 = resolveOption((prevValue, context) => {
const { uid = 0 } = context.vm || {}
if (!prevValue || prevValue < uid) {
return uid
}
})
const metaManager = createMetaManager({
...defaultConfig,
esi: {
group: true,
namespaced: true,
attributes: ['src', 'test', 'text']
}
}, decisionMaker5000000)
useMeta(
{
og: {
something: 'test'
}
},
metaManager
)
createApp(App).use(metaManager).mount('#app')

React-Image-Annotate - SyntaxError: Cannot use import statement outside a module

I'm trying to use react-image-annotate but it's giving me this issue when I first try to set it up.
And here's how I'm using it:
import React from 'react'
import ReactImageAnnotate from 'react-image-annotate'
function ImageAnnotator() {
return (
<ReactImageAnnotate
selectedImage="https://images.unsplash.com/photo-1561518776-e76a5e48f731?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
// taskDescription="# Draw region around each face\n\nInclude chin and hair."
// images={[
// { src: 'https://example.com/image1.png', name: 'Image 1' },
// ]}
// regionClsList={['Man Face', 'Woman Face']}
/>
)
}
export default ImageAnnotator
I'm using Next.js if that matters
UPDATE 1
I tried using this babel plugin as suggested by Alejandro Vales. It gives the same error as before. Here's the babel key in my package.json:
"babel": {
"presets": [
"next/babel"
],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"#babel/plugin-transform-modules-commonjs",
{
"allowTopLevelThis": true
}
]
]
}

I would say that the issue relies in the library itself by what they replied in here (similar bug) https://github.com/UniversalDataTool/react-image-annotate/issues/90#issuecomment-683221311
Indeed one way to fix it I would say is adding babel to the project so you can transform the imports in your project to require automatically without having to change the code on your whole project.
This is the babel package you are looking for https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs
Another reason for this could be an outdated version of your package, as some people report to have this fixed after using a newer version of Create React App (https://github.com/UniversalDataTool/react-image-annotate/issues/37#issuecomment-607372287)
Another fix you could do (a little crazier depending on your resources) is forking the library, creating a CJS version of the lib, and then pushing that to the library, so you and anybody else can use that in the future.

I got a tricky solution!
Problem is that react-image-annotate can only be imported in client-side(SSR got error for import keyword)
So, let react-image-annotate in Nextjs be imported only in client side
(https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)
in Next Page that needs this component, You can make component like this
import dynamic from "next/dynamic";
const DynamicComponentWithNoSSR = dynamic(() => import("src/components/Upload/Annotation"), { ssr: false });
import { NextPage } from "next";
const Page: NextPage = () => {
return (
<>
<DynamicComponentWithNoSSR />
</>
);
};
export default Page;
Make component like this
//#ts-ignore
import ReactImageAnnotate from "react-image-annotate";
import React from "react";
const Annotation = () => {
return (
<ReactImageAnnotate
labelImages
regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
regionTagList={["tag1", "tag2", "tag3"]}
images={[
{
src: "https://placekitten.com/408/287",
name: "Image 1",
regions: [],
},
]}
/>
);
};
export default Annotation;

How to display props type table in storybook 6.0.0

I'm creating ui-library for project (using Emotion), I added storybook with docs addon and I seems that storybook don't see props for styled component. How can I fix that?
"#storybook/addon-docs": "^6.0.0-rc.3",
"#storybook/addon-knobs": "^6.0.0-rc.3",
"#storybook/react": "^6.0.0-rc.3",
// main.js
module.exports = {
stories: ["../src/**/*.stories.#(tsx|mdx)"],
// Add any Storybook addons you want here: https://storybook.js.org/addons/
addons: ["#storybook/addon-docs", "#storybook/addon-knobs/register"],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../"),
});
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve("babel-loader"),
options: {
presets: [["react-app", { flow: false, typescript: true }]],
},
});
config.resolve.extensions.push(".ts", ".tsx");
return config;
},
};
// Example.ts:
import { ExampleProps } from "./Example.types";
export const Example = styled.div<ExampleProps>`
color: ${(props) => props.color || "red"};
`;
export default Example;
// Example.stories.mdx
import { Meta, Story, Preview, Props } from "#storybook/addon-docs/blocks";
import { withKnobs, color } from "#storybook/addon-knobs";
import Example from "./Example";
<Meta title="Example" component={Example} decorators={[withKnobs]} />
# Preview
<Preview>
<Story name="Example">
<Example color={color('color', '#000', 'GROUP-ID1')}>Example</Example>
</Story>
</Preview>
# Props
<Props of={Example} />
Unfortunately props table displays:
No inputs found for this component.

I had the same problem since migrating to 6.0.0-rc.29.
I installed storybook-addon-react-docgen (v1.2.42) separately in package.json and now the props table has returned.
Also don't forget to add it to your addons array in main.js.
E.g. my main.js is
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'],
addons: [
'#storybook/addon-docs',
'#storybook/addon-links',
'#storybook/preset-create-react-app',
'#storybook/addon-knobs/register',
'storybook-addon-react-docgen'
]

Why is 'this' undefined when I bundled the jsx file (react.js) using babel-preset-es2015 and Webpack?

First of all, I temporarily solved the problem that 'this' keeps becoming undefined through disabling 'babel-preset-es2015' and removing 'es2015' styled codes such as 'import', '() => {}', etc. I'm just wondering the fundamental reason why this problem is happening, so I put the question in here.
My project is using React.js, Webpack, Babel, and Electron to make a desktop application. I built UI using React.js, bundled my jsx file using Babel and Webpack.
This is my jsx file:
const React = require('react')
const ReactDOM = require('react-dom')
let Evet = React.createClass({
handleClick: function () {
this.props.onUserSelect(this.props.anEvet)
},
render: function () {
return (
<div className='well well-sm' onClick={this.handleClick}>
{this.props.anEvet.type}: {this.props.anEvet.kind}
</div>
)
}
})
let EvetInfo = React.createClass({
render: function () {
let apisList = []
this.props.anEvet.apis.forEach((api) => {
apisList.push(<li>{api}</li>)
})
return (
<div className='well well-lg'>
<h2>{this.props.anEvet.type} ({this.props.anEvet.kind})</h2>
<ul>{apisList}</ul>
</div>
)
}
})
let EvetList = React.createClass({
getInitialState: function () {
return {
selectedEvet: {}
}
},
handleSelectEvet: function (anEvet) {
this.setState({ selectedEvet: anEvet })
},
render: function () {
let list = []
this.props.evetsList.forEach((evet, idx) => {
list.push(<Evet key={evet._id} anEvet={evet} onUserSelect={this.handleSelectEvet} />)
})
let info
if (this.state.selectedEvet.kind) info = <EvetInfo anEvet={this.state.selectedEvet} />
return (
<div>
<div className='col-md-4'>{list}</div>
<div className='col-md-8'>{info}</div>
</div>
)
}
})
ReactDOM.render(
<EvetList evetsList={evets} />,
document.getElementById('evetlist')
)
This is my webpack.config.js file.
const path = require('path')
module.exports = {
entry: [
'./app/components/app.js'
],
output: {
path: path.join(__dirname, 'app/js/dist'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}]
}
}
When I run my program, I got an error like the below screenshot.
When I remove 'es2015 styled code' and disabling 'babel-preset-es2015' in the 'webpack.config.js' file, it works intendedly. Could you let me know why this error is happening when I use 'es2015' preset to bundle it? I want to use 'es2015' style to make my program. '() => ' notation is so cool and convenient. :)

You can't use fat-arrow functions just because they are "cool and convenient"-- they have different semantics than normal functions. Specifically, they share a lexical this with their containing scope, instead of creating a new this-- and in a React component which will be in a module, the outer this will be undefined.