useTranslate not translate

[westprophet]

My code is dont work correct. When I use t ("common: title") only the key is obtained instead of the translation

My config:

const nextTranslate = require('next-translate');
const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const fonts = require('next-fonts');
const path = require('path');
const isProd = process.env.NODE_ENV === 'production';
const nextConfig = {
  crossOrigin: 'anonymous',
  devIndicators: {
    autoPrerender: false,
  },
  env: {
    isProduction: process.env.NODE_ENV === 'production',
    siteName: isProd ? 'https://site.de' : 'http://localhost:3000',
  },
  // eslint-disable-next-line no-unused-vars
  webpack(config, options) {
    config.resolve.modules.push(path.resolve('./'));
    config.resolve.modules.push(path.resolve('./src/'));
    return config;
  },
};

module.exports = withPlugins(
  [
    fonts,
    [
      withOptimizedImages,
      {
        inlineImageLimit: 8192,
        imagesFolder: 'images',
        imagesName: '[name]-[hash].[ext]',
        handleImages: ['jpeg', 'png', 'svg', 'webp', 'ico', 'gif'],
        removeOriginalExtension: true,
        optimizeImages: true,
        optimizeImagesInDev: true,
        svgo: {
          plugins: [{ removeComments: false }],
        },
        mozjpeg: {
          quality: 55,
        },
        optipng: {
          optimizationLevel: 5,
        },
        pngquant: false,
        webp: {
          preset: 'default',
          quality: 55,
        },
      },
    ],
    nextTranslate,
  ],
  nextConfig
);

my i18n.json

{
  "locales": [
    "en", "ru"
  ],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"]
  }
}

My component

import React from 'react';
import PropTypes from 'prop-types';
import useTranslation from 'next-translate/useTranslation';
import s from './Header.module.scss';
import HeaderLogo from './components/HeaderLogo';

export default function Header({ className }) {
  const { t } = useTranslation('common');
  return (
    <header className={`${s.Header} ${className}`}>
      <div className={s.inner}>
        <HeaderLogo />
        <div className={s.title}>
          <h2>{t('description')}</h2>
          <h3>Podzgolovok</h3>
        </div>
        <div className={s.button}>
          <button>Download</button>
          <p>Push the button to download the app!</p>
        </div>
      </div>
    </header>
  );
}

Header.defaultProps = {
  className: '',
};

Header.propTypes = {
  className: PropTypes.string,
};

[westprophet]

[aralroca]

@westprophet is it happening also in 1.0.2-canary.8 prerelease?

[westprophet]

@aralroca look. My package.json.

Package version 1.0.1

{
  "name": "coduca",
  "version": "1.0.0",
  "description": "",
  "homepage": ".",
  "main": "index.tsx",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "production": "next build && next export -o coduca88.redw.me",
    "export": "next export",
    "devServer": "nodemon",
    "start-Server": "ts-node-dev --respawn --project tsconfig.server.json server/index.ts",
    "build-Server": "next build && tsc --project tsconfig.server.json"
  },
  "keywords": [],
  "author": "Redwest Studio",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.0",
    "cross-env": "^7.0.2",
    "next": "10.0.5",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^1.4.0",
    "next-page-transitions": "1.0.0-beta.2",
    "next-translate": "1.0.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0",
    "react-slick": "^0.27.12",
    "react-slick-slider": "^0.15.10",
    "react-switch": "^5.0.1",
    "react-transition-group": "^4.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "10.0.5",
    "next-seo": "4.15.0",
    "webp-loader": "^0.6.0",
    "next-optimized-images": "^2.6.2",
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/node": "^7.12.1",
    "@babel/plugin-proposal-do-expressions": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@types/cookie-parser": "^1.4.2",
    "@types/facebook-js-sdk": "^3.3.1",
    "@types/gapi": "^0.0.39",
    "@types/gapi.auth2": "^0.0.52",
    "@types/jest": "^26.0.15",
    "@types/morgan": "^1.9.2",
    "@types/node": "^14.14.6",
    "@types/react": "^16.9.55",
    "@types/react-copy-to-clipboard": "^4.3.0",
    "@types/react-dom": "^16.9.9",
    "@types/react-redux": "^7.1.11",
    "@types/react-router-dom": "^5.1.6",
    "@types/react-tooltip": "^4.2.4",
    "@types/react-transition-group": "^4.4.0",
    "@typescript-eslint/eslint-plugin": "^4.6.1",
    "@typescript-eslint/eslint-plugin-tslint": "^4.6.1",
    "@typescript-eslint/parser": "^4.6.1",
    "babel-eslint": "^10.1.0",
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.5",
    "eslint": "^7.12.1",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
    "find-cache-dir": "^3.3.1",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "morgan": "^1.10.0",
    "nodemon": "^2.0.6",
    "npm-check-updates": "9.2.4",
    "prettier": "2.1.2",
    "pretty-quick": "^3.1.0",
    "redux-devtools-extension": "^2.13.8",
    "sass": "1.28.0",
    "server": "^1.0.31",
    "ts-node-dev": "^1.0.0",
    "typescript": "^4.0.5"
  }
}

[zimenu]

Hi, I had the same problem, took me an hour to figure it out... The solution is to have a _app.js file in your pages folder with the following code: ` function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> }

export default MyApp `

I am not sure why this fixed the problem, but I hope it helps :)

[westprophet]

@zimenu You are right, it really helped. Thank you very mach. I am added function export by default. Like this

export default appWithI18n(App, {
  ...i18nConfig,
  //
  // If you remove the "skipInitialProps", then all the namespaces
  // will be downloaded in the getInitialProps of the app.js and you
  // won't need to have any helper loadNamespaces on each page.
  //
  // skipInitialProps=false (default):
  // 🟢 Easy to configure
  // 🔴 All your pages are behind a server. No automatic page optimization.
  //
  // skipInitialProps=true:
  // 🔴 Hard to configure
  // 🟢 Better performance with automatic page optimization.
  //
  skipInitialProps: false,
});

[aralroca]

@westprophet I leave the issue open to fix it for version 1.0.3

[vimutti77]

@westprophet @zimenu In my case, I am using windows and facing the same problem. But I already fixed it in this PR https://github.com/vinissimus/next-translate/pull/472. You can try it by using next-translate version 1.0.2-canary.9

[aralroca]

I hope this is the case @vimutti77!! 😊. @westprophet @zimenu if you can confirm it would be great.

[westprophet]

I can’t confirm it yet. It may be possible to confirm it within this week. @zimenu сan you help these guys?

[aralroca]

Should be fixed in 2.0.0-canary.3 👍