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 [email protected] 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 https://github.com/remotelock/react-week-scheduler/issues/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 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 :

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