Can't load gltf file in production build

[justin-hackin]

Describe the bug

I'm attempting to acquire a dynamic url for a static asset that is a gltf file (the 3D file format). I get the gltf file url with
"new URL(`../../static/models/${shapeName}.gltf`, import.meta.url).href" and pass it to three.js GLTFLoader. This works nicely in development server. However, when I attempt to build the project, I get an error:

 Unexpected token (Note that you need plugins to import files that are not JavaScript)
  file: [my project root]/packages/renderer/static/models/disdyakis-dodecahedron.gltf:2:12
  1: {
  2:     "asset" : {
                 ^
  3:         "generator" : "Khronos glTF Blender I/O v1.1.46",
  4:         "version" : "2.0"

I tried to fix this by adding assetsInclude: ['gltf'] to my config and this didn't help.

I'm still pretty clueless about rollup and new to vite, but I thought maybe I needed the json plugin to load a different extension than json. The include option for the plugin says that it loads all files by default, confusing, but I assumed it meant all json files so I figured I could only narrow down that filter. Nonetheless, I tried adding json({ include: ['*.json', '*.gltf'] }) to my plugins to no avail.

I'm using vite to build an electron project based on this starter and the suggestion that it might be a good alternative to electron-webpack. Wow, it's doing a great job so I hope I can get over this hump so I can finally get my project into public here. Big thanks to devs / maintainers!

Reproduction

This may just be a matter of conceptual misunderstanding and the steps to reproduce manually are relatively simple. If this is not the case and it is deemed "need reproduction" I will put together a repo.

System Info

System:
    OS: Linux 5.8 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
    Memory: 3.41 GB / 19.34 GB
    Container: Yes
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 2.4.1 - ~/.nvm/versions/node/v14.15.1/bin/yarn
    npm: 7.13.0 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Brave Browser: 93.1.29.79
    Chrome: 93.0.4577.63
    Firefox: 92.0
  npmPackages:
    vite: 2.5.7 => 2.5.7

Used Package Manager

npm

Logs

Unexpected token (Note that you need plugins to import files that are not JavaScript)
  file: [project root]/packages/renderer/static/models/disdyakis-dodecahedron.gltf:2:12
  1: {
  2:     "asset" : {
                 ^
  3:         "generator" : "Khronos glTF Blender I/O v1.1.46",
  4:         "version" : "2.0"
  Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
      at error ([project root]/node_modules/rollup/dist/shared/rollup.js:151:30)
      at Module.error ([project root]/node_modules/rollup/dist/shared/rollup.js:10044:16)
      at Module.tryParse ([project root]/node_modules/rollup/dist/shared/rollup.js:10447:25)
      at Module.setSource ([project root]/node_modules/rollup/dist/shared/rollup.js:10350:24)
      at ModuleLoader.addModuleSource ([project root]/node_modules/rollup/dist/shared/rollup.js:19706:20)
      at async ModuleLoader.fetchModule ([project root]/node_modules/rollup/dist/shared/rollup.js:19762:9)
      at async Promise.all (index 1)
      at async ModuleLoader.fetchStaticDependencies ([project root]/node_modules/rollup/dist/shared/rollup.js:19788:34)
      at async Promise.all (index 0)
      at async ModuleLoader.fetchModule ([project root]/node_modules/rollup/dist/shared/rollup.js:19764:9) {
    code: 'PARSE_ERROR',
    parserError: SyntaxError: Unexpected token (2:12)
        at Parser.pp$4.raise ([project root]/node_modules/rollup/dist/shared/rollup.js:16954:13)
        at Parser.pp.unexpected ([project root]/node_modules/rollup/dist/shared/rollup.js:14462:8)
        at Parser.pp.semicolon ([project root]/node_modules/rollup/dist/shared/rollup.js:14439:64)
        at Parser.pp$1.parseExpressionStatement ([project root]/node_modules/rollup/dist/shared/rollup.js:14920:8)
        at Parser.pp$1.parseStatement ([project root]/node_modules/rollup/dist/shared/rollup.js:14655:24)
        at Parser.pp$1.parseBlock ([project root]/node_modules/rollup/dist/shared/rollup.js:14936:21)
        at Parser.pp$1.parseStatement ([project root]/node_modules/rollup/dist/shared/rollup.js:14620:34)
        at Parser.pp$1.parseTopLevel ([project root]/node_modules/rollup/dist/shared/rollup.js:14519:21)
        at Parser.parse ([project root]/node_modules/rollup/dist/shared/rollup.js:14311:15)
        at Function.parse ([project root]/node_modules/rollup/dist/shared/rollup.js:14342:35) {
      pos: 14,
      loc: Position { line: 2, column: 12 },
      raisedAt: 15
    },
    id: '[project root]/packages/renderer/static/models/disdyakis-dodecahedron.gltf',
    pos: 14,
    loc: {
      column: 12,
      file: '[project root]/packages/renderer/static/models/disdyakis-dodecahedron.gltf',
      line: 2
    },
    frame: '1: {\n' +
      '2:     "asset" : {\n' +
      '               ^\n' +
      '3:         "generator" : "Khronos glTF Blender I/O v1.1.46",\n' +
      '4:         "version" : "2.0"',

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[justin-hackin]

Sorry maybe I just needed an online rubber duck because I found a rollup gltf loader https://github.com/bengsfort/rollup-plugin-gltf that I am going to try later.

[justin-hackin]

I tried rollup-plugin-gltf even though it wasn't on the list, it did not change the error message. Too bad because it's just a json file.

[bluwy]

Re assetsInclude, it's very similar to #4948 (comment). Try assetsInclude: ['**/*.gltf']. But even without assetsInclude, I'm not sure why it works in dev but not in prod though.

[justin-hackin]

@bluwy that was the issue, you solved my problem! Yes this was confusing because the built-in list I referenced was only an array of extensions. Thanks for your help and for addressing docs 🙌