React TypeScript npm package error on TypeScript syntax

Question

I'm creating a new npm package to externalized some dependencies with code. This is my first npm package. It's an architecture quite simple:

• package.json
• src
  • index.tsx
  • plugins/${type}Plugin.tsx
• tsconfig.json

I import all plugins in index.tsx as:

    import { RaReactPageInput } from "@react-page/react-admin";
    import Editor from "@react-page/editor";

    // @ts-ignore
    import slate, { DEFAULT_SLATE_PLUGIN_ID } from "@react-page/plugins-slate";
    import image from "@react-page/plugins-image";
    import spacer from "@react-page/plugins-spacer";
    import video from "@react-page/plugins-video";

    import FaqPlugin from "./plugins/faqPlugin";
    import MapstorePlugin from "./plugins/mapstorePlugin";
    import MetabasePlugin from "./plugins/metabasePlugin";
    import TwitterPlugin from "./plugins/twitterPlugin";

    // Import CSS from react-page
    import "@react-page/editor/lib/index.css";
    import "@react-page/plugins-image/lib/index.css";
    import "@react-page/plugins-slate/lib/index.css";
    import "@react-page/plugins-spacer/lib/index.css";

    export {
      RaReactPageInput,
      Editor,
      slate,
      image,
      spacer,
      video,
      DEFAULT_SLATE_PLUGIN_ID,
      FaqPlugin,
      MapstorePlugin,
      MetabasePlugin,
      TwitterPlugin,
    };

My package.json is the same as:

    {
      "name": "react-page-example-plugin",
      "private": false,
      "description": "React-page customs plugins used in egeo",
      "version": "0.0.1",
      "author": "GATINEAU85",
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "tsc",
        "eject": "react-scripts eject"
      },
      "main": "./index.tsx",
      "dependencies": {
        "@babel/plugin-proposal-class-properties": "^7.16.7",
        "@babel/plugin-transform-modules-commonjs": "^7.17.9",
        "@babel/polyfill": "^7.12.1",
        "@babel/preset-react": "^7.16.7",
        "@react-page/editor": "^4.8.3",
        "@react-page/plugins-divider": "^4.8.1",
        "@react-page/plugins-image": "^4.8.1",
        "@react-page/plugins-slate": "^4.8.1",
        "@react-page/plugins-spacer": "^4.8.1",
        "@react-page/plugins-video": "^4.8.1",
        "@react-page/react-admin": "^4.8.3",
        "@tailwindcss/forms": "^0.5.0",
        "@tailwindcss/typography": "^0.5.2",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.2.4",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "lodash": "^4.17.21",
        "postcss": "^8.4.12",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-final-form": "^6.5.9",
        "react-instantsearch-dom": "^6.12.1",
        "react-leaflet": "^3.2.1",
        "react-scripts": "^5.0.1",
        "react-twitter-widgets": "^1.10.0",
        "tailwindcss": "^3.0.23"
      },
      "devDependencies": {
        "@types/lodash": "^4.14.178",
        "@types/react": "^17.0.39",
        "@types/react-dom": "^17.0.11",
        "@types/react-redux": "^7.1.22",
        "@types/react-router-dom": "^5.3.3",
        "html-webpack-plugin": "^5.5.0",
        "ra-input-rich-text": "^3.19.8",
        "ts-loader": "^9.2.8",
        "typescript": "^4.5.5",
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.8.1"
      }
    }

Finally, my tsconfig.json is the same as:

    {
      "compilerOptions": {
        "outDir": "build",
        "module": "esnext",
        "target": "es5",
        "lib": ["es6", "dom", "es2016", "es2017"],
        "sourceMap": true,
        "allowJs": false,
        "jsx": "react",
        "declaration": true,
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": false,
        "strictNullChecks": true,
        "allowSyntheticDefaultImports": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true
      },
      "include": ["src/index.tsx", "./src/**/*"],
      "exclude": ["node_modules", "build"]
    }

Then, I export my package in npm and I try to use it thanks to this type of import:

    import {
      RaReactPageInput,
      spacer,
      image,
      slate,
      video,
      DEFAULT_SLATE_PLUGIN_ID,
      FaqPlugin,
      MetabasePlugin,
      MapstorePlugin,
      TwitterPlugin,
    } from "react-page-example-plugin/src";

Then, I installed the package and when I run the app which uses the npm package, I have this error:

./node_modules/react-page-example-plugin/src/plugins/faqPlugin.tsx 2:12
Module parse failed: Unexpected token (2: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
| // @ts-ignore
> import type { CellPlugin } from "@react-page/editor";
| import React from "react";

If I try to import the CellPlugin, to another method, the error will be passed, but another error appear on another TypeScript Syntax.

I don't understand why each TypeScript syntax are not recognized when I import the project. Someone has an idea? Thanks