react-week-scheduler: createContext invalid export with .mjs file

We are looking at using this library for our project and it looks really promising, especially with the fluid drag to enlarge.

However, when I try to install the package into a JS-only React project, I am met with the following error:

Failed to compile.

./node_modules/@remotelock/react-week-scheduler/index.mjs
Can't import the named export 'createContext' from non EcmaScript module (only default export is available)

I copied the code from the sample in the Readme to produce this error

~~This seems to be an issue related to breaking changes in webpack and how it treats .mjs files as listed here~~

~~And a dirty fix appears to be something along the following, as discussed here~~

{
  type: 'javascript/auto',
  test: /\.mjs$/,
  use: []
}

Edit

This appears to be an issue with create-react-app and the default webpack config it’s using, as it will not support .mjs extensions until jest does.

So is there any plan to support projects bootstrapped with create-react-app without ejecting?

About this issue

Original URL
State: open
Created 5 years ago
Comments: 20 (5 by maintainers)

Commits related to this issue

Fix: Test a fix for #7 — committed to remotelock/react-week-scheduler by forabi 5 years ago
Revert "Fix: Test a fix for #7" This reverts commit 46772045968ad9dcc66f85dd4862076794b32e3e. — committed to remotelock/react-week-scheduler by forabi 5 years ago

Most upvoted comments

Hello. I am using React version 16.13.0 and I am having this same issue. The project was created using the create-react-app. Any suggestion?

igorclaudino on Mar 10, 2020

2020-11-05 13_02_34-Window @niyodusengaclement You need to put your style height directly on the TimeGridScheduler tag and not on the parent div.

benoit-ctrl on Nov 5, 2020

@benoit-ctrl Thanks for your hint it solved the mentioned error, but unfortunately, it doesn’t display anything in the browser

niyodusengaclement on Nov 4, 2020

Hello, I have find a fix to this problem thanks to https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-518823748. You can override CRA webpack config without ejecting and solve the problem like this :

Install customize-cra and react-app-rewired as dev dependencies :

npm install -D customize-cra react-app-rewired

Then create a file named config-overrides.js in the same folder as package.json and copy this configuration :

// config-overrides.js
const { override } = require("customize-cra");

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

module.exports = override(
    supportMjs()
);

Finally in your package.json file replace the NPM scripts with the rewired version :

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

@forabi it might be useful to add this in the README

benoit-ctrl on Jul 27, 2020