File download link errors out at build for Excel files. "Unexpected character '' (1:2)

[justsilencia]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When creating a simple download link to download pdf's and other files, everything works perfectly. However, when I try to import an .xlsx file for download, the gatsby build process errors out with:

ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected character '' (1:2)

The code is simple:

import downloadCalc from "../resources/CSM-Calculator.xlsx";

<a href={downloadCalc} id="CreditCalcLink" className="btn btn-info" download>
         Click here to Download
 </a>

Reproduction Link

https://none

Steps to Reproduce

1. Import an excel file to your component.

...

Expected Result

The excel file should import and allow me to create a download link.

Actual Result

The gatsby build errors out with:

ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected character '' (1:2)

Environment

System:
    OS: Windows 10 10.0.18363
    CPU: (6) x64 Intel(R) Core(TM) i5-9500 CPU @ 3.00GHz
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    gatsby: ^2.32.3 => 2.32.13 
    gatsby-image: ^2.11.0 => 2.11.0 
    gatsby-plugin-image: ^1.0.0 => 1.8.0 
    gatsby-plugin-manifest: ^2.12.0 => 2.12.1 
    gatsby-plugin-offline: ^3.10.0 => 3.10.2 
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0 
    gatsby-plugin-sharp: ^2.14.1 => 2.14.4 
    gatsby-source-contentful: ^4.6.2 => 4.6.4 
    gatsby-source-filesystem: ^2.11.0 => 2.11.1 
    gatsby-transformer-remark: ^2.16.0 => 2.16.1 
    gatsby-transformer-sharp: ^2.12.0 => 2.12.1

Config Flags

No response

[LekoArts]

You're trying to import a file directly into webpack that is not supported out of the box. You'd need to add an additional loader to support excel files: https://www.gatsbyjs.com/docs/how-to/images-and-media/importing-assets-into-files/

A quick solution to this is using the static folder: https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder#gatsby-skip-here

[justsilencia]

The static folder solution is working perfect locally. However, I have a feeling this isn't a good idea for production. Is there any reason I shouldn't use this option for production?

[LekoArts]

This is perfectly fine for production. Some people even prefer it because it gives you stable urls you can directly link to. So https://example.com/path/to/file.pdf vs https://example.com/path/to/file-random-hash-23984280934.pdf

[justsilencia]

Thanks!