Unable to find input file - NodeJS

[Thomas Fiala]

I'm finding problems with sqip not finding files in my working directory

Actual Result
Changing the working directory from anything below, above or in the current working directory of sqip presents me with the error Error: Unable to find any files via /* . Make sure the file exists

Expected Result
File should be found in the current working directory, or any directory set as input.

Screenshot of code and directory structure:

Output of error:

TypeError: resolver is not a function
    at Object.apiResolver (node_modules/next/dist/next-server/server/api-utils.js:39:9)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async DevServer.handleApiRequest (node_modules/next/dist/next-server/server/next-server.js:367:9)
    at async Object.fn /node_modules/next/dist/next-server/server/next-server.js:295:17)
    at async Router.execute (/node_modules/next/dist/next-server/server/router.js:25:32)
    at async DevServer.run (/node_modules/next/dist/next-server/server/next-server.js:417:29)
Something went wrong generating the SQIP previews
Error: Unable to find any files via /input.jpg. Make sure the file exists.

If you are using globbing patterns, the following features are supported:

https://github.com/micromatch/micromatch#matching-features
    at locateFiles (node_modules/sqip/dist/helpers.js:65:11)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async sqip (node_modules/sqip/dist/sqip.js:181:17)
    at async /.next/server/static/development/pages/api/generateImg.js:121:18

[Benedikt Rötsch]

Hey there,

can you run it with the debugging enabled and post your output? DEBUG=sqip*

Also, please check if you actually pass a absolute path to input or one relative to the working directory. Means it should not be /input.jpg but should be input.jpg.

This should help us to find the issue

[Thomas Fiala]

I'm unsure how to import the debugging command to my current function in the same way I've used sqip above.. is it possible to show me an example? I've also checked it is passing the absolute path in the terminal 'input.jpg' and not the relative path '/input.jpg'

I tried the cli in the same directory as the above example and got an output

➜  api (feat/placeholder) ✗ sqip --input 'input.jpg'
Processing: input.jpg
┌───────────────┬────────────────┬───────┬────────┬──────┐
│ originalWidth │ originalHeight │ width │ height │ type │
├───────────────┼────────────────┼───────┼────────┼──────┤
│ 4843          │ 3208           │ 4843  │ 3208   │ svg  │
└───────────────┴────────────────┴───────┴────────┴──────┘
┌─────────┬─────────────┬──────────────┬─────────┬───────────┬────────────┐
│ Vibrant │ DarkVibrant │ LightVibrant │ Muted   │ DarkMuted │ LightMuted │
├─────────┼─────────────┼──────────────┼─────────┼───────────┼────────────┤
│ #d08b70 │ #13243b     │ #ecbb8c      │ #637b9c │ #2f3d58   │ #d2bfa5    │
└─────────┴─────────────┴──────────────┴─────────┴───────────┴────────────┘

[Benedikt Rötsch]

Hey ho.

1. You enable debug mode by setting the DEBUG environment variable to sqip*. On Linux and Mac OS you do this via DEBUG=sqip* sqip --input...
2. '/input.jpg' is an absolute path as it starts with /. You either have to ./image.jpg or image.jpg as you did
3. The output is kinda as expected, you should add an output parameter to write the result to a file.

We might consider outputting the resulting svg as string when --output is omitted.

[Thomas Fiala]

Thanks, I've run the debug on the CLI, the output is below with the added output parameter.

1. The problem I'm having is passing the debug environment variable in the function call I have above -- not the CLI -- but rather the NodeJS function. That's where I'm encountering the problem and what I'm trying to use in my application.

I don't have much experience with environment variables and don't know where I'd pass one from within the npm package itself to the function. I've tried process.env.DEBUG in place of sqip but I get an error.

Here's my current function iteration, taken from the demo

import sqip from 'sqip';
import resolve  from 'path';
import primitive from 'sqip-plugin-primitive';
import dataURI from 'sqip-plugin-data-uri';
import svgo from 'sqip-plugin-svgo';

        const file = sqip({
            input: "input.jpg",
            plugins: [
                {
                    name: primitive,
                    options: {
                        numberOfPrimitives: 50,
                        mode: 1
                    }
                },
                svgo,
                dataURI
            ]
        }).then (
            file => console.log(file)
        ).catch(
            error => console.error(error)
        )


And Resulting error:
TypeError: resolver is not a function
    at Object.apiResolver (/Users/user/Downloads/Documents/Github/New TT/user/node_modules/next/dist/next-server/server/api-utils.js:41:9)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async DevServer.handleApiRequest (/Users/user/Downloads/Documents/Github/New TT/user/node_modules/next/dist/next-server/server/next-server.js:382:9)
    at async Object.fn (/Users/user/Downloads/Documents/Github/New TT/user/node_modules/next/dist/next-server/server/next-server.js:297:17)
    at async Router.execute (/Users/user/Downloads/Documents/Github/New TT/user/node_modules/next/dist/next-server/server/router.js:25:32)
    at async DevServer.run (/Users/user/Downloads/Documents/Github/New TT/user/node_modules/next/dist/next-server/server/next-server.js:423:29)
Error: Unable to find any files via input.jpg. Make sure the file exists.

If you are using globbing patterns, the following features are supported:

https://github.com/micromatch/micromatch#matching-features
    at locateFiles (/Users/user/Downloads/Documents/Github/New TT/user/node_modules/sqip/dist/helpers.js:65:11)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async sqip (/Users/user/Downloads/Documents/Github/New TT/user/node_modules/sqip/dist/sqip.js:181:17)

2 . If '/input.jpg' is the absolute path; then I have a relative path 'input.jpg' in my output.

Here's the debug output:

➜  api (feat/placeholder) ✗ DEBUG=sqip* sqip -i 'input.jpg' -o 'output2.svg'
  sqip-cli Found plugins:
  sqip-cli  [ 'primitive', 'blur', 'svgo' ] +0ms
  sqip Loading sqip-plugin-primitive +0ms
  sqip Loading sqip-plugin-blur +0ms
  sqip Loading sqip-plugin-svgo +0ms
  sqip-cli Generated CLI options:
  sqip-cli  [
  { name: 'help', alias: 'h', description: 'Show help' },
  { name: 'version', description: 'Show version number' },
  {
    name: 'plugins',
    alias: 'p',
    type: [Function: String],
    multiple: true,
    description: 'One or more plugins. E.g. "-p primitive blur"'
  },
  {
    name: 'input',
    alias: 'i',
    type: [Function: String],
    required: true
  },
  {
    name: 'output',
    alias: 'o',
    type: [Function: String],
    description: 'Save the resulting SVG to a file. The svg result will be returned by default.'
  },
  {
    name: 'width',
    alias: 'w',
    type: [Function: Number],
    default: 300,
    description: 'Width of the resulting file. Negative values and 0 will fall back to original image width.'
  },
  {
    name: 'silent',
    type: [Function: Boolean],
    default: false,
    description: 'Supress all output'
  },
  {
    name: 'parseable-output',
    type: [Function: Boolean],
    default: false,
    description: 'Ensure the output is parseable. Will suppress the preview images and the table borders.'
  },
  {
    name: 'primitive-numberOfPrimitives',
    alias: 'n',
    type: [Function: Number],
    description: 'The number of primitive shapes to use to build the SQIP SVG',
    defaultValue: 8
  },
  {
    name: 'primitive-mode',
    alias: 'm',
    type: [Function: Number],
    description: 'The style of primitives to use: \n' +
      '0=combo, 1=triangle, 2=rect, 3=ellipse, 4=circle, 5=rotatedrect, 6=beziers, 7=rotatedellipse, 8=polygon',
    defaultValue: 0
  },
  {
    name: 'primitive-rep',
    type: [Function: Number],
    description: 'add N extra shapes each iteration with reduced search (mostly good for beziers',
    defaultValue: 0
  },
  {
    name: 'primitive-alpha',
    type: [Function: Number],
    description: 'color alpha (use 0 to let the algorithm choose alpha for each shape)',
    defaultValue: 128
  },
  {
    name: 'primitive-background',
    type: [Function: String],
    description: 'starting background color (hex)',
    defaultValue: 'DarkMuted'
  },
  {
    name: 'primitive-cores',
    type: [Function: Number],
    description: 'number of parallel workers (default uses all cores)',
    defaultValue: 0
  },
  {
    name: 'blur-blur',
    alias: 'b',
    type: [Function: Number],
    description: 'Set the stdDeviation value for the GaussianBlur SVG filter. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur',
    defaultValue: 12
  }
] +242ms
  sqip-cli Parsed CLI args:
  sqip-cli  {
  'primitive-numberOfPrimitives': 8,
  'primitive-mode': 0,
  'primitive-rep': 0,
  'primitive-alpha': 128,
  'primitive-background': 'DarkMuted',
  'primitive-cores': 0,
  'blur-blur': 12,
  input: 'input.jpg',
  output: 'output2.svg'
} +2ms
  sqip-cli Final sqip options: {
  input: 'input.jpg',
  output: 'output2.svg',
  width: undefined,
  plugins: [
    { name: 'primitive', options: [Object] },
    { name: 'blur', options: [Object] },
    { name: 'svgo', options: {} }
  ],
  silent: undefined,
  parseableOutput: undefined
} +0ms
  sqip input input.jpg is a file. Skip file search. +0ms
  sqip Found files: +244ms
  sqip [ 'input.jpg' ] +0ms
  sqip check file input.jpg +0ms
Processing: input.jpg
  sqip Loading sqip-plugin-primitive +2s
  sqip Loading sqip-plugin-blur +0ms
  sqip Loading sqip-plugin-svgo +0ms
  sqip Construct primitive +0ms
  sqip Apply primitive +1ms
  sqip-plugin-primitive Trying to locate primitive binary at /Users/user/.nvm/versions/node/v12.13.1/lib/node_modules/sqip-cli/node_modules/sqip-plugin-primitive/vendor/primitive-darwin-x64 +0ms
  sqip Construct blur +4s
  sqip Apply blur +0ms
  sqip Construct svgo +13ms
  sqip Apply svgo +1ms
  sqip Processed input.jpg +113ms
  sqip Writing output2.svg +0ms
Stored at: output2.svg
┌───────────────┬────────────────┬───────┬────────┬──────┐
│ originalWidth │ originalHeight │ width │ height │ type │
├───────────────┼────────────────┼───────┼────────┼──────┤
│ 4843          │ 3208           │ 4843  │ 3208   │ svg  │
└───────────────┴────────────────┴───────┴────────┴──────┘
┌─────────┬─────────────┬──────────────┬─────────┬───────────┬────────────┐
│ Vibrant │ DarkVibrant │ LightVibrant │ Muted   │ DarkMuted │ LightMuted │
├─────────┼─────────────┼──────────────┼─────────┼───────────┼────────────┤
│ #d08b70 │ #13243b     │ #ecbb8c      │ #637b9c │ #2f3d58   │ #d2bfa5    │
└─────────┴─────────────┴──────────────┴─────────┴───────────┴────────────┘
  sqip Finished +2s

[Thomas Fiala]

Hey @axe312ger

Thank you for adding the example of how to debug to the readme, I've followed your instructions and found I needed to pass the absolute path through my entire hard drive (not just from my project folder).

The issue has been resolved and It's working wonderfully. I really like the idea of this project and hope to use it in any projects I may have in the future.

Thanks again. Closing this ticket.