Vite unexpected token error at runtime, in png file exported by dependency

68 Views Asked by At

I am trying to upgrade a large legacy React application from Razzle to Vite. I have bootstrapped using this template: https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-react

We have a company made dependency that, among other things, exports some images. If that dependency is included and referenced, I get an error at runtime:

$ npm run dev 

> [email protected] dev
> node server

Server started at http://localhost:5173

10:38:02 [vite] Error when evaluating SSR module /src/App.jsx: failed to import "company-dependency"
|- C:\coding\vite\vite-react-ssr-002\node_modules\company-dependency\lib\images\some-image.png:1
�PNG
 
 
SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (C:\coding\vite\vite-react-ssr-002\node_modules\company-dependency\lib\themes\brand\ImageStore.js:8:43)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (C:\coding\vite\vite-react-ssr-002\node_modules\company-dependency\lib\themes\images.js:8:42)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (C:\coding\vite\vite-react-ssr-002\node_modules\company-dependency\lib\index.js:10:38)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

I'm not even referencing the image directly, I'm only importing and using a single method that returns a vanilla JS object.

The dependency is built using babel only, no webpack or anything.

I have never worked with Vite before, or set up any framework from scratch, so I'm not sure what to do. The documentation for View suggests images should be handled automatically: https://vitejs.dev/guide/assets

0

There are 0 best solutions below