Help - some file extensions like .dll are not being copied to spfx lib folder

omarceloribeiro commented 11 months ago

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

[ ] 💥 Internet Explorer
[ ] 💥 Microsoft Edge
[ ] 💥 Google Chrome
[ ] 💥 FireFox
[ ] 💥 Safari
[ ] mobile (iOS/iPadOS)
[ ] mobile (Android)
[X] not applicable
[ ] other (enter in the "Additional environment details" area below)

Additional environment details

browser version
SPFx version 1.17.4
Node.js version 16.20.1

├── @fluentui/react@7.204.0 ├── @microsoft/eslint-config-spfx@1.17.4 ├── @microsoft/eslint-plugin-spfx@1.17.4 ├── @microsoft/rush-stack-compiler-4.5@0.5.0 ├── @microsoft/sp-build-web@1.17.4 ├── @microsoft/sp-component-base@1.17.4 ├── @microsoft/sp-core-library@1.17.4 ├── @microsoft/sp-lodash-subset@1.17.4 ├── @microsoft/sp-module-interfaces@1.17.4 ├── @microsoft/sp-office-ui-fabric-core@1.17.4 ├── @microsoft/sp-property-pane@1.17.4 ├── @microsoft/sp-webpart-base@1.17.4 ├── @rushstack/eslint-config@2.5.1 ├── @types/webpack-env@1.15.3 ├── ajv@6.12.6 ├── bindings@1.5.0 extraneous ├── eslint@8.7.0 ├── file-uri-to-path@1.0.0 extraneous ├── gulp@4.0.2 ├── nan@2.17.0 extraneous ├── tslib@2.3.1 └── typescript@4.5.5

Issue description

Hi, please I need to pack some dll files, and other files extensions related to blazor app, to ClientSideAssets on appcatalog. So I need those files available in lib folder so I can use the webpack loader https://v4.webpack.js.org/loaders/file-loader/ to pack these files in solution package.

In the lib folder I can see some files inside _famework folder, like .json, and .js. But I can't see files like .dll, .br, .gz

after placing a require("dll file path") and running gulp bundle, this error is shown on console:

Error - [webpack] 'dist':
./lib/webparts/helloWorld/HelloWorldWebPart.js
Module not found: Error: Can't resolve './blazorapp1/_framework/BlazorApp1.dll' in 'C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld'
resolve './blazorapp1/_framework/BlazorApp1.dll' in 'C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld'
  using description file: C:/source/repos/SPFX/spfxblazorwebpart/App1/package.json (relative path: ./lib/webparts/helloWorld)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:/source/repos/SPFX/spfxblazorwebpart/App1/package.json (relative path: ./lib/webparts/helloWorld/blazorapp1/_framework/BlazorApp1.dll)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld/blazorapp1/_framework/BlazorApp1.dll doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld/blazorapp1/_framework/BlazorApp1.dll.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld/blazorapp1/_framework/BlazorApp1.dll.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld/blazorapp1/_framework/BlazorApp1.dll.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld/blazorapp1/_framework/BlazorApp1.dll.json doesn't exist
      .css
        Field 'browser' doesn't contain a valid alias configuration
        C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld/blazorapp1/_framework/BlazorApp1.dll.css doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld/blazorapp1/_framework/BlazorApp1.dll.jsx doesn't exist
      as directory
        C:/source/repos/SPFX/spfxblazorwebpart/App1/lib/webparts/helloWorld/blazorapp1/_framework/BlazorApp1.dll doesn't exist

Seems like it only works with theses file extension above. I tried to add other file extesions to .eslintrc.js:

   {
      // Blazor files
    // also tried with the folder name like o
      files: [
        '*.dll',
        '*.br',
        '*.gz',
        '*.json',
        '**.js',
        '**/blazorapp1/*.blat',
        '**/blazorapp1/*.wasm',
        '**/blazorapp1/*.dat',
        '**/blazorapp1/*.css',
        '**/blazorapp1/*.map',
        '**/blazorapp1/*.eot',
        '**/blazorapp1/*.otf',
        '**/blazorapp1/*.svg',
        '**/blazorapp1/*.ttf',
        '**/blazorapp1/*.woff',
        '**/blazorapp1/*.md',
      ],
      rules: {
      }
    }

But not worked, still theses files are not shown in lib folder. They exists in src folder, but are not copied to lib folder. I can`t find what I am missing.

I tried with a png file and it worked:

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push(
      {
        test: /(blazorapp1).*\.png$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            }
          }
        ]
      }
    );

    return generatedConfiguration;
  }
});

result was: \dist\lib\webparts\helloWorld\blazorapp1_framework\testeimg.png

and inside .sppkg: \sharepoint\solution\app-1\ClientSideAssets\lib\webparts\helloWorld\blazorapp1_framework\testeimg.png

Issue on sp-dev-docs: 9137 - Repository for implementation to add Blazor WASM as spfx webpart framework

omarceloribeiro commented 11 months ago

~~obs: just found that the line: require("./blazorapp1/_framework/testeimg.png"); is not necessary. the webpack loader file-loader get those files even without that line in the webpart script. so just having the files in /lib folder would resolve the problem.~~

edit: still need the require("./blazorapp1/_framework/testeimg.png");

ghost commented 11 months ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

omarceloribeiro commented 11 months ago

solved the issue added copy-static-assets.json to config folder content:

{
    "includeExtensions": [
        "dll",
        "br",
        "gz",
        "json",
        "js",
        "blat",
        "wasm",
        "dat",
        "css",
        "map",
        "eot",
        "otf",
        "svg",
        "ttf",
        "woff",
        "md",
        "png"
    ]
}

But had to also add the png extension.

omarceloribeiro commented 11 months ago

changed to this solution:

The gulp approach

let blazorCopy = build.subTask('blazorCopy', (gulp, buildOptions, done) => {

  // make sure preBuild file will be copied again
  gulp.src('./src/**/blazorapp1/**/*.*')
    .pipe(gulp.dest('./lib/'));

    // Don't forget to tell SPFx you are done
    done();
})

source: How to copy files from src to lib folder in SPFx?

I believe this issue can be closed.

nick-pape commented 11 months ago

Glad you were able to resolve this yourself!

Correct -- the recommended way to copy extra files is to drop a copy-static-assets.json in the config folder. Writing a gulp task can work as well!

nick-pape commented 11 months ago

A good overview: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/extending-webpack-in-build-pipeline#step-3---update-your-code

ghost commented 11 months ago

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues

SharePoint / sp-dev-docs