i18n-pro/solid

solidjs start下无法使用,什么时候修复一下

muzidudu opened this issue · 6 comments

muzidudu commented
solidjs start下无法使用,什么时候修复一下
eyelly-wu commented

@muzidudu 方便提供一下可复现的示例吗？在线的例如 codesandbox 或者GitHub代码库都可以

eyelly-wu commented

@muzidudu 问题已解决，需要将 @i18n-pro/solid 的版本升到 1.0.1，并且 root.tsx 的代码需要调整为类似下面的样子

主要是 useI18n 需要在 I18nProvider 包裹的子级才能正常使用，不能出现在同一级

// @refresh reload
import { Suspense } from "solid-js";
import {
  A,
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Meta,
  Routes,
  Scripts,
  Title,
} from "solid-start";
import "./root.css";
import { I18nProvider, useI18n } from '@i18n-pro/solid'
import i18nState from './i18n'

function Root() {
  const { t } = useI18n()
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - Bare</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <Suspense>
          <ErrorBoundary>
          {t('hello world')}
            <A href="/">Index</A>
            <A href="/about">About</A>
            <Routes>
              <FileRoutes />
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

export default function (){
  return (
    <I18nProvider {...i18nState}>
      <Root />
    </I18nProvider>
  )
}
muzidudu commented

@eyelly-wu codesanbox 可以翻译了,但是报错提示水合错误

Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-0-0-1-0-0-0-0-1-0
    at getNextElement (dev.js:735:13)
    at components.jsx:106:5
    at A (components.jsx:111:57)
    at dev.js:620:16
    at untrack (dev.js:503:12)
    at Object.fn (dev.js:616:7)
    at runComputation (dev.js:781:22)
    at updateComputation (dev.js:760:3)
    at devComponent (dev.js:631:3)
    at createComponent (dev.js:1378:17)
dev.js:735  Uncaught Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 1-0-0
    at getNextElement (dev.js:735:13)
    at ErrorBoundary.tsx:32:3
    at ErrorMessage (ErrorBoundary.tsx:59:79)
    at dev.js:620:16
    at untrack (dev.js:503:12)
    at Object.fn (dev.js:616:7)
    at runComputation (dev.js:781:22)
    at updateComputation (dev.js:760:3)
    at devComponent (dev.js:631:3)
    at createComponent (dev.js:1378:17)
eyelly-wu commented

@muzidudu 找到原因了，我猜测你创建项目的时候是开启了 Server Side Rendering 对吧？
image
目前从官方的文档中，暂时还不清楚应该怎么处理服务端渲染时状态如何处理

如果不开启 Server Side Rendering 创建的项目的话，就不会报上面的 Uncaught Error: Hydration Mismatch. Unable to find DOM nodes for hydration key 这个异常

可参考

  1. GitHub
  2. CodeSandbox
muzidudu commented

@eyelly-wu 好的,感谢你的回答