Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

plug-in does not appear to work.. What did I do wrong? #4

Closed
jjunyjjuny opened this issue Jan 17, 2023 · 3 comments
Closed

plug-in does not appear to work.. What did I do wrong? #4

jjunyjjuny opened this issue Jan 17, 2023 · 3 comments

Comments

@jjunyjjuny
Copy link

jjunyjjuny commented Jan 17, 2023

// vite.config.ts
import { resolve } from 'path'

import reactSWC from '@vitejs/plugin-react-swc'
import { defineConfig } from 'vite'
import { cjsInterop } from 'vite-plugin-cjs-interop'
import vitePluginDts from 'vite-plugin-dts'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    cjsInterop({
      dependencies: ['@emotion/styled', '@emotion/react'],
    }),
    reactSWC({
      jsxImportSource: '@emotion/react',
    }),
    vitePluginDts({
      insertTypesEntry: true,
    }),
    tsconfigPaths({ root: './' }),
  ],
  build: {
    sourcemap: true,
    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',
        'react-beautiful-dnd',
      ],
    },
  },
})
// build result
...
var Xa = Object.defineProperty;
var Ja = (e, t, r) => t in e ? Xa(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
var lr = (e, t, r) => (Ja(e, typeof t != "symbol" ? t + "" : t, r), r);
import * as Ln from "react";
import Q, { createContext as Qo, forwardRef as Jr, useContext as ei, createElement as nt, Fragment as Qa, useMemo as we, useCallback as F, useState as Y, useRef as Fe, useEffect as _e, useLayoutEffect as Fn, useImperativeHandle as Qr, PureComponent as ti, Children as es } from "react";
import { css as C, useTheme as en, keyframes as Ge, ThemeProvider as ts } from "@emotion/react";
import c from "@emotion/styled";
import ri, { createPortal as rs } from "react-dom";
import { Draggable as ns, Droppable as os, DragDropContext as is } from "react-beautiful-dnd";
function as(e) {
  if (e.sheet)
    return e.sheet;
  for (var t = 0; t < document.styleSheets.length; t++)
    if (document.styleSheets[t].ownerNode === e)
      return document.styleSheets[t];
}
...

here is my vite.config and build result.

I want to unwrap default imports @emotion by using this plugin.
But Doesn't seem to have applied to the build result.

what did i do wrong??

// pacakge.json
"devDependencies": {
    "vite": "^4.0.0",
    "vite-plugin-cjs-interop": "^0.0.7",
    "vite-plugin-dts": "^1.7.1",
    "vite-tsconfig-paths": "^4.0.3",
    "@vitejs/plugin-react-swc": "^3.0.0",
  },
@jjunyjjuny jjunyjjuny changed the title The plug-in does not appear to work.. What did I do wrong? plug-in does not appear to work.. What did I do wrong? Jan 17, 2023
@cyco130
Copy link
Owner

cyco130 commented Jan 17, 2023

You're using it in library mode, right?

That's a problem because vite-plugin-cjs-interop only works in SSR build. We could add an option for it to work on the client build too, but it would probably interfere with treeshaking since it will be trying to solve a problem that doesn't exist on the client (the interop issue is caused by Node's interpretation of CJS).

I don't know library mode very well, but I would suggest you do two builds, one for the server and one for the client. Then you can use conditional exports in package.json (or mainandbrowser` fields). Because the interop fix only needs to be applied to the Node build, not to the browser build.

I'll investigate the library mode and come back with more certainty on how to proceed.

@jjunyjjuny
Copy link
Author

jjunyjjuny commented Jan 17, 2023

thanks you for reply!

I used a because it was introduced in this issue, but I didn't know it was for SSR.

My purpose is to build and distribute react libraries using emotion as vites.
Until now, this library is available in CRA, but when used in next, it will cause an error at runtime.
I think it's because emotion is internally supporting esm and commonjs incorrectly. That's why I needed this plug-in......

Thank you again for your help. I'll look into it more and come back.

@cyco130
Copy link
Owner

cyco130 commented Jan 22, 2023

I just released version 0.0.8 that adds a client option to force applying the plugin outside of SSR builds. Setting it to true will force it in the library mode too.

But I think a better option for you is to set build.lib.formats to ["es", "cjs"] and drop this plugin. And then point your package.json main field to the CJS build output and the browser field to the ESM build output. This way users of your lib will use the CJS build in Node (which doesn't require interop) and the the ESM build in the browser (which doesn't require interop either). Alternatively you can use the exports field with the "node" and "browser" conditions.

Hope this helps!

@cyco130 cyco130 closed this as completed Jan 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants