Attempted import error: 'UserManager' is not exported from 'oidc-client-ts'.

[pamapa]

When using the react-oidc-context library v2.0.0.beta.1 in a project:

./node_modules/react-oidc-context/dist/react-oidc-context.mjs
Attempted import error: 'UserManager' is not exported from 'oidc-client-ts'.

[pamapa]

when using "moduleResolution": "node"

oidc-client-ts.cjs

[qlerolland]

When using the react-oidc-context library in a project:

./node_modules/react-oidc-context/dist/react-oidc-context.mjs Attempted import error: 'UserManager' is not exported from 'oidc-client-ts'.

Have you installed oidc-client-ts ? (Which is a peerDependency)

[pamapa]

Yes.

[pamapa]

strange wise webpack (create react app) is mixing module(esm) and main(commonjs), why?

• react-oidc-context (esm)
• oidc-client-ts (commonjs)

[pamapa]

The problem seems to be the the .mjs extension.
When i rename react-oidc-context.mjs to react-oidc-context.esm.js and adapt package.json accordingly it magically works.

https://webpack.js.org/guides/ecma-script-modules/

@kherock
I will change the esm name in this package + oidc-client-ts unless you have a better idea? This way webpack will autotetect the correct format...

[kherock]

I can't reproduce this, and the .mjs extension is important for native ESM support from Node. I was actually going to suggest moving to the package exports field ahead of the 2.0 release.

What version of Node are you running, and what does your webpack config look like?

[pamapa]

We can change this back + make a fix. I was unable to find another solution yet.

We are using react create app (https://www.npmjs.com/package/react-scripts v4.0.3), which is using under the hood webpack v4.

Docu:
https://create-react-app.dev/docs/getting-started/

For Node.JS we are using v16.

[kherock]

Ok, Webpack v4 is really the problem here. I think migrating to exports should solve this. I'm pretty sure Webpack 4 doesn't implement resolution for those and will just use the CJS bundle, can you let me know if a package.json like the following fixes it?

  "main": "dist/react-oidc-context.cjs",
  "types": "dist/react-oidc-context.d.ts"
  "exports": {
    ".": {
      "import": "./dist/react-oidc-context.mjs",
      "require": "./dist/react-oidc-context.cjs"
    },
    "./package.json": "./package.json"
  }
  // ...

[kherock]

I think this is relevant:
reactioncommerce/reaction-component-library#399 (comment)

[pamapa]

  "main": "dist/react-oidc-context.cjs",
  "module": "dist/react-oidc-context.mjs",
  "types": "dist/react-oidc-context.d.ts",
  "exports": {
    ".": {
      "import": "./dist/react-oidc-context.mjs",
      "require": "./dist/react-oidc-context.cjs"
    },
    "./package.json": "./package.json"
  }

still leads to this error:

./node_modules/react-oidc-context/dist/react-oidc-context.mjs
Attempted import error: 'UserManager' is not exported from 'oidc-client-ts'.

[pamapa]

  "main": "dist/react-oidc-context.cjs",
  "types": "dist/react-oidc-context.d.ts",
  "exports": {
    ".": {
      "import": "./dist/react-oidc-context.mjs",
      "require": "./dist/react-oidc-context.cjs"
    },
    "./package.json": "./package.json"
  }

leads to:

./src/index.tsx
Attempted import error: 'AuthProvider' is not exported from 'react-oidc-context'.

[kherock]

Ok, I'll see if I can find a happy medium for this issue soon. Dropping the .mjs might cause the least amount of friction, its only disadvantage is that it loses compatibility with Node's ESM loader and maybe webpack 5 under its default configuration.

[pamapa]

I am wondering if it would make sense to wait for react-scripts v5, where they have switched to webpack v5. Within their milestone there is only one issue left. On the other hand we could go now with webapck v4 support and later drop that by using mjs extenstion...