Adjust import style for mixpanel-browser

[ESnark]

Problem:

When using the <MixpanelProvider> the following error occurs:

SyntaxError: Named export 'init' not found. The requested module 'mixpanel-browser' is a CommonJS module, which may not support all module.exports as named exports.

Proposed Solution:

I believe the issue stems from the way the mixpanel-browser package is being imported. I've adjusted the import style in the code to address this problem and ensure compatibility.

Please review the changes and let me know if any further adjustments are needed.

[apancutt]

I'm unable to replicate this issue in neither CJS nor ESM React envs. Can you share more information about your setup, or reproduction steps?

While doing this I did notice that types were not being resolved in CJS environments, so I've fixed that. I've also upgraded everything to the latest version which might help with the issues you're having. Try 4.1.0.

[ESnark]

I just tried 4.1.0 and it's the same as before. It's hard to provide a reproducible environment right now, but here is some more of the error message. I will give you reproduction steps as soon as I can. I hope this helps you.

- wait compiling /steps/[topic] (client and server)...
- event compiled client and server successfully in 206 ms (502 modules)
file:///Users/.../.yarn/__virtual__/react-mixpanel-browser-virtual-a1e81d248f/0/cache/react-mixpanel-browser-npm-4.1.0-235ea708b5-577fa53133.zip/node_modules/react-mixpanel-browser/dist/index.js:1
import{createContext as m}from"react";var e=m(void 0);import{init as l}from"mixpanel-browser";import{useMemo as o}from"react";import{jsx as f}from"react/jsx-runtime";function v({children:x,config:n,name:r,token:t}){let i=o(()=>r??"react-mixpanel-browser",[r]),p=o(()=>({track_pageview:!1,...n}),[n]),a=o(()=>t?l(t,p,i):void 0,[p,i,t]);return f(e.Provider,{value:a,children:x})}import{useContext as s}from"react";var b=()=>s(e);export{v as MixpanelProvider,e as mixpanelContext,b as useMixpanel};
                                                             ^^^^
SyntaxError: Named export 'init' not found. The requested module 'mixpanel-browser' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'mixpanel-browser';
const {createContext: m}from"react";var e=m(void 0);import{init: l}from"mixpanel-browser";import{useMemo: o}from"react";import{jsx: f}from"react/jsx-runtime";function v({children:x,config:n,name:r,token:t}){let i=o(()=>r??"react-mixpanel-browser",[r]),p=o(()=>({track_pageview:!1,...n}),[n]),a=o(()=>t?l(t,p,i):void 0,[p,i,t]);return f(e.Provider,{value:a,children:x})}import{useContext: s}from"react";var b=()=>s(e);export{v: MixpanelProvider,e: mixpanelContext,b: useMixpanel} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
- error file:///Users/.../.yarn/__virtual__/react-mixpanel-browser-virtual-a1e81d248f/0/cache/react-mixpanel-browser-npm-4.1.0-235ea708b5-577fa53133.zip/node_modules/react-mixpanel-browser/dist/index.js:1
import{createContext as m}from"react";var e=m(void 0);import{init as l}from"mixpanel-browser";import{useMemo as o}from"react";import{jsx as f}from"react/jsx-runtime";function v({children:x,config:n,name:r,token:t}){let i=o(()=>r??"react-mixpanel-browser",[r]),p=o(()=>({track_pageview:!1,...n}),[n]),a=o(()=>t?l(t,p,i):void 0,[p,i,t]);return f(e.Provider,{value:a,children:x})}import{useContext as s}from"react";var b=()=>s(e);export{v as MixpanelProvider,e as mixpanelContext,b as useMixpanel};
                                                             ^^^^
SyntaxError: Named export 'init' not found. The requested module 'mixpanel-browser' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'mixpanel-browser';
const {createContext: m}from"react";var e=m(void 0);import{init: l}from"mixpanel-browser";import{useMemo: o}from"react";import{jsx: f}from"react/jsx-runtime";function v({children:x,config:n,name:r,token:t}){let i=o(()=>r??"react-mixpanel-browser",[r]),p=o(()=>({track_pageview:!1,...n}),[n]),a=o(()=>t?l(t,p,i):void 0,[p,i,t]);return f(e.Provider,{value:a,children:x})}import{useContext: s}from"react";var b=()=>s(e);export{v: MixpanelProvider,e: mixpanelContext,b: useMixpanel} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  digest: undefined
}
file:///Users/.../.yarn/__virtual__/react-mixpanel-browser-virtual-a1e81d248f/0/cache/react-mixpanel-browser-npm-4.1.0-235ea708b5-577fa53133.zip/node_modules/react-mixpanel-browser/dist/index.js:1
import{createContext as m}from"react";var e=m(void 0);import{init as l}from"mixpanel-browser";import{useMemo as o}from"react";import{jsx as f}from"react/jsx-runtime";function v({children:x,config:n,name:r,token:t}){let i=o(()=>r??"react-mixpanel-browser",[r]),p=o(()=>({track_pageview:!1,...n}),[n]),a=o(()=>t?l(t,p,i):void 0,[p,i,t]);return f(e.Provider,{value:a,children:x})}import{useContext as s}from"react";var b=()=>s(e);export{v as MixpanelProvider,e as mixpanelContext,b as useMixpanel};
                                                             ^^^^
SyntaxError: Named export 'init' not found. The requested module 'mixpanel-browser' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'mixpanel-browser';
const {createContext: m}from"react";var e=m(void 0);import{init: l}from"mixpanel-browser";import{useMemo: o}from"react";import{jsx: f}from"react/jsx-runtime";function v({children:x,config:n,name:r,token:t}){let i=o(()=>r??"react-mixpanel-browser",[r]),p=o(()=>({track_pageview:!1,...n}),[n]),a=o(()=>t?l(t,p,i):void 0,[p,i,t]);return f(e.Provider,{value:a,children:x})}import{useContext: s}from"react";var b=()=>s(e);export{v: MixpanelProvider,e: mixpanelContext,b: useMixpanel} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  page: '/test/status'
}

[jacc]

I'm getting the exact same error here as well.

[grrowl]

getting this error using latest nextjs and bun

[SergioJuniorCE]

still getting this error