Ph7x Systems (by Joao LIVIO)

SPFx 1.19.0: Desmitify Error – [webpack] ‘dist’: [Object Objet]

by · Published · Updated

Photo by Andrea Piacquadio

I was exploring SharePoint Framework 1.19.0 and noticed some controversy surrounding this error. In my understanding, it is an annoying behavior but this issue is not a bug in the chain or in the Reusable React controls for your SharePoint Framework solutions v3.19.0, nor in the Reusable property pane controls for the SharePoint Framework solutions v3.18.0. So, AJIXuMuK in my opinion is right (update) for the SPFx React Controls (Merged update Jul 5 2024).

This are my conclusions:

I was converting the sample from João Mendes and Sajal Maity in the Official Repo, the (Birthday Project), and I encountered the same error. Therefore, it’s time to dig in and investigate what is really happening.

So, bummm, error came up

Error - [webpack] 'dist':
[Object Object]

This is my package.json

{
  "name": "react-birthdays",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=18.17.1 <19.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@fluentui/react": "^8.106.4",
    "@microsoft/sp-component-base": "1.19.0",
    "@microsoft/sp-core-library": "1.19.0",
    "@microsoft/sp-lodash-subset": "1.19.0",
    "@microsoft/sp-office-ui-fabric-core": "1.19.0",
    "@microsoft/sp-property-pane": "1.19.0",
    "@microsoft/sp-webpart-base": "1.19.0",
    "@pnp/graph": "^4.4.0",
    "@pnp/logging": "^4.4.0",
    "@pnp/sp": "^4.4.0",
    "@pnp/spfx-controls-react": "3.19.0",
    "@pnp/spfx-property-controls": "3.18.0",
    "moment": "^2.30.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.20.1",
    "@microsoft/eslint-plugin-spfx": "1.20.1",
    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
    "@microsoft/sp-build-web": "1.20.1",
    "@microsoft/sp-module-interfaces": "1.20.1",
    "@rushstack/eslint-config": "2.5.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.7.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "typescript": "4.7.4"
  }
}

After researching with other developers who encountered the same issue, I stumbled upon this GitHub (Bug, Error) Report. Reading between the lines. RedGlow makes a valid point. Although it’s not groundbreaking, their insights were incredibly helpful. According to our investigation, if we navigate to our project’s node_modules/@microsoft/gulp-core-build-webpack/lib/WebpackTask.js and FIND:

this.logError(`'${outputDir}':` + os_1.EOL + statsResult.errors.join(os_1.EOL) + os_1.EOL);

Then replace WITH:

this.logError(`'${outputDir}':` + os_1.EOL + statsResult.errors.map(x => JSON.stringify(x, null, 2)).join(os_1.EOL) + os_1.EOL);

You can observe the specific error, which states that you should find the printed objects—message, moduleName, and loc—to identify the “problem”because it’s not really a problem, it’s a behavior. It’s likely that the issue lies in the compiled JavaScript code rather than the TypeScript, but it’s still better than having no clues at all.

Microsoft 365 Stack Offer

SharePoint Framework (SPFx) has been supporting Webpack 5 since version 1.18.2. The tooling was upgraded from Webpack 4 to Webpack 5. If you have customized your webpack configuration in your project, I recommend referring to the official Webpack documentation for migration details.

Based on my analysis, here are my conclusions:

You must modify the Fluent UI imports as follows:

import { Image, ImageFit } from '@fluentui/react/lib/Image';
import { Label } from '@fluentui/react/lib/Label';

Secondly, you need to understand the other errors. In my case, I encountered issues related to required assets after modifying the line in the node_modules/@microsoft/gulp-core-build-webpack/lib/WebpackTask.js file.

To reproduce the error, run the following command:

gulp serve --nobrowser

Pay attention to line 37 in the serve. Hopefully, this helps you troubleshoot the issue!

gulp serve --nobrowser
Build target: DEBUG
[03:17:56] Using gulpfile ~/ClientsDev/gulp serve --nobrowser
Build target: DEBUG
[03:17:56] Using gulpfile ~/ClientsDev/gulpfile.js
[03:17:56] Starting 'serve'...
[03:17:56] Starting gulp
[03:17:56] Starting subtask 'spfx-serve'...
[03:17:56] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
[03:17:56] Starting server...
[03:17:56] Finished subtask 'spfx-serve' after 124 ms
[03:17:56] Starting subtask 'pre-copy'...
[03:17:56] Finished subtask 'pre-copy' after 32 ms
[03:17:56] Starting subtask 'copy-static-assets'...
[03:17:56] Starting subtask 'sass'...
[03:17:56] Server started https://localhost:4321
[03:17:56] LiveReload started on port 35729
[03:17:56] Running server
[03:17:56] Finished subtask 'sass' after 495 ms
[03:17:56] Starting subtask 'lint'...
[03:17:56] [lint] eslint version: 8.7.0
[03:17:56] Starting subtask 'tsc'...
[03:17:56] [tsc] typescript version: 4.7.4
[03:17:58] Finished subtask 'copy-static-assets' after 2.11 s
[03:17:58] Finished subtask 'tsc' after 1.8 s
[03:17:59] Finished subtask 'lint' after 2.82 s
[03:17:59] Starting subtask 'post-copy'...
[03:17:59] Finished subtask 'post-copy' after 51 μs
[03:17:59] Starting subtask 'configure-webpack'...
[03:17:59] Finished subtask 'configure-webpack' after 174 ms
[03:17:59] Starting subtask 'webpack'...
[03:18:01] Error - [webpack] 'dist':
{
  "moduleIdentifier": "/Users/jlivio/ClientsDev/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[6].use!/Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/HappyBirthdayCard.js",
  "moduleName": "./lib/controls/happyBirthdayCard/HappyBirthdayCard.js",
  "loc": "41:18-63",
  "message": "Module not found: Error: Can't resolve './happyBirthdayCard/assets/cof.png' in '/Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard'",
  "moduleId": 3877,
  "moduleTrace": [
    {
      "originIdentifier": "/Users/jlivio/ClientsDev/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[6].use!/Users/jlivio/ClientsDev/lib/controls/happybirthday/HappyBirthday.js",
      "originName": "./lib/controls/happybirthday/HappyBirthday.js",
      "moduleIdentifier": "/Users/jlivio/ClientsDev/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[6].use!/Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/HappyBirthdayCard.js",
      "moduleName": "./lib/controls/happyBirthdayCard/HappyBirthdayCard.js",
      "dependencies": [
        {
          "loc": "18:0-83"
        },
        {
          "loc": "31:36-53"
        }
      ],
      "originId": 24170,
      "moduleId": 3877
    },
    {
      "originIdentifier": "/Users/jlivio/ClientsDev/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[6].use!/Users/jlivio/ClientsDev/lib/controls/happybirthday/index.js",
      "originName": "./lib/controls/happybirthday/index.js",
      "moduleIdentifier": "/Users/jlivio/ClientsDev/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[6].use!/Users/jlivio/ClientsDev/lib/controls/happybirthday/HappyBirthday.js",
      "moduleName": "./lib/controls/happybirthday/HappyBirthday.js",
      "dependencies": [
        {
          "loc": "5:0-32"
        },
        {
          "loc": "5:0-32"
        }
      ],
      "originId": 7277,
      "moduleId": 24170
    },
    {
      "originIdentifier": "/Users/jlivio/ClientsDev/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[6].use!/Users/jlivio/ClientsDev/lib/webparts/birthdays/components/Birthdays.js",
      "originName": "./lib/webparts/birthdays/components/Birthdays.js",
      "moduleIdentifier": "/Users/jlivio/ClientsDev/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[6].use!/Users/jlivio/ClientsDev/lib/controls/happybirthday/index.js",
      "moduleName": "./lib/controls/happybirthday/index.js",
      "dependencies": [
        {
          "loc": "54:0-64"
        },
        {
          "loc": "93:44-57"
        }
      ],
      "originId": 6636,
      "moduleId": 7277
    },
    {
      "originIdentifier": "/Users/jlivio/ClientsDev/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[6].use!/Users/jlivio/ClientsDev/lib/webparts/birthdays/BirthdaysWebPart.js",
      "originName": "./lib/webparts/birthdays/BirthdaysWebPart.js",
      "moduleIdentifier": "/Users/jlivio/ClientsDev/node_modules/source-map-loader/dist/cjs.js??ruleSet[1].rules[6].use!/Users/jlivio/ClientsDev/lib/webparts/birthdays/components/Birthdays.js",
      "moduleName": "./lib/webparts/birthdays/components/Birthdays.js",
      "dependencies": [
        {
          "loc": "58:0-47"
        },
        {
          "loc": "132:42-51"
        }
      ],
      "originId": 58940,
      "moduleId": 6636
    }
  ],
  "details": "resolve './happyBirthdayCard/assets/cof.png' in '/Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard'\n  using description file: /Users/jlivio/ClientsDev/package.json (relative path: ./lib/controls/happyBirthdayCard)\n    Field 'browser' doesn't contain a valid alias configuration\n    using description file: /Users/jlivio/ClientsDev/package.json (relative path: ./lib/controls/happyBirthdayCard/happyBirthdayCard/assets/cof.png)\n      no extension\n        Field 'browser' doesn't contain a valid alias configuration\n        /Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/happyBirthdayCard/assets/cof.png doesn't exist\n      .wasm\n        Field 'browser' doesn't contain a valid alias configuration\n        /Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/happyBirthdayCard/assets/cof.png.wasm doesn't exist\n      .mjs\n        Field 'browser' doesn't contain a valid alias configuration\n        /Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/happyBirthdayCard/assets/cof.png.mjs doesn't exist\n      .js\n        Field 'browser' doesn't contain a valid alias configuration\n        /Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/happyBirthdayCard/assets/cof.png.js doesn't exist\n      .json\n        Field 'browser' doesn't contain a valid alias configuration\n        /Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/happyBirthdayCard/assets/cof.png.json doesn't exist\n      .css\n        Field 'browser' doesn't contain a valid alias configuration\n        /Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/happyBirthdayCard/assets/cof.png.css doesn't exist\n      .jsx\n        Field 'browser' doesn't contain a valid alias configuration\n        /Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/happyBirthdayCard/assets/cof.png.jsx doesn't exist\n      as directory\n        /Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard/happyBirthdayCard/assets/cof.png doesn't exist",
  "stack": "ModuleNotFoundError: Module not found: Error: Can't resolve './happyBirthdayCard/assets/cof.png' in '/Users/jlivio/ClientsDev/lib/controls/happyBirthdayCard'\n    at /Users/jlivio/ClientsDev/node_modules/webpack/lib/Compilation.js:2022:28\n    at /Users/jlivio/ClientsDev/node_modules/webpack/lib/NormalModuleFactory.js:817:13\n    at eval (eval at create (/Users/jlivio/ClientsDev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)\n    at /Users/jlivio/ClientsDev/node_modules/webpack/lib/NormalModuleFactory.js:275:22\n    at eval (eval at create (/Users/jlivio/ClientsDev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)\n    at /Users/jlivio/ClientsDev/node_modules/webpack/lib/NormalModuleFactory.js:448:22\n    at /Users/jlivio/ClientsDev/node_modules/webpack/lib/NormalModuleFactory.js:118:11\n    at /Users/jlivio/ClientsDev/node_modules/webpack/lib/NormalModuleFactory.js:689:25\n    at /Users/jlivio/ClientsDev/node_modules/webpack/lib/NormalModuleFactory.js:893:8\n    at /Users/jlivio/ClientsDev/node_modules/webpack/lib/NormalModuleFactory.js:1013:5"
}

[03:18:01] Finished subtask 'webpack' after 1.78 s

Example, as you can see in line 2, I’m missing a “.” dot, so the chain will generate that specific error.

const imageTemplate: IImageTemplate[] = [{
  imageUrl: require('./happyBirthdayCard/assets/cof.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof5.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof1.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof3.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof8.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/baloons.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof2.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof10.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof11.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof12.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof14.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof14_1.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof18.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof17.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof19.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof20.png')
},
{
  imageUrl: require("../happyBirthdayCard/assets/cof22.png")
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof24.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof28.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof29.png')
},
{
  imageUrl: require('../happyBirthdayCard/assets/cof30.png')
}
];

After correcting, you can see the outcome:

~/ClientsDev via ⬢ v18.20.2 
➜ gulp serve --nobrowser
Build target: DEBUG
[03:39:42] Using gulpfile ~/ClientsDev/gulpfile.js
[03:39:42] Starting 'serve'...
[03:39:42] Starting gulp
[03:39:42] Starting subtask 'spfx-serve'...
[03:39:42] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
[03:39:42] Starting server...
[03:39:42] Finished subtask 'spfx-serve' after 131 ms
[03:39:42] Starting subtask 'pre-copy'...
[03:39:42] Finished subtask 'pre-copy' after 34 ms
[03:39:42] Starting subtask 'copy-static-assets'...
[03:39:42] Starting subtask 'sass'...
[03:39:42] Server started https://localhost:4321
[03:39:42] LiveReload started on port 35729
[03:39:42] Running server
[03:39:42] Finished subtask 'sass' after 506 ms
[03:39:42] Starting subtask 'lint'...
[03:39:42] [lint] eslint version: 8.7.0
[03:39:42] Starting subtask 'tsc'...
[03:39:42] [tsc] typescript version: 4.7.4
[03:39:44] Finished subtask 'copy-static-assets' after 2.16 s
[03:39:44] Finished subtask 'tsc' after 1.71 s
[03:39:45] Finished subtask 'lint' after 2.73 s
[03:39:45] Starting subtask 'post-copy'...
[03:39:45] Finished subtask 'post-copy' after 47 μs
[03:39:45] Starting subtask 'configure-webpack'...
[03:39:45] Finished subtask 'configure-webpack' after 161 ms
[03:39:45] Starting subtask 'webpack'...
[03:39:47] Finished subtask 'webpack' after 1.76 s
[03:39:47] Starting subtask 'reload'...
[03:39:47] Finished subtask 'reload' after 961 μs

Please revert the line in: 

node_modules/@microsoft/gulp-core-build-webpack/lib/WebpackTask.js to its original state, and you’ll be good to go.

this.logError(`'${outputDir}':` + os_1.EOL + statsResult.errors.join(os_1.EOL) + os_1.EOL);

UPDATE

Read my Article Here, but read between the lines.

Following Microsoft’s guidelines for SharePoint Framework (SPFx) projects is essential for several reasons:

  1. Best Practices and Consistency: Microsoft’s guidelines are based on extensive experience and industry best practices. By adhering to them, you ensure consistency across your projects and benefit from battle-tested approaches.
  2. Compatibility and Future-Proofing: Microsoft updates SPFx regularly. By following their guidelines, you stay aligned with the latest features, security enhancements, and compatibility improvements. This future-proofs your solutions.
  3. Security and Performance: Microsoft’s guidelines emphasize security practices, such as avoiding direct DOM manipulation and using secure APIs. They also guide you on optimizing performance, which is crucial for user satisfaction.
  4. Community Support and Resources: When you follow Microsoft’s recommendations, you tap into a vast community of developers, experts, and resources. You can seek help, share knowledge, and troubleshoot issues more effectively.
  5. Integration with Microsoft 365 Services: SPFx often integrates with Microsoft 365 services (like SharePoint, Teams, and OneDrive). Following guidelines ensures seamless integration and maximizes the value of these services.

Remember, while guidelines provide a solid foundation, adapt them to your specific project needs. Customization is essential, but it’s wise to start from a well-established base.

UPDATE 2

We can see a new separate issue regarding the same issue here with other topics and asking for a human like message when serving, deploying or shipping, and a new issue “Cannot read properties of undefined (reading ‘id’)” for a specific scenario.

Hope this help, keep visiting us 🙂

Tags:

Joao Livio

João has over two decades of IT experience and holds several certifications, including Microsoft Certified Professional (MCP) and Microsoft Certified Technology Specialist (MCTS). He is also a Lean Specialist with expertise in Lean Management, Nintex, and other training programs from LinkedIn and Udemy, including exams related to Azure and the Power Platform. As a Consultant and Advisor for Modern Work, João assists clients in unlocking their digital potential and optimizing productivity and collaboration. His approach is agnostic to technology, focusing on practical solutions that align with business goals. He has consistently been recognized as a Microsoft Most Valuable Professional (MVP) for 10 consecutive years. His commitment to excellence extends beyond technical expertise; he also values consistency, mental health, creative thinking, teamwork, and fun at work. João believes that learning every day within a team context is the key to continuous improvement.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.