Skip to content

Commit

Permalink
updating docs and adding nodejs commonjs sample
Browse files Browse the repository at this point in the history
  • Loading branch information
patrick-rodgers committed Feb 25, 2022
1 parent 7ca5bba commit f70b12f
Show file tree
Hide file tree
Showing 8 changed files with 933 additions and 0 deletions.
55 changes: 55 additions & 0 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,61 @@ function() {
}();
```

### Node project using TypeScript producing commonjs modules

For TypeScript projects which output commonjs but need to import esm modules you will need to take a few additional steps to use the pnp esm modules. This is true of any esm module with a project structured in this way, not specific to PnP's implementation. It is very possible there are other configurations that make this work, but these steps worked in our testing. We have also provided [a basic sample](https://github.com/pnp/pnpjs/tree/version-3/samples/nodejs-commonjs) showing this setup.

You must install TypeScript @next or you will get errors using node12 module resolution. This may change but is the current behavior when we did our testing.

`npm install -D typescript@next`

The tsconfig file for your project should have the `"module": "CommonJS"` and `"moduleResolution": "node12",` settings in addition to whatever else you need.

_tsconfig.json_
```JSON
{
"compilerOptions": {
"module": "CommonJS",
"moduleResolution": "node12"
}
```

You must then import the esm dependencies using the async import pattern. This works as expected with our selective imports, and vscode will pick up the intellisense as expected.

_index.ts_
```TypeScript
import { settings } from "./settings.js";

// this is a simple example as async await is not supported with commonjs output
// at the root.
setTimeout(async () => {

const { spfi } = await import("@pnp/sp");
const { SPDefault } = await import("@pnp/nodejs");
await import("@pnp/sp/webs");

const sp = spfi().using(SPDefault({
baseUrl: settings.testing.sp.url,
msal: {
config: settings.testing.sp.msal.init,
scopes: settings.testing.sp.msal.scopes
}
}));

// make a call to SharePoint and log it in the console
const w = await sp.web.select("Title", "Description")();
console.log(JSON.stringify(w, null, 4));

}, 0);
```

Finally, when launching node you need to include the `` flag with a setting of 'node'.

`node --experimental-specifier-resolution=node dist/index.js`

> Read more in the releated [TypeScript Issue](https://github.com/microsoft/TypeScript/issues/43329), [TS pull request Adding the functionality](https://github.com/microsoft/TypeScript/pull/45884), and the [TS Docs](https://www.typescriptlang.org/tsconfig#moduleResolution).

## Single Page Application Context

In some cases you may be working in a client-side application that doesn't have context to the SharePoint site. In that case you will need to utilize the MSAL Client, you can get the details on creating that connection in this [article](./concepts/authentication.md#MSAL-in-Browser).
Expand Down
4 changes: 4 additions & 0 deletions samples/nodejs-commonjs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
dist/

/**/node_modules

Loading

0 comments on commit f70b12f

Please sign in to comment.