search

fansenze / snowpack-plugin-inliner

A plugin for snowpack which transforms files into base64 URIs.
MIT License
1 stars 2 forks source link

Inlines SVG files, but fails when it finds png/jpg import. "no such file or directory, copyfile" #5

Closed JoeMethven closed 2 years ago

JoeMethven commented 3 years ago

Could you please investigate why png/jpg files are failing to be inlined, I just get this error:

no such file or directory, copyfile

I have not configured the plugin in any way, just defined the plugin as a string in the array.

Using snowpack-plugin-inliner

[snowpack-plugin-inliner] Inlined File: /Users/{USER}/Projects/{PROJECT}/src/assets/passport-tick.svg
[snowpack-plugin-inliner] Inlined File: /Users/{USER}/Projects/{PROJECT}/src/assets/passport-times.svg
[snowpack-plugin-inliner] Inlined File: /Users/{USER}/Projects/{PROJECT}/src/assets/passport-verification.svg
(node:81033) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, copyfile '/Users/{USER}/Projects/discover-v2/src/assets/play-icon.png' -> '/Users/{USER}/Projects/{PROJECT}/dist/esm/src/assets/play-icon.png'
(node:81033) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 105)
(node:81033) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, copyfile '/Users/{USER}/Projects/{PROJECT}/src/assets/touch-indicator.png' -> '/Users/{USER}/Projects/discover-v2/dist/esm/src/assets/touch-indicator.png'
(node:81033) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 106)
[snowpack-plugin-inliner] Inlined File: /Users/{USER}/Projects/{PROJECT}/src/assets/flags/abkhazia.svg
[snowpack-plugin-inliner] Inlined File: /Users/{USER}/Projects/{PROJECT}/src/assets/flags/afghanistan.svg
[snowpack-plugin-inliner] Inlined File: /Users/{USER}/Projects/{PROJECT}/src/assets/flags/aland-islands.svg

Using snowpack-plugin-url-loader

[11:31:31] [snowpack] ! building files...
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/chat-box.svg
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/check-circle.svg
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/iqos-logo-dark.png
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/iqos-logo-new.svg
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/logo-black-vertical.svg
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/logo-black.svg
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/logo-white-turqouise.svg
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/logo-white.svg
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/mini-app-brochure-step-5.svg
[Url-Loader] Inlined File:  /Users/{USER}/Projects/{PROJECT}/src/assets/mini-app-brochure-with-check.svg
[11:31:35] [snowpack] Build Result Error: There was a problem with a file build result.
[11:31:35] [snowpack] The "path" argument must be of type string. Received undefined
[11:31:35] [snowpack] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:121:11)
    at Object.join (path.js:1039:7)
    at Object.load (/Users/{USER}/Projects/{PROJECT}/node_modules/snowpack-plugin-url-loader/plugin.js:113:35)
    at async runPipelineLoadStep (/Users/{USER}/Projects/{PROJECT}/node_modules/snowpack/lib/cjs/build/build-pipeline.js:40:32)
    at async Object.buildFile (/Users/{USER}/Projects/discover-v2/node_modules/snowpack/lib/cjs/build/build-pipeline.js:240:24)
    at async /Users/{USER}/Projects/{PROJECT}/node_modules/snowpack/lib/cjs/build/file-builder.js:204:37
    at async FileBuilder.build (/Users/{USER}/Projects/{PROJECT}/node_modules/snowpack/lib/cjs/build/file-builder.js:216:32)
    at async Object.loadUrl (/Users/{USER}/Projects/{PROJECT}/node_modules/snowpack/lib/cjs/commands/dev.js:626:17)
    at async flushFileQueue (/Users/{USER}/Projects/{PROJECT}/node_modules/snowpack/lib/cjs/build/process.js:191:24)
    at async Object.buildFiles (/Users/{USER}/Projects/{PROJECT}/node_modules/snowpack/lib/cjs/build/process.js:226:5)
    at async build (/Users/{USER}/Projects/d{PROJECT}/node_modules/snowpack/lib/cjs/commands/build.js:11:5)
    at async Object.command (/Users/{USER}/Projects/{PROJECT}/node_modules/snowpack/lib/cjs/commands/build.js:35:9)
    at async cli (/Users/{USER}/Projects/{PROJECT}/node_modules/snowpack/lib/cjs/index.js:174:9)

snowpack.config

export default {
    mount: {
        public: { url: '/', static: true, resolve: false },
        src: { url: '/' },
    },
    env: {
        PACKAGE: true,
        KIOSK: true,
    },
    plugins: [
        [
            '@snowpack/plugin-babel',
            {
                presets: [
                    ['@babel/env', { modules: false }],
                    '@babel/react',
                    '@babel/typescript',
                    [
                        '@emotion/babel-preset-css-prop',
                        {
                            autoLabel: 'always',
                            sourceMap: true,
                            labelFormat: 'discover-[local]',
                        },
                    ],
                ],
                plugins: [
                    '@babel/transform-runtime',
                    '@babel/proposal-class-properties',
                    '@babel/proposal-object-rest-spread',
                ],
            },
        ],
        '@snowpack/plugin-react-refresh',
        '@snowpack/plugin-dotenv',
        'snowpack-plugin-inliner',
        [
            '@snowpack/plugin-typescript',
            {
                /* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */
                ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : { tsc: 'tsc' }),
            },
        ],
        'tsconfig-paths-snowpack-plugin',
    ],
    packageOptions: {
        polyfillNode: true,
        external:
            process.env.NODE_ENV !== 'development'
                ? [
                        'react',
                        'react-dom',
                        // '@emotion/react',
                        // '@material-ui/core',
                        // '@material-ui/icons',
                        // '@material-ui/lab',
                        // '@material-ui/styles',
                  ]
                : [],
    },
    buildOptions: {
        out: './dist/esm',
    },
};
JoeMethven commented 3 years ago

Fixed it, looking at the source code:

plugin.js

const defaultLimit = 10240;
const defaultEncoding = 'base64';

async function encode(file, name, { limit = defaultLimit, bufferEncoding = defaultEncoding }) {

The plugin was set to a 10KB limit, but this was not documented anywhere. I recommend documenting this and improving the error if limit is exceeded. It might be better to have no limit by default? (like webpack url-loader).

fansenze commented 2 years ago
  1. the doc is in README
  2. i think should not error if limit is exceeded whatever the limit is defined
  3. i agree with u that not limit is better by default, but now i recommend to defined options.limit