Cannot read properties of null (reading 'useState')

[tiennguyen1293]

Describe the bug

Hi,
I'm building a library (using Vite@5) to import a component into a project (using Webpack@5 from CRA@5).

After some research, I came up with the vite.config.js as shown below. However, I'm still encountering an issue when importing it into the project.

Any idea on this issue?

Thank you

// vite.config.ts
import { defineConfig } from 'vite'
import path from 'path'
import { glob } from 'glob'
import { fileURLToPath } from 'node:url'

import dts from 'vite-plugin-dts'
import svgr from 'vite-plugin-svgr'
import react from '@vitejs/plugin-react'
import { libInjectCss } from 'vite-plugin-lib-inject-css'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

import packageJson from './package.json'

function getInput() {
  return Object.fromEntries(
    glob
      .sync('src/**/*.{ts,tsx}', {
        ignore: ['src/**/*.stories.tsx', 'src/types/**'],
      })
      .map((file) => {
        const name = path.relative(
          'src',
          file.slice(0, file.length - path.extname(file).length),
        )
        const filePath = fileURLToPath(new URL(file, import.meta.url))

        return [name, filePath]
      }),
  )
}

export default defineConfig(({ mode }) => ({
  server: {
    port: 4000,
  },
  plugins: [
    react({
      jsxRuntime: 'classic',
      babel: {
        plugins: [
          'babel-plugin-add-react-displayname',
          'babel-plugin-transform-react-display-name',
        ],
      },
    }),
    svgr(),
    libInjectCss(),
    dts({
      exclude: ['**/__tests__/**', 'src/stories/**'],
    }),
    viteCommonjs(),
  ],
  resolve: {
    alias: [
      { find: 'src', replacement: path.resolve(__dirname, '/src') },
      { find: 'utils', replacement: path.resolve(__dirname, '/src/utils') },
      {
        find: 'components',
        replacement: path.resolve(__dirname, '/src/components'),
      },
      { find: 'types', replacement: path.resolve(__dirname, 'src/types') },
      { find: 'assets', replacement: path.resolve(__dirname, '/src/assets') },
      { find: 'styles', replacement: path.resolve(__dirname, '/src/styles') },
    ],
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, '/src/components/index.ts'),
      name: packageJson.name,
      formats: ['es'],
    },
    rollupOptions: {
      plugins: [peerDepsExternal()],
      input: getInput(),
      output: {
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].js',
      },
    },
    minify: false,
    commonjsOptions: {
       transformMixedEsModules: true,
       include: [/node_modules/],
    },
  },
  css: {
    modules: {
      generateScopedName: 'lxp-component_[name]__[local]',
    },
  },
  define: {
    'process.env.NODE_ENV': JSON.stringify(mode),
  },
}))

Library/Component

import { useState } from "react"
import styles from './styles.module.css'

export function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  const [count, setCount] = useState(0)
  const { className, ...restProps } = props
  return <button className={`${className} ${styles.button}`} {...restProps} onClick={() => setCount(count+1)} />
}

Project

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Button } from "lxp-common-components-js/components/Button";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        <Button btnType={"PRIMARY"}>{"abc"}</Button>
      </header>
    </div>
  );
}

export default App;

Reproduction

https://github.com/receter/my-component-library

Steps to reproduce

Library:

@vitejs/plugin-react: ^4.3.1
vite: ^5.4.2

Project: create-react-app@5.0.1

react: ^18.2.0,
react-dom: ^18.2.0,

1. Library yarn run build and yarn link
2. Project yarn link <Library> and yarn start
3. import Component from 'Library'
4. Observer on console.log

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 54.47 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
  Browsers:
    Brave Browser: 128.1.69.153
    Chrome: 128.0.6613.114
    Edge: 128.0.2739.54
    Safari: 17.6
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1
    vite: ^5.4.2 => 5.4.2

Used Package Manager

yarn

Logs

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

I guess you need to set build.rollupOptions.external: ['react', 'react/jsx-runtime'].

[tiennguyen1293]

it is related to yarn link, this issue facebook/react#14257

The solution is to use yarn pack instead of

Thankssss