Property 'fluent-divider' does not exist on type 'JSX.IntrinsicElements'

Question

import * as React from 'react'
import {
    provideFluentDesignSystem,
    fluentDivider
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentDivider()
    );

And then

<fluent-divider></fluent-divider>

I'm getting this error:

Property 'fluent-divider' does not exist on type 'JSX.IntrinsicElements'

I also tried to remove node-modules folder and re-install all the packages again, but the problem persists.

tsconfig.json :

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 16",
  "compilerOptions": {
    "allowJs": true,
    "lib": ["es2021", "dom", "dom.iterable"], // https://www.e-learn.cn/topic/3468143
    //"module": "commonjs",
    "module": "ES2015", // https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/webpack
    "importHelpers": true,  // https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/webpack
    "noEmitOnError": true, // https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/webpack
    "target": "es2019",
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "jsx": "react",
    "noImplicitAny": false,
    "sourceMap": true,
    "baseUrl": "./src",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "paths": {
      "@app/*": ["app/*"],
      "*": ["node_modules/*"]
    }
  },
  "include": ["./src/**/*"]
}

packages installed :

"@fluentui/react": "8.91.1",
"@fluentui/react-components": "^9.7.2",
"@fluentui/web-components": "2.0.0",
"@types/fluent": "^0.11.4",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9

How to make it recognize the element?

score 1 · Accepted Answer · answered Mar 07 '23 at 05:22

If you're using @fluentui/web-components with React you need to use wrappers as described in docs:

import { provideFluentDesignSystem, fluentCard, fluentButton } from '@fluentui/web-components';
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
import React from 'react';

const { wrap } = provideReactWrapper(React, provideFluentDesignSystem());

export const FluentCard = wrap(fluentCard());
export const FluentButton = wrap(fluentButton());

Sample CodeSandbox

Property 'fluent-divider' does not exist on type 'JSX.IntrinsicElements'

1 Answers1