Compilation Error When Using `react-use-intercom` as Per Documentation

[Skyfiir78]

I followed the instructions in the documentation to use react-use-intercom, but I encounter a compilation error stating: "Can't import the named export 'createContext' from non EcmaScript module (only default export is available)".

Steps to Reproduce

1. I installed react-use-intercom using npm install react-use-intercom.
2. I implemented react-use-intercom in my code as suggested in the documentation.
3. When trying to compile my project, I receive the aforementioned error.

Here is the code snippet I used:

import React from 'react';
import Routes from 'routes';
import { Router } from 'react-router-dom';

import i18n from 'i18n';
import { I18nextProvider } from 'react-i18next';
import { ChatStore } from 'store/chat.store';
import { PopupChatStore } from 'store/popupChat.store';

import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
import ScrollToTop from 'react-router-scroll-top';
import { createBrowserHistory } from 'history';

import KycState from 'store/kyc/kyc.store';
import AuthStore from 'store/auth.store';
import ProfileRiskStore from 'store/profileRisk.store';
import AdminStore from 'store/admin.store';
import KycJuniorStore from 'store/kyc/KycJunior.store';
import InscriptionStore from 'store/kyc/inscription.store';
import ObjectifStore from 'store/Objectif/objectif.store';
import HiPayStore from 'store/hipay.store';
import RecommandationStore from 'store/Recommandation/recommandation.store';
import ProjectStore from "store/Project/project.store"
import { ToastContainer } from 'react-toastify';
import RestrictionStore from './store/restriction.store';
import tunnelStore from "./store/kyc/tunnelStore.store"
import RetrieveProject from "./store/kyc/retrieveProject.store"
import DashboardStore from "./store/dashboard.store"
import GocardlessStore from './store/gocardless.store'
import GeneralStore from "./store/general.store"
import 'react-toastify/dist/ReactToastify.css';
import ReactGaDispatcher from "analytics/dispatcher/react-ga";
import Cookie from 'components/cookie';
import { checkCacheVersion } from "utils/checkCacheVersion"
import { IntercomProvider, useIntercom } from 'react-use-intercom';
import { INTERCOM_APP_ID } from 'api/constants';

checkCacheVersion()

// Store Configuration
const browserHistory = createBrowserHistory();
export const routingStore = new RouterStore();

const stores = {
  routing: routingStore,
  AuthStore,
  KycStore: KycState,
  ProfileRiskStore,
  AdminStore,
  ChatStore,
  PopupChatStore,
  KycJuniorStore,
  InscriptionStore,
  ObjectifStore,
  RecommandationStore,
  HiPayStore,
  GocardlessStore,
  RestrictionStore,
  tunnelStore,
  RetrieveProject,
  DashboardStore,
  ProjectStore,
  GeneralStore
};

const INTERCOM_ID = INTERCOM_APP_ID;

const history = syncHistoryWithStore(browserHistory, routingStore);

if (process.env.NODE_ENV === 'production') {
  ReactGaDispatcher.initialize();
  ReactGaDispatcher.pageview(window.location.pathname + window.location.search);
  // Segment
  window.analytics.track('Navigation', {
      destination: window.location.pathname + window.location.search
  });
}

window.onpopstate = () => {
  if (window.location.pathname.includes("simulation") && tunnelStore.stepPosition > 0) {
    tunnelStore.navControle("previous");
    history.go(1)
  }
  if (window.location.pathname.includes("choice")) {
    KycState.uiState!.groupPrevious();
    history.go(1)
  }
};

history.listen((location, action) => {
  ReactGaDispatcher.set({ page: location.pathname + location.search }); // Update the user's current page
  ReactGaDispatcher.pageview(location.pathname + location.search); // Record a pageview for the given page
  // Segment
  window.analytics.track('Navigation', {
    destination: window.location.pathname + window.location.search
  });
});
//
const App = () => (
  <>
    <Cookie />
    <Provider {...stores}>
      <I18nextProvider i18n={i18n}>
        <IntercomProvider appId={INTERCOM_APP_ID}>
          <Router history={history}>
            <ScrollToTop>
              <Routes />
              <ToastContainer />
            </ScrollToTop>
          </Router>
        </IntercomProvider>
      </I18nextProvider>
    </Provider>
  </>
);

export default App;

Expected Behavior The project should compile without errors and use react-use-intercom as per the instructions in the documentation.

Environment

• Node.js Version: v14.17.6
• react-use-intercom Version: 5.1.4
• Browser: Chrome
• Operating System: Mac OS

Thank you for helping me resolve this issue.

[Skyfiir78]

I managed to resolve this issue. It turned out that it was related to how Webpack handles .mjs files.

Here are the steps I followed to fix the issue:

1. I added a rule to my Webpack configuration to handle .mjs files.

2. I also cleaned my package manager's cache and removed the node_modules directory to ensure a clean installation of dependencies.

Here's an example of the rule added to the Webpack configuration through Craco:

webpack: {
  configure: (webpackConfig) => {
    webpackConfig.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });
    return webpackConfig;
  },
},

And here are the commands used to clean the cache and reinstall dependencies:

For npm:

npm cache clean --force
rm -rf node_modules
npm install

For yarn:

yarn cache clean
rm -rf node_modules
yarn install

After following these steps, the issue was resolved and the application started without any issues.

I hope this will help others who encounter the same problem.

[devrnt]

Thanks man, this is really helpful!