pnp / pnpjs

Fluent JavaScript API for SharePoint and Microsoft Graph REST APIs
https://pnp.github.io/pnpjs/
Other
753 stars 304 forks source link

Error while importing PnP js in Node (CommonJS) application #2983

Closed vishalshitole closed 5 months ago

vishalshitole commented 6 months ago

What version of PnPjs library you are using

3.x

Minor Version Number

24.0

Target environment

NodeJS

Additional environment details

I am using MSAL + NodeJS for authentication in my NestJS application as described in this documentation.

My tsconfig.base.json

image

My tsconfig.app.json

image

Question/Request

I am trying to access SharePoint using PnPjs from my NestJS application. I am using MSAL + NodeJS for authentication as described here. But, I get following error.

require() of ES Module /home/build/app/node_modules/@pnp/nodejs/index.js from /home/build/app/dist/apps/api/main.js not supported.\nInstead change the require of index.js in /home/build/app/dist/apps/api/main.js to a dynamic import() which is available in all CommonJS modules.

I have gone through issue #2141 and followed some suggestions by people commented on that issue for whom it worked. But, it didn't work for me. I believe that Option 3 suggested in this comment is the one I am looking to proceed with, but not sure what I am missing.

Can anybody please share the exact steps to be followed to get it working?

@patrick-rodgers @juliemturner

Note: I have also followed the steps from this knowledge article, except the final step of launching node with --experimental-specifier-resolution flag. Because I do not have control over that.

patrick-rodgers commented 6 months ago

Did you try using an async import? At this point the library should be fully compatible with node, even when running in commonjs - but you need to follow the node import resolution rules, which we can't control. Our packages export esm modules and have type set to "module".

juliemturner commented 6 months ago

As @patrick-rodgers is saying you have to get your package.json/tsconfig.jsonn set up properly based on weather you're going to go commonjs or es modules... if you're doing commonjs modules then you're going to probably have to go to async imports... which work but you lose IntelliSense. I have elected to go with es modules and therefore in my projects my package.json file has

...
"type": "module",
...

And my tsconfig.json looks like this:

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "outDir": "dist",
    "rootDir": ".",
    "sourceMap": true,
    "strict": false,
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
  }
}

In my experience getting the balance just right is a lot of testing and figuring out what all these switches mean and how the apply to the project you're working on. We'll have a more robust sample of an Azure Function v4 switched up to use esm and pnpjs v4 in the upcoming documentation release.

ElinKolloen commented 6 months ago

We're really looking forward to the Azure Function v4 and pnpjs v 4 release. We dont want to rely on node 16 and pnpjs v 2 for new projects, and node 18+ with pnpjs 3 in Azure Functions is a real pain.

juliemturner commented 6 months ago

@ElinKolloen - There isn't really much that's going to change for v4 with regard to this, it's more about knowing how to set up your project and how to change the Azure Function configurations to work with ES Modules... so you just have to know how to tweak your package.json and tsconfig correctly, which I shared above.

Same configuration works for

vishalshitole commented 6 months ago

Thanks @juliemturner and @patrick-rodgers for your answers. I gave it a try. Unfortunately because of the build environment my Node project is using it didn't work for me. Our project use Nx build tools, which does not support ESM only modules per our platform team. Thanks anyways for your support.

patrick-rodgers commented 5 months ago

@vishalshitole - while I am not familiar with Nx build tools or "NestJS", but I can find nothing that says Nx tools don't work with es modules. Can you point to the article describing the limitation? Es modules are not something we made up and are widely supported, if your build tools can't support their use I am unclear how you are using many of the packages available on npm.

vishalshitole commented 5 months ago

@patrick-rodgers I also have a very little understanding of the Nx. My platform team shared the below link saying -

Nx executors does not support esm and they actually have an open issue on that...

https://github.com/nrwl/nx/issues/19618

Please let me know if that makes sense, or I will ask my platform team member to jump in here. Thanks.

patrick-rodgers commented 5 months ago

Thanks for that background. Unfortunately, this is an external issue to this library and a limitation of that tooling. It reads that there is a workaround, not sure if it is viable in your case.

github-actions[bot] commented 5 months ago

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.