[vite:load-fallback] 'could not load @emotion/react/jsx-runtime'

[jjunyjjuny]

[vite:load-fallback] Could not load ~/src/@emotion/react/jsx-runtime (imported by src/index.tsx): ENOENT: no such file or directory, open '~/src/@emotion/react/jsx-runtime'
error during build:
Error: Could not load ~/src/@emotion/react/jsx-runtime (imported by src/index.tsx): ENOENT: no such file or directory, open '~/src/@emotion/react/jsx-runtime'

hello, I have a problem.... This error occurs when built using vite.

here is my vite.config.js / tsconfig.json / dependencies

import { resolve } from 'path';
import react from 'plugin-react-swc-emotion';
// import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import vitePluginDts from 'vite-plugin-dts';
import { nodeResolve } from '@rollup/plugin-node-resolve';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
       // 
       // react({
       //     jsxImportSsource: "@emotion/react"
       // }),
        tsconfigPaths({
            root: './',
            projects: ['./tsconfig.json'],
        }),
        vitePluginDts({
            insertTypesEntry: true,
        }),
    ],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.tsx'),
            name: 'my-lib,
            fileName: 'index',
        },
        rollupOptions: {
            external: [
                "@emotion/react",
                "@emotion/styled",
                "@types/react",
                "@types/react-dom",
                "react",
                "react-dom",
                "typescript",
            ],
            plugins: [nodeResolve({
                resolveOnly : [...]
            })]

        },
    },
});

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsxImportSource": "@emotion/react",
    "incremental": true,
    "strictNullChecks": true,
    "noImplicitThis": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true
    "baseUrl": "src",
    "typeRoots": ["node_modules/@types", "types"],
    "jsx": "react-jsx",
  },
  "include": ["vite.config.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
}

{
  "devDependencies" : {
    "@vitejs/plugin-react-swc": "^3.0.0",
    "vite": "^4.0.0",
    "vite-plugin-dts": "^1.7.1",
    "vite-tsconfig-paths": "^4.0.3",    
    "plugin-react-swc-emotion": "^3.0.1",
  }
}

I used 'plugin-react-swc-emotion' after seeing this issue #25, but the results did not change...

[ArnaudBarre]

This partial repro is using comments for the plugin. Could you provide a more complete reproduction that shows an issue with this plugin only (and not plugin-react-swc-emotion)?

[jjunyjjuny]

Thank you for your reply. Is this good enough?

// vite.config.js

import { resolve } from 'path';
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import vitePluginDts from 'vite-plugin-dts';
import { nodeResolve } from '@rollup/plugin-node-resolve';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react({
            jsxImportSsource: "@emotion/react"
        }),
        tsconfigPaths({
            root: './',
            projects: ['./tsconfig.json'],
        }),
        vitePluginDts({
            insertTypesEntry: true,
        }),
    ],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/main.ts'),
            name: 'MyLib,
            fileName: 'my-lib',
        },
        rollupOptions: {
            external: [
                "@emotion/react",
                "@emotion/styled",
                "@types/react",
                "@types/react-dom",
                "react",
                "react-dom",
                "typescript",
            ],
            plugins: [nodeResolve({
                resolveOnly : [...]
            })]
        },
    },
});

//tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsxImportSource": "@emotion/react",
    "incremental": true,
    "strictNullChecks": true,
    "noImplicitThis": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true
    "baseUrl": "src",
    "typeRoots": ["node_modules/@types", "types"],
    "jsx": "react-jsx",
  },
  "include": ["vite.config.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
}

// package.json
{
...
"name": "MyLib",
"type": "module",
"dependencies": {
    "@emotion/is-prop-valid": "^1.1.2",
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@storybook/react": "^6.4.19",
    "dotenv": "^16.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  },
  "devDependencies" : {
    "@vitejs/plugin-react-swc": "^3.0.0",
    "vite": "^4.0.0",
    "vite-plugin-dts": "^1.7.1",
    "vite-tsconfig-paths": "^4.0.3",    
  },
}

[jjunyjjuny]

.ts is built, but .tsx is not built

[ArnaudBarre]

I can't repro there is still too much missing pieces. Can you provide a very small repo to reproduce? See https://antfu.me/posts/why-reproductions-are-required

My guess for now is a bad interaction between vite-tsconfig-paths and this plugin.

[jjunyjjuny]

I'll give it a try. I'll be right back!

[jjunyjjuny]

Hi. I've solved this problem.

As you said, the conflict between 'vite-tsconfig-paths' and other plug-ins ("@rollup/plugin-node-resolve") was the problem!

Your plug-in is not at fault.

Thank you for your reply, and thank you again for making a good plug-in.

Happy New Year!

[ArnaudBarre]

Cool that you solved it 🎉