createContext invalid export with .mjs file

[ajhenry]

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?

[forabi]

Hey @ajhenry, thanks for the interest in this package. Any suggestions on how to fix this? I can look into it this weekend!

[ajhenry]

@forabi Thanks for getting back to me.

Honestly, I have no idea what is causing this issue, as I am unable to reproduce in codesandbox even though my dependency versions all match

Here is what I am met with in my console when I try to import TimeGridScheduler in a JS-only environment bootstrapped with cra.

After building and linking locally, changing the package.json module extension from .mjs to .js fixes the import error, but then introduces a hook error that I'm not quite sure what is causing it.

Unfortunately, I've never run into this problem with React and don't know where to go from here

[forabi]

These are good first hints. Thanks! Like I said, will take a stab at fixing this on weekend.

…

On Thu, Jun 20, 2019, 12:24 AM Andrew Henry ***@***.***> wrote: @forabi <https://github.com/forabi> Thanks for getting back to me. Honestly, I have no idea what is causing this issue, as I am unable to reproduce in codesandbox <https://codesandbox.io/s/competent-nightingale-qc9sf> even though my dependency versions all match Here is what I am met with in my console when I try to import TimeGridScheduler in a JS-only environment bootstrapped with cra. [image: Screen Shot 2019-06-19 at 5 12 19 PM] <https://user-images.githubusercontent.com/24923406/59800770-73243780-92b5-11e9-8006-9eed493259be.png> After building and linking locally, changing the package.json module extension from .mjs to .js fixes the import error, but then introduces a hook error that I'm not quite sure what is causing it. [image: Screen Shot 2019-06-19 at 5 23 01 PM] <https://user-images.githubusercontent.com/24923406/59802400-ff832a00-92b6-11e9-9833-d74eb4fb292c.png> Unfortunately, I've never run into this problem with React and don't know where to go from here — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7?email_source=notifications&email_token=AAHXIGK2DRGFTKGDR3OMRDDP3KP2VA5CNFSM4HZAN6B2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYDKOEI#issuecomment-503752465>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHXIGPLZV3GRQECTMSIP5DP3KP2VANCNFSM4HZAN6BQ> .

[forabi]

@ajhenry Can you test @remotelock/react-week-scheduler@next and see if it's working for you?

[ajhenry]

Same issue with the non EcmaScript module, I'll try building locally and report back

[forabi]

That's weird. I went over all the imports in the screenshot above and used namespace imports instead of defaults + named imports. I don't see why this wouldn't work 🤔

[ajhenry]

Not too sure either, but thank you for all your effort!

I'm going to close this issue as I have a growing suspicion another package in my dependency tree is causing this. For when I create a new project with the same dependency versions, it does not give me any errors.

Thanks again for all your help

[EthanHolman]

@ajhenry did you ever discover which package was causing the issue for you? I am encountering this same problem and have yet to discover a solution.

[ajhenry]

@EthanHolman Unfortunately I did not. I had to switch to another package that didn't have this issue

[forabi]

@ajhenry @EthanHolman Can you test the suggested change to webpack config in #14 ?

[igorclaudino]

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?

[alyshahudson]

I'm having the same error!

[chrislondon]

Same error here.

[benoit-ctrl]

Hello, I have find a fix to this problem thanks to reactioncommerce/reaction-component-library#399 (comment).
You can override CRA webpack config without ejecting and solve the problem like this :

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

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

2. 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()
);

3. 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

[niyodusengaclement]

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

[benoit-ctrl]

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

@niyodusengaclement Maybe it's rather due to the way you use the scheduler, you could copy and paste some of your code (but nothing sensitive or private) into a codesandbox (https://codesandbox.io/) for testing purposes and if you still have a problem open another ticket with the link to the sandbox.
There is a link to a functional codesandbox example in the README.

[devcosta]

Ty @benoit-ctrl, you solution works

It was necessary to set manually the height of element

[niyodusengaclement]

@devcosta I've tried to set height manually but doesn't help too, here is my sandbox (https://codesandbox.io/s/focused-bush-0eem6)

[benoit-ctrl]

@niyodusengaclement You need to put your style height directly on the TimeGridScheduler tag and not on the parent div.

[niyodusengaclement]

Thanks, @benoit-ctrl, and others for your support. Now it's working