Reactjs – Vite v5.3.2 building for production error

During the build, I experienced the following error.

> tsc && vite build

vite v5.3.2 building for production...
    src/index.ts:1:20 - error TS6142: Module './components/Button/Button' was resolved to '/Users/myusername/photoravel-design-system/src/components/Button/Button.tsx', but '--jsx' is not set.

    1 import Button from './components/Button/Button';
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    src/index.ts:2:19 - error TS6142: Module './components/Input/Input' was resolved to '/Users/myusername/photoravel-design-system/src/components/Input/Input.tsx', but '--jsx' is not set.

    2 import Input from './components/Input/Input';
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~
    src/index.ts:3:32 - error TS6142: Module './PhotoravelProvider' was resolved to '/Users/myusername/photoravel-design-system/src/PhotoravelProvider.tsx', but '--jsx' is not set.

    3 import PhotoravelProvider from './PhotoravelProvider';
                                     ~~~~~~~~~~~~~~~~~~~~~~

    ✓ 46 modules transformed.

    [vite:dts] Start generate declaration files...
    dist/index.js  82.89 kB │ gzip: 26.25 kB
    [vite:dts] Declaration files built in 456ms.

    dist/index.cjs  60.48 kB │ gzip: 22.78 kB
    ✓ built in 712ms

The version information for my project is as follows.

package.json

{
  "main": "dist/index.js",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  },
  "scripts": {
    "build": "tsc && vite build"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@emotion/babel-plugin": "^11.11.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.13.1",
    "@typescript-eslint/parser": "^7.13.1",
    "@vitejs/plugin-react": "^4.3.1",
    "typescript": "^5.2.2",
    "vite": "^5.3.1"
  }
}

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

tsconfig.app.json

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "types": ["vite/client", "@emotion/react/types/css-prop"],
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "emotion.d.ts", "svg.d.ts", "dist"],
  "exclude": ["./node_modules"],
  "files": ["emotion.d.ts"]
}

vite.config.ts

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
    dts(),
    svgr(),
  ],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'index',
      fileName: 'index',
      formats: ['es', 'cjs'],
    },
    rollupOptions: {
      external: ['react', 'react-dom', '@emotion/react', '@emotion/styled'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          '@emotion/react': '@emotion/react',
          '@emotion/styled': '@emotion/styled',
        },
      },
    },
    commonjsOptions: {
      esmExternals: ['react'],
    },
  },
});

src/index.ts

import Button from './components/Button/Button';
import Input from './components/Input/Input';
import PhotoravelProvider from './PhotoravelProvider';
import theme from './styles/theme';
import convertCSS from './utils/convertCSS';

export { Button, Input, PhotoravelProvider, theme, convertCSS };

// src/PhotoravelProvider.tsx
import { Global, ThemeProvider } from '@emotion/react';

import globalStyles from './styles/globalStyles';
import theme from './styles/theme';

import type { PropsWithChildren } from 'react';

type Props = PropsWithChildren;

const PhotoravelProvider = ({ children }: Props) => {
  return (
    <ThemeProvider theme={theme}>
      <Global styles={globalStyles} />
      {children}
    </ThemeProvider>
  );
};

export default PhotoravelProvider;

I tried Googling and also asked ChatGPT, copilot, but I couldn’t get the answer I wanted, so I ended up asking questions while translating to Stack Overflow.

I’d like to know the cause of this error and how to solve it.