Build error on React 17 when trying to import a new custom library

Question

I'm working with a React 17 frontend with Craco/Webpack. On another repo, I have a library that is using React 17, but with Vite. What is happening is that, when I try to import this library in my main frontend app, it throws this error when I try to build it:

Attempted import error: 'useInsertionEffect' is not exported from 'react'

Now, I tried with other libraries and this issue is not happening, so my thoughts are that the library is causing problems (maybe misalignment of something?) to the main application.

Frontend

Craco has this babel.js:

module.exports = {
  presets: [
    [
      "@babel/preset-react",
      {
        runtime: "automatic",
        importSource: "@emotion/react",
      },
    ],
  ],
  plugins: ["@emotion/babel-plugin"],
};

and this webpack config:

module.exports = {
  output: {
    clean: true,
    environment: {
      arrowFunction: false,
      bigIntLiteral: false,
      const: false,
      destructuring: false,
      dynamicImport: true,
      forOf: false,
      module: false,
    },
  },
  resolve: {
    fallback: {
      path: false,
      assert: false,
      buffer: false,
      fs: false,
      tls: false,
      net: false,
      zlib: false,
      http: false,
      https: false,
      stream: false,
      crypto: false,
    },
  },
};

dependencies:

"dependencies": {
    "@babel/runtime": "^7.17.9",
    "@casl/ability": "^5.2.2",
    "@commitlint/cli": "^17.0.3",
    "@commitlint/config-conventional": "^17.0.3",
    "@craco/craco": "^7.1.0",
    "@date-io/date-fns": "^1.3.13",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@loadable/component": "^5.15.2",
    "@mui/icons-material": "^5.15.7",
    "@mui/lab": "^5.0.0-alpha.163",
    "@mui/material": "^5.15.7",
    "@mui/styles": "^5.15.7",
    "@mui/system": "^5.15.7",
    "@mui/x-date-pickers": "^6.19.3",
    "@openapitools/openapi-generator-cli": "^2.1.26",
    "@sentry/integrations": "^7.44.2",
    "@sentry/react": "^7.44.2",
    "@sentry/tracing": "^7.44.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.5",
    "@testing-library/react-hooks": "^8.0.0",
    "@types/animejs": "3.1.7",
    "@types/react-beautiful-dnd": "^13.1.2",
    "animejs": "3.2.1",
    "axios": "^0.21.1",
    "concurrently": "^6.0.0",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.27.0",
    "deep-object-diff": "^1.1.0",
    "detect-browser": "^5.3.0",
    "embla-carousel-react": "^7.1.0",
    "emotion": "^11.0.0",
    "framer-motion": "6.3.10",
    "iban": "^0.0.14",
    "jest": "^29.5.0",
    "jotai": "^1.6.5",
    "js-cookie": "^3.0.1",
    "jwt-decode": "^3.1.2",
    "libphonenumber-js": "^1.10.19",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "notistack": "2.0.8",
    "p-retry": "^5.1.1",
    "qs": "^6.11.2",
    "react": "^17.0.1",
    "react-autocomplete": "^1.8.1",
    "react-beautiful-dnd": "^13.1.0",
    "react-clamp-lines": "^3.0.3",
    "react-currency-input-field": "^3.5.1",
    "react-device-detect": "^2.2.2",
    "react-dom": "^17.0.1",
    "react-dropzone": "^11.3.2",
    "react-error-boundary": "^3.1.4",
    "react-feather": "^2.0.9",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^7.31.3",
    "react-idle-timer": "^5.3.0",
    "react-inverted-scrollview": "^1.0.7",
    "react-lazyload": "^3.2.0",
    "react-linkify": "^1.0.0-alpha",
    "react-localization": "^1.0.16",
    "react-number-format": "^4.7.3",
    "react-pdf": "^5.7.2",
    "react-qr-code": "^1.1.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "react-signature-canvas": "^1.0.3",
    "react-swipeable-views": "^0.13.9",
    "react-virtualized": "^9.22.2",
    "redux": "^4.0.5",
    "rich-markdown-editor": "^11.6.2",
    "rxjs": "^7.5.5",
    "socket.io-client": "^4.1.2",
    "styled-components": "^5.2.3",
    "swr": "^0.4.2",
    "terser-webpack-plugin": "^5.3.5",
    "typescript": "^4.5.5",
    "use-context-selector": "^1.3.9",
    "uuid": "^8.3.2",
    "validator": "^13.5.2",
    "webpack-retry-chunk-load-plugin": "^3.1.1"
  },

Library

vite config:

import react from "@vitejs/plugin-react";
import { resolve } from "node:path";
import { RollupOptions } from "rollup";
import {
  AliasOptions,
  BuildOptions,
  ConfigEnv,
  LibraryOptions,
  PluginOption,
  UserConfig,
  defineConfig,
  loadEnv,
} from "vite";
import dts from "vite-plugin-dts";

function configuration({ mode }: ConfigEnv): UserConfig {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  const plugins: PluginOption[] = [
    react(),
    dts({
      insertTypesEntry: true,
    }),
  ];

  const rollupOptions: RollupOptions = {
    external: ["react", "react-dom"],
    output: {
      globals: {
        react: "React",
        "react-dom": "ReactDOM",
      },
    },
  };

  const lib: LibraryOptions = {
    entry: resolve(__dirname, "src/index.ts"),
    name: process.env.VITE_LIB_NAME || process.env.npm_package_name,
  };

  const build: BuildOptions = {
    lib,
    rollupOptions,
    sourcemap: true,
  };

  const alias: AliasOptions = {
    "@": resolve(__dirname, "src"),
  };

  return {
    plugins,
    build,
    resolve: { alias },
  };
}

export default defineConfig(configuration);

dependencies:

  "dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.15.4",
    "react": "^17.0.2",
    "react-device-detect": "^2.2.3",
    "react-dom": "^17.0.2",
    "react-dropzone": "^14.2.3"
  },

Can anyone help with this issue? Thank you!

I tried multiple approaches, mainly trying to change the vite.config.ts on the library, and its rollup options:

  const rollupOptions: RollupOptions = {
    external: ["react", "react-dom"],
    output: {
      globals: {
        react: "React",
        "react-dom": "ReactDOM",
      },
    },
  };

But it doesn't seem to work.