Mô-đun không tìm thấy: Lỗi: Không thể giải quyết module 'fs' trong

Question

Tôi cố gắng để tích hợp ADAL JS mẫu mã:

https://github.com/AzureAD/azure-activedirectory-library-for-nodejs/blob/master/sample/client-credentials-sample.js

thành một webpart SharePoint khuôn khổ khách hàng:

mã của tôi là rất đơn giản, tôi đã được cài đặt với NPM, ADAL, fs, nút-fs vv

However I see this error 

./~/adal-node/lib/util.js 
Module not found: Error: Cannot resolve module 'fs' in /Users/luis.valencia/Documents/GraphSamples/Sample1/node_modules/adal-node/lib 
resolve module fs in /Users/luis.valencia/Documents/GraphSamples/Sample1/node_modules/adal-node/lib 
    looking for modules in /Users/luis.valencia/Documents/GraphSamples/Sample1/node_modules/adal-node/lib 
    /Users/luis.valencia/Documents/GraphSamples/Sample1/node_modules/adal-node/lib/fs doesn't exist (module as directory) 
    resolve 'file' fs in /Users/luis.valencia/Documents/GraphSamples/Sample1/node_modules/adal-node/lib 
     resolve file 

và mã tôi có là thế này:

Tôi thậm chí còn nhận xét yêu cầu JS dòng, nhưng có vẻ như thư viện js adal chính nó sử dụng FS mà doesnt dường như được cài đặt đúng?

import { 
    BaseClientSideWebPart, 
    IPropertyPaneSettings, 
    IWebPartContext, 
    PropertyPaneTextField 
} from '@microsoft/sp-client-preview'; 

import styles from './Hellomsgraph.module.scss'; 
import * as strings from 'hellomsgraphStrings'; 
import { IHellomsgraphWebPartProps } from './IHellomsgraphWebPartProps'; 
import * as MicrosoftGraph from "microsoft-graph" 

const accessToken:string = ""; 
//var fs = require('fs'); 
var adal = require('adal-node'); 
var AuthenticationContext = adal.AuthenticationContext; 


export default class HellomsgraphWebPart extends BaseClientSideWebPart<IHellomsgraphWebPartProps> { 

    public constructor(context: IWebPartContext) { 
    super(context); 
    } 

    public render(): void { 
    this.domElement.innerHTML = ` 
     <div class="${styles.hellomsgraph}"> 
     <div class="${styles.container}"> 
      <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}"> 
      <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1"> 
       <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span> 
       <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p> 
       <p class="ms-font-l ms-fontColor-white">${this.properties.description}</p> 
       <a href="https://github.com/SharePoint/sp-dev-docs/wiki" class="ms-Button ${styles.button}"> 
       <span class="ms-Button-label">Learn more</span> 
       </a> 
      </div> 
      </div> 
     </div> 
     </div>`; 
    } 

    protected get propertyPaneSettings(): IPropertyPaneSettings { 
    return { 
     pages: [ 
     { 
      header: { 
      description: strings.PropertyPaneDescription 
      }, 
      groups: [ 
      { 
       groupName: strings.BasicGroupName, 
       groupFields: [ 
       PropertyPaneTextField('description', { 
        label: strings.DescriptionFieldLabel 
       }) 
       ] 
      } 
      ] 
     } 
     ] 
    }; 
    } 
} 

Answer 1

thêm video này vào webpack.config.js

target: 'node', 

Xem here và here