Can't import the named export 'createContext' from non EcmaScript module

[twigs67]

My code:

ReactDOM.render(
  <UserbackProvider token="3746|70482|oTIFCuaXR4Kc6kzJ5hCX61icLQeoOCrwmp4tkazp0Ufq0byH4k">
    <Provider store={store}>
      <App />
    </Provider>
  </UserbackProvider>,
  document.getElementById('root'),
);

[Shard]

Hi @twigs67,

We had noticed an issue with webpack4 loading cjs/mjs modules in an incorrect way that would cause issues which we hopefully resolved in the new v0.2.0 release.

Can you confirm if upgrading @userback/react (along with it's underlying dependcy to @userback/widget) to0.2.0 fixes your issue?

If it doesn't, would you be able to provide your node --version and details about your build environment (version of webpack/esbuild/vite/babel/etc.)

Cheers.

[kdembler]

Hi @Shard, I have the same issue in react-scripts project:

• Node v14.18.2
• @userback/react@0.2.0
• @userback/widget@0.2.0
• webpack@4.44.2
• react-scripts@4.0.3

[Shard]

Hi @kdembler,

Can you try the new version 0.2.1 to see if that resolves your issues?

[kdembler]

@Shard unfortunately no, still the same thing

./node_modules/@userback/react/dist/react.mjs
Can't import the named export 'createContext' from non EcmaScript module (only default export is available)

[Shard]

Hi @kdembler,

We haven't been able to reproduce this issue yet internally. I'm working on creating an example project so we can add it to the integration test suite.

If you could provide any custom build configuration or scripts that you might be using that configure webpack that would help us replicate this issue and implement a fix.

Cheers

[Shard]

I did a bit of work to replicate an examples repo using create-react-app/react-scripts and I was able to successfully load the userback module without an issue.

One thing off the top of my head that might help on your side is upgrading to nodejs@16 from 14 as it is no longer supported or maintained by nodejs and it does have better support for ES modules.

Cheers

[Shard]

After a bit of searching, we did run into people with a similar error who had a workaround https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-518823748

[Shard]

After more testing it appears to be an issue with v4 of react scripts, upgrading to v5 should resolve the issue.