Webpack无法解析pdf-creator模块问题求助

问题描述 #

执行gulp bundle --ship打包SPFX项目时，Webpack抛出模块未找到错误，提示无法解析pdf-creator/dist/PdfCreator/bundle.js。已尝试以下操作但未解决：

• 执行ng build、npm run build
• 重新安装依赖包与node_modules
• 更新相关依赖包
• 执行package-solution（包可正常提取但部署后问题依旧）

详细错误日志 #

Error - [webpack] 'dist':
./lib/webparts/pdfCreator/PdfCreatorWebPart.js
Module not found: Error: Can't resolve 'pdf-creator/dist/PdfCreator/bundle.js' in 'C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/webparts/pdfCreator'
resolve 'pdf-creator/dist/PdfCreator/bundle.js' in 'C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/webparts/pdfCreator'
  Parsed request is a module
  using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/package.json (relative path: ./lib/webparts/pdfCreator)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/package.json (relative path: ./lib/webparts/pdfCreator)
    resolve as module
      C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/webparts/pdfCreator/node_modules doesn't exist or is not a directory
      C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/webparts/pdfCreator/lib doesn't exist or is not a directory
      C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/webparts/node_modules doesn't exist or is not a directory
      C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/webparts/lib doesn't exist or is not a directory
      C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/node_modules doesn't exist or is not a directory
    
      looking for modules in C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib
        using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/package.json (relative path: ./lib)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/package.json (relative path: ./lib)
          using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/package.json (relative path: ./lib/pdf-creator/dist/PdfCreator/bundle.js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/pdf-creator/dist/PdfCreator/bundle.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/pdf-creator/dist/PdfCreator/bundle.js.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/pdf-creator/dist/PdfCreator/bundle.js.json doesn't exist
            as directory
              C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/pdf-creator/dist/PdfCreator/bundle.js doesn't exist
      looking for modules in C:/Users/admin/Developer/node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          C:/Users/admin/Developer/node_modules/pdf-creator/dist/PdfCreator/bundle.js doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          C:/Users/admin/Developer/node_modules/pdf-creator/dist/PdfCreator/bundle.js.js doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
          C:/Users/admin/Developer/node_modules/pdf-creator/dist/PdfCreator/bundle.js.json doesn't exist
        as directory
          C:/Users/admin/Developer/node_modules/pdf-creator/dist/PdfCreator/bundle.js doesn't exist
      looking for modules in C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/node_modules
        using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/package.json (relative path: ./node_modules)
          using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/node_modules/pdf-creator/package.json (relative path: ./dist/PdfCreator/bundle.js)     
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              resolved symlink to C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js
                using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/package.json (relative path: ./dist/PdfCreator/bundle.js)
                  no extension
                    Field 'browser' doesn't contain a valid alias configuration
                    C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js doesn't exist
                  .js
                    Field 'browser' doesn't contain a valid alias configuration
                    C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js.js doesn't exist
                  .json
                    Field 'browser' doesn't contain a valid alias configuration
                    C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js.json doesn't exist
                  as directory
                    C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js doesn't exist
              C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/node_modules/pdf-creator/dist/PdfCreator/bundle.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              resolved symlink to C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js.js
                using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/package.json (relative path: ./dist/PdfCreator/bundle.js.js)
                  no extension
                 
              C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/node_modules/pdf-creator/dist/PdfCreator/bundle.js.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              resolved symlink to C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js.json
                using description file: C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/package.json (relative path: ./dist/PdfCreator/bundle.js.json)
                  no extension
                    Field 'browser' doesn't contain a valid alias configuration
                    C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js.json doesn't exist
                  .js
                    Field 'browser' doesn't contain a valid alias configuration
                    C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js.json.js doesn't exist
                  .json
                    Field 'browser' doesn't contain a valid alias configuration
                    C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js.json.json doesn't exist
                  as directory
                    C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator/dist/PdfCreator/bundle.js.json doesn't exist
              C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/node_modules/pdf-creator/dist/PdfCreator/bundle.js.json doesn't exist
            as directory
              C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/node_modules/pdf-creator/dist/PdfCreator/bundle.js doesn't exist
[C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/lib/webparts/pdfCreator/node_modules]

[C:/Users/admin/Developer/node_modules/package.json]

[C:/Users/admin/Developer/pnp/ng-pdf/PdfCreator-spfx/node_modules/pdf-creator/dist/PdfCreator/bundle.js]
 @ ./lib/webparts/pdfCreator/PdfCreatorWebPart.js 14:0-47

项目package.json配置 #

{
  "name": "pdf-creator-spfx",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test",
    "preversion": "node ./tools/pre-version.js",
    "postversion": "gulp dist"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.4.0",
    "@microsoft/sp-lodash-subset": "~1.4.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
    "@microsoft/sp-webpart-base": "~1.4.0",
    "@pnp/pnpjs": "^2.15.0",
    "@types/es6-promise": "0.0.33",
    "@types/webpack-env": "1.13.1",
    "pdf-creator": "file:../PdfCreator"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "gulp-sequence": "1.0.0",
    "spfx-uifabric-themes": "^0.8.5"
  }
}

修复方案 #

1. 确认本地依赖包的构建产物路径 #

• 进入../PdfCreator目录，执行对应构建命令（如npm run build或ng build --prod），确保构建产物生成在dist/PdfCreator/目录下
• 若构建产物路径与引用路径不符，修改WebPart中的引用路径，或调整pdf-creator项目的构建配置，将产物输出到指定路径

2. 配置Webpack别名 #

在SPFX项目的gulpfile.js中添加Webpack别名配置，指定pdf-creator的正确路径：

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
const path = require('path');

// 合并Webpack配置，添加别名
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfig) => {
    generatedConfig.resolve.alias = {
      'pdf-creator': path.resolve(__dirname, '../PdfCreator/dist/PdfCreator')
    };
    return generatedConfig;
  }
});

build.initialize(gulp);

修改后，WebPart中可简化引用路径为import * as PdfCreator from 'pdf-creator/bundle.js';

3. 重新安装本地依赖 #

删除SPFX项目的node_modules和package-lock.json，重新安装依赖以确保软链接正确生成：

rm -rf node_modules package-lock.json
npm install

4. 调整构建顺序 #

在SPFX项目的package.json中添加前置脚本，确保构建SPFX前先完成pdf-creator的构建：

"scripts": {
  "prebuild": "cd ../PdfCreator && npm run build",
  "build": "gulp bundle",
  // 保留其他原有脚本
}

内容的提问来源于stack exchange，提问作者mo7al876any