cyrilwanner / next-optimized-images Goto Github PK

View Code? Open in Web Editor NEW

2.2K 2.2K 95.0 7.9 MB

🌅 next-optimized-images automatically optimizes images used in next.js projects (jpeg, png, svg, webp and gif).

License: MIT License

JavaScript 100.00%

image nextjs optimization plugin react

next-optimized-images's People

Contributors

Stargazers

Watchers

Forkers

formatlos nori-dot-eco fdiskas stramel eleith micahbrich tresko fandy christinecha redknife anomen omarkhatibco curi0xus angelmmiguel aneagoie artyomresh andysaman imedadel lucas-varela j-env jpmaga thedekerone chjunsama aantthony hashicorp gannounimohamed tridungle emanueleperuffo aszx87410 markstreich bjonamu pomelo-chuan mumer92 dalanmiller dazuaz mrroll henry1417 btford avaleriani gayratv jithinraj spekbin bageshdubey ammuench guillaumelamanda medcloudbr brzkv enpclark boro23-wq tymick osdiab kpfromer wv91364210zhuozh willviles vinayasathyanarayana subratamal andreisergiu98 sidletski togoog shinvey shreyas-jadhav gzhel mhassa98 dalimil devanshj keadex jbaczuk sambacha alex-andres kimamov ed-iv immolare pholst chrishannaby synthetixio jorgev259 mnxj expiante heruns jokalli2 jperler j0pgrm frandisag ricardotech sunnextt wangyx6226 stevelaitvt

next-optimized-images's Issues

Error on require image

Hi :)

After install your module, i try to require an png image :

const src = require('./glouman-company-homepage.png');

But i've an error :

 error  in ./src/client/components/HomeBanner/glouman-company-homepage.png

Module build failed (from /home/project-name/node_modules/url-loader/index.js):
TypeError: Cannot read property 'context' of undefined
    at Object.loader (/home/project-name/node_modules/file-loader/dist/index.js:34:49)
    at Object.module.exports (/home/project-name/node_modules/url-loader/index.js:37:25)

I've been create next.config.js file on same path level pages.

I use latest [email protected]. Anyone have idea ?

Cleanup the plugin

The plugin grew quickly which is very nice but it should now be cleaned up/refactored a bit so it still is easy to understand, to maintain and to add more functionality.

Split the index.js file into multiple smaller files, maybe one per loader and their options
Use babel to use modern js features while still supporting node 6 and to make the code in svg-runtime-generator.js a bit less verbose (use jsx and don't write React.createElement code)
Add tests for the newly added functionalities (the new config options, svg sprites and the runtime generator)
Add contributing guidelines, issue & pr templates
Add code linting

Some feature improvements:

if outputPath is specified and relative, make sure it uses the same path on the server & client
svg sprites contain all sprites of all pages in the memory of the server, we should only include the sprites on the current page
provide a component for the webp fallback

I use next-optimized-images v2 with next.js v7.0.2 and I also install imagemin-mozjpeg imagemin-optipng imagemin-svgo as README said. But my svg (4kb) or png (27kb) image doesn't be inlined, It's wired. Here's the detail:

HTML tag:

<Link route="/">
  <a>
    <img
      className="main-header__logo"
      src="../../static/images/beats.png"
      alt="J:COM logo"
    />
  </a>
</Link>

next config:

const webpack = require('webpack');
const withPlugins = require('next-compose-plugins');
const sass = require('@zeit/next-sass');
const bundleAnalyzer = require('@zeit/next-bundle-analyzer');
const optimizedImages = require('next-optimized-images');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

// Next.js configuration
const nextConfig = {
  webpack(config) {
    const { plugins } = config;

    plugins.push(
      new webpack.EnvironmentPlugin({
        NODE_ENV: process.env.NODE_ENV || 'development',
        INSTANCE_ENV: process.env.INSTANCE_ENV || 'development'
      }),
      new LodashModuleReplacementPlugin({ shorthands: true, collections: true })
    );

    return config;
  }
};

module.exports = withPlugins(
  [
    sass,
    [
      bundleAnalyzer,
      {
        analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
        analyzeBrowser: ['client', 'both'].includes(process.env.BUNDLE_ANALYZE),
        bundleAnalyzerConfig: {
          server: {
            analyzerMode: 'static',
            reportFilename: '../../bundles/server.html'
          },
          browser: {
            analyzerMode: 'static',
            reportFilename: '../bundles/client.html'
          }
        }
      }
    ],
    [optimizedImages, { optimizeImagesInDev: true }]
  ],
  nextConfig
);

package.json:

{
  "name": "app",
  "version": "1.0.0",
  "description": "app",
  "main": "app/index.js",
  "keywords": [],
  "scripts": {
    "dev": "nodemon app/server --exec babel-node",
    "build": "next build app",
    "start": "NODE_ENV=production node app",
    "start:pre-test": "yarn install && yarn build && rimraf node_modules && yarn install --prod && yarn start",
    "test": "jest --coverage",
    "test:watch": "yarn test --watch",
    "test:update-snapshot": "yarn test -u",
    "remote-test": "node tests/startRemoteRunner.js",
    "lint": "npm-run-all lint:js lint:style",
    "lint:js": "eslint --fix .",
    "lint:style": "stylelint --fix \"**/*.css, **/*.scss\"",
    "clean": "npm-run-all clean:build clean:test clean:analyze",
    "clean:build": "rimraf app/.next",
    "clean:test": "rimraf coverage",
    "clean:analyze": "rimraf app/bundles",
    "analyze": "BUNDLE_ANALYZE=both yarn build",
    "analyze:client": "BUNDLE_ANALYZE=client yarn build",
    "analyze:server": "BUNDLE_ANALYZE=server yarn build",
    "integration": "testcafe chrome tests/feature --hostname localhost",
    "jenkins-integration": "testcafe ${BROWSER} tests/feature --hostname localhost --reporter spec,xunit:reports/integration-report-${BROWSER}.xml"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn test"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ],
    "*.css": "stylelint",
    "*.scss": "stylelint --syntax=scss",
    "*.{json,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "next/babel"
    ],
    "plugins": [
      "lodash",
      "@babel/plugin-proposal-export-default-from",
      "@babel/plugin-proposal-export-namespace-from"
    ],
    "env": {
      "production": {
        "plugins": [
          "transform-remove-console",
          "transform-react-remove-prop-types"
        ]
      }
    }
  },
  "eslintConfig": {
    "parser": "babel-eslint",
    "extends": [
      "plugin:lodash/recommended",
      "airbnb",
      "prettier",
      "prettier/react"
    ],
    "plugins": [
      "lodash",
      "react",
      "prettier"
    ],
    "env": {
      "browser": true,
      "node": true,
      "es6": true,
      "jest": true
    },
    "rules": {
      "global-require": "off",
      "camelcase": "off",
      "no-console": "off",
      "no-multi-assign": "off",
      "no-underscore-dangle": "off",
      "no-param-reassign": "off",
      "no-script-url": "off",
      "react/no-array-index-key": "off",
      "react/forbid-prop-types": "off",
      "react/no-danger": "off",
      "react/jsx-filename-extension": [
        "error",
        {
          "extensions": [
            ".js"
          ]
        }
      ],
      "jsx-a11y/anchor-is-valid": "off",
      "jsx-a11y/html-has-lang": "off",
      "import/named": "off",
      "import/no-dynamic-require": "off",
      "import/no-extraneous-dependencies": "off",
      "lodash/prefer-includes": "off",
      "lodash/prefer-lodash-method": "off",
      "lodash/prefer-lodash-typecheck": "off",
      "lodash/prefer-constant": "off",
      "lodash/import-scope": "off",
      "lodash/prefer-noop": "off",
      "prettier/prettier": [
        "error",
        {
          "singleQuote": true
        }
      ]
    }
  },
  "eslintIgnore": [
    "app/.next",
    "app/**/__snapshots__",
    "coverage"
  ],
  "stylelint": {
    "extends": [
      "stylelint-config-standard",
      "stylelint-config-recommended-scss",
      "stylelint-config-prettier"
    ],
    "plugins": [
      "stylelint-scss"
    ],
    "rules": {
      "string-quotes": "single"
    }
  },
  "nodemonConfig": {
    "watch": [
      "app/server",
      "app/langs"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/jest/setup.js",
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file.js",
      "\\.(css|scss)$": "<rootDir>/__mocks__/style.js"
    },
    "collectCoverageFrom": [
      "app/components/**/*.js",
      "!app/components/index.js",
      "!app/components/Head/index.js",
      "app/pages/*.js",
      "!app/pages/_document.js",
      "!app/pages/_app.js",
      "!app/pages/_error.js",
      "!app/pages/incapable.js",
      "!app/pages/megaPack.js"
    ]
  },
  "dependencies": {
    "@babel/plugin-proposal-export-default-from": "7.2.0",
    "@babel/plugin-proposal-export-namespace-from": "7.2.0",
    "@babel/register": "7.0.0",
    "@zeit/next-bundle-analyzer": "^0.1.2",
    "@zeit/next-sass": "^1.0.1",
    "autoprefixer": "^9.4.2",
    "axios": "^0.18.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "classnames": "^2.2.6",
    "compression": "^1.7.3",
    "cookie-parser": "^1.4.3",
    "express": "^4.16.4",
    "glob": "^7.1.3",
    "helmet": "^3.15.0",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^6.0.0",
    "imagemin-svgo": "^7.0.0",
    "intl": "^1.2.5",
    "js-cookie": "^2.2.0",
    "kks-react-components": "git+ssh://[email protected]:kkstream/kks-react-components.git#v0.1.13",
    "lodash": "^4.17.11",
    "lodash-webpack-plugin": "^0.11.5",
    "moment": "^2.22.2",
    "negotiator": "^0.6.1",
    "next": "^7.0.2",
    "next-compose-plugins": "^2.1.1",
    "next-optimized-images": "^2.0.1",
    "next-redux-wrapper": "^2.0.0",
    "next-routes": "^1.4.2",
    "prop-types": "^15.6.2",
    "query-string": "^6.2.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-intl": "^2.7.2",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "ua-parser-js": "^0.7.19",
    "uuid": "^3.3.2",
    "yapi-adapter-ui-react": "git+ssh://[email protected]/kkstream/yapi-adapter-ui-react.git#1.0.14"
  },
  "devDependencies": {
    "@babel/node": "^7.2.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "chai": "^4.2.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "eslint": "^5.8.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-lodash": "^5.0.0",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-react": "^7.11.0",
    "husky": "^1.2.0",
    "jest": "^23.6.0",
    "lint-staged": "^8.1.0",
    "nock": "^10.0.4",
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.8",
    "normalize.css": "^8.0.1",
    "npm-run-all": "^4.1.5",
    "postcss-easy-import": "^3.0.0",
    "postcss-url": "^8.0.0",
    "prettier": "^1.15.3",
    "react-test-renderer": "^16.5.2",
    "rimraf": "^2.6.2",
    "stylelint": "^9.9.0",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-scss": "^3.4.0",
    "testcafe": "^0.23.2",
    "testcafe-reporter-xunit": "^2.1.0"
  }
}

Compatible with "next export"?

I wonder if this plugin applies when exporting using next export command, which generates a static build. I believe it should since all the operations are doing at the webpack level (AFAIK), but I could be wrong.

Resizing images

Would you consider resizing images to be a part of the design goals of this module? It would be very convenient to keep original images in the project directory and in the importing code specify require('./images/my-photo.jpg?resize=1000px')}. From my point of view, resizing images down is a similar semantically operation as minifying with mozjpeg. What do you think?

responsive-loader with sharp error

I get this error when I use the responsive-loader with sharp, but it works well with the jimp module.

Error: Cannot find module '...node_modules\responsive-loader\lib\index.js/sharp'

-Windows OS

Can we optimise image url in scss file without cssModules?

I am not familiar with cssModules, Why is it necessary to have cssModules to bundle the image url in css file?

Deployment error with now 2.0

Hi,

I'm getting the following error for all my images when running the now command (dev mode and prod builds are fine).
In my TypeScript code I include the images via require("../static/icons/logo.svg?include") or similar.

ModuleNotFoundError: Module not found: Error: Can't resolve '../static/icons/logo.svg?include' in '/tmp/48d87981/components'
    at factory.create (/tmp/48d87981/node_modules/webpack/lib/Compilation.js:821:10)
    at factory (/tmp/48d87981/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/tmp/48d87981/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/tmp/48d87981/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /tmp/48d87981/node_modules/neo-async/async.js:2825:7
    at /tmp/48d87981/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/tmp/48d87981/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/tmp/48d87981/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/tmp/48d87981/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/tmp/48d87981/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/tmp/48d87981/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/tmp/48d87981/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/tmp/48d87981/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/tmp/48d87981/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/tmp/48d87981/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/tmp/48d87981/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
resolve '../static/icons/logo.svg?include' in '/tmp/48d87981/components'
  using description file: /tmp/48d87981/package.json (relative path: ./components)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /tmp/48d87981/package.json (relative path: ./static/icons/logo.svg)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/48d87981/static/icons/logo.svg doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/48d87981/static/icons/logo.svg.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/48d87981/static/icons/logo.svg.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/48d87981/static/icons/logo.svg.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/48d87981/static/icons/logo.svg.jsx doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/48d87981/static/icons/logo.svg.json doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/48d87981/static/icons/logo.svg.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/48d87981/static/icons/logo.svg.tsx doesn't exist
      as directory
        /tmp/48d87981/static/icons/logo.svg doesn't exist

(next 8 canary, next-optimized-images 2.3.3, now 2.0)

Thanks in advance

Unable to get query params to work with Jest

Hello, I'm having trouble getting imports w/ query params to work in a Jest environment. I set up an example project here:

https://github.com/joebanks10/jest-next-optimized-images

Is there something I need to add to get it to work?

Unable to configure imagesName and use webp

👋 I'm using next-optimized-images with the following config:

{ imagesName: "[name].[ext]?h=[hash]" }

All works well and I'm getting images paths like http://localhost:3000/_next/static/images/something.jpg?h=aacf4dd62f3618484aa2e017041bb9f2. Having hash as a GET param is allowing users to avoid 404 pages if the images change and the app is rebuilt. For instance, if google indexes logo.jpg?h=abc and then the URL becomes logo.jpg?h=def, the logo in the search results is still a valid image. The only thing I have to worry about with this config is the uniqueness of paths, but that's a different story.

After trying webp-loader with ?webp / <picture> / <source> / <image> I've noticed an odd glitch.

Instead of getting something.jpg?h=xyz and something.webp?h=zyx for require("./something.jpg") / require("./something.jpg?webp"), the output paths are something.jpg?h=xyz and something.jpg?h=zyx.webp.

Unsetting imagesName in the config solves the issue by turning paths into something-xyz.jpg and something-zyx.webp, but that's not quite what I'm after.

What makes the URL be something.jpg?h=zyx.webp and not something.webp?h=zyx? How to overcome this?

Failed to compile --> svg?sprite

Hi Cyril,

thanks for the great package.
I followed the steps to import svgs and use them as components as described.
But i get the following error:

I expected that i can import my svg file from any location and use it as a react component.

Below you can find my setup. I used yarn for everything instead of npm.

For Example:

import SVGLogo from "components/atoms/Icon/svg/icon.svg?sprite";
const Logo = props => <SVGLogo {...props} />;

My package.json:

"next-compose-plugins": "^2.1.1",
"next-optimized-images": "^2.4.0",
"imagemin-svgo": "^7.0.0",
"svg-sprite-loader": "^4.1.3"

My next.config.js:

const path = require("path");
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");

module.exports = withPlugins([
  optimizedImages,
  {
    webpack(config) {
      config.resolve.alias["components"] = path.join(
        __dirname,
        "src/components"
      );
      config.resolve.alias["containers"] = path.join(
        __dirname,
        "src/containers"
      );
      config.resolve.alias["helpers"] = path.join(__dirname, "src/helpers");
      config.resolve.alias["api"] = path.join(__dirname, "src/api");
      config.resolve.alias["store"] = path.join(__dirname, "src/store");
      config.resolve.alias["routes"] = path.join(__dirname, "src/routes");
      config.resolve.alias["config"] = path.join(__dirname, "src/config");
      config.resolve.alias["theme"] = path.join(__dirname, "src/theme");
      return config;
    }
  }
]);

The svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>checkmark_icon_yellow_16x16</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="checkmark_icon_yellow_16x16" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M4.42713499,14 C4.58635551,14 5.11377272,12.9303514 5.65183073,12.0857392 C6.18988874,11.241127 6.36004148,11.0812998 7.45024032,9.68415037 C8.54043915,8.2870009 9.91312561,6.86509848 10.5727949,6.15566296 C11.2324641,5.44622744 11.9442662,4.6606632 12.777217,3.90199133 C13.6101677,3.14331945 14.4401795,2.32140257 14.7217339,2.08679596 C15.0032882,1.85218935 15.7681535,1.25794974 15.9805153,1.0520364 C16.192877,0.846123065 14.6028586,1.31369365 14.4401795,1.37412704 C14.2775005,1.43456043 13.672807,1.66763038 13.0151744,2.08679596 C12.3575418,2.50596154 12.0047149,2.78625982 11.1562836,3.45057535 C10.3078524,4.11489087 9.38002723,4.97141877 8.21828419,6.15566296 C7.05654115,7.33990715 6.12186959,8.27217794 5.51055283,9.01063837 C4.89923608,9.7490988 4.61834264,10.2797941 4.42713499,10.2797941 C4.23592733,10.2797941 3.59268814,9.32926711 3.25545504,9.01063837 C2.91822194,8.69200964 2.4414883,8.35566069 1.80824018,8.27217794 C1.43656573,8.22317912 0.84577424,8.2623438 0.0358657135,8.38967198 L0.0358627677,8.38965324 C0.0132618708,8.39320639 -0.00217937452,8.41440844 0.00137378095,8.43700934 C0.00436327546,8.4560249 0.0200574201,8.47047572 0.0392545824,8.47188914 C0.880603107,8.87432406 1.22572926,9.14536677 1.42022458,9.31046185 C1.71196755,9.55810447 2.09175193,10.009021 2.40165647,10.448581 C2.71156101,10.888141 2.97486489,11.2928475 3.41587546,12.1752739 C3.85688603,13.0577003 4.26791446,14 4.42713499,14 Z" id="Path-179" fill="#000000"></path>
    </g>
</svg>

I also adjusted the _document.js and added:

const spriteContent = sprite.stringify();
...
return {
        ...initialProps,
        spriteContent,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
...
<div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />

Can't import directly from absolute `static` path.

In my app I pass routes to image files to have them displayed in many different components. How can I get next-optimized-routes to work with absolute routes? The documentation mentions only a relative import: ./images/img.jpg.

This is an import that works fine with regular next.js:

<img src="/static/img/logo.png" />

next-optimized-images route that also works:

<img src={require("../../static/img/logo.png")} />

next-optomized-images that doesn't work but should:

<img src={require("/static/img/logo.png")} />

Error message:

./src/components/Component1.js
Module not found: Can't resolve '/static/img/logo.png' in '/Users/???/Projects/react-projects/???/???/src/components'

img-loader as peer dependency

Hi there,

When I use a a custom webpack config with Next.js I need to also img-loader for this plugin to work. This would mean that in node_modules there is img-load at the root and also inside node_modules of next-optimized-images.

It feels like having img-loader as a peer dependency of next-optimized makes sense?

Add `?original` query param

If this query param is specified, a single image should not get optimized.

Plugin crashing docker build with node-alpine image

While trying to create a docker image taking node-alpine 8.11.0 as base image, the install steps of the deps of this plugin are crashing the build process. Here is relevant portion of build log:

[email protected] postinstall /frontend/node_modules/cwebp-bin

node lib/install.js

⚠ spawn /frontend/node_modules/cwebp-bin/vendor/cwebp ENOENT
⚠ cwebp pre-build test failed
ℹ compiling from source
✖ Error: ./configure --disable-shared --prefix="/frontend/node_modules/cwebp-bin/vendor" --bindir="/frontend/node_modules/cwebp-bin/vendor" && make && make install
Command failed: ./configure --disable-shared --prefix="/frontend/node_modules/cwebp-bin/vendor" --bindir="/frontend/node_modules/cwebp-bin/vendor"
configure: error: in /frontend/node_modules/cwebp-bin/1781a0ab-70da-4226-aea4-05978656b745': configure: error: no acceptable C compiler found in $PATH See config.log' for more details

at ChildProcess.exithandler (child_process.js:275:12)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Socket.stream.socket.on (internal/child_process.js:346:11)
at emitOne (events.js:116:13)
at Socket.emit (events.js:211:7)
at Pipe._handle.close [as _onclose] (net.js:567:12)

[email protected] postinstall /frontend/node_modules/gifsicle
node lib/install.js

⚠ spawn /frontend/node_modules/gifsicle/vendor/gifsicle ENOENT
⚠ gifsicle pre-build test failed
ℹ compiling from source
✖ Error: autoreconf -ivf && ./configure --disable-gifview --disable-gifdiff --prefix="/frontend/node_modules/gifsicle/vendor" --bindir="/frontend/node_modules/gifsicle/vendor" &&
make install
Command failed: autoreconf -ivf
/bin/sh: autoreconf: not found

at ChildProcess.exithandler (child_process.js:275:12)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Socket.stream.socket.on (internal/child_process.js:346:11)
at emitOne (events.js:116:13)
at Socket.emit (events.js:211:7)
at Pipe._handle.close [as _onclose] (net.js:567:12)

[email protected] postinstall /frontend/node_modules/mozjpeg
node lib/install.js

⚠ spawn /frontend/node_modules/mozjpeg/vendor/cjpeg ENOENT
⚠ mozjpeg pre-build test failed
ℹ compiling from source
✖ Error: autoreconf -fiv && ./configure --disable-shared --disable-dependency-tracking --with-jpeg8 --prefix="/frontend/node_modules/mozjpeg/vendor" --bindir="/frontend/node_modules/mozjpeg/vendor" --libdir="/frontend/node_modules/mozjpeg/vendor" && make -j2 && make install -j2
Command failed: autoreconf -fiv
/bin/sh: autoreconf: not found

at ChildProcess.exithandler (child_process.js:275:12)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Socket.stream.socket.on (internal/child_process.js:346:11)
at emitOne (events.js:116:13)
at Socket.emit (events.js:211:7)
at Pipe._handle.close [as _onclose] (net.js:567:12)

[email protected] postinstall /frontend/node_modules/optipng-bin
node lib/install.js

⚠ spawn /frontend/node_modules/optipng-bin/vendor/optipng ENOENT
⚠ optipng pre-build test failed
ℹ compiling from source
✖ Error: ./configure --with-system-zlib --prefix="/frontend/node_modules/optipng-bin/vendor" --bindir="/frontend/node_modules/optipng-bin/vendor" && make install
Command failed: ./configure --with-system-zlib --prefix="/frontend/node_modules/optipng-bin/vendor" --bindir="/frontend/node_modules/optipng-bin/vendor"

at ChildProcess.exithandler (child_process.js:275:12)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

[email protected] postinstall /frontend/node_modules/pngquant-bin
node lib/install.js

⚠ spawn /frontend/node_modules/pngquant-bin/vendor/pngquant ENOENT
⚠ pngquant pre-build test failed
ℹ compiling from source
✔ pngquant pre-build test passed successfully
✖ Error: pngquant failed to build, make sure that libpng-dev is installed
at Promise.all.then.arr (/frontend/node_modules/pngquant-bin/node_modules/bin-build/node_modules/execa/index.js:231:11)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node lib/install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-04-02T11_13_47_451Z-debug.log

Are there any clean ways to skip pre and post build steps of those deps in the plugin itself to avoid any issues in containerized environment?

NextJS 7+ `/_next/static/images` to `/_next/static/{buildid}/images`

How does this plugin work with NextJS 7+? in next.js 7+ the build output was changed from from /_next/static/images to /_next/static/{buildid}/images

Problem with SVG sprite in 2.0

When importing my SVG as sprites like this:

import React from 'react';
import MyIcon from './icons/my-icon.svg?sprite';

export default () => (
  <div>
    my page..
    <MyIcon />
  </div>
);

i run into the following error:

 ERROR  Failed to compile with 1 errors                                                                     17:01:33

 error  in ./assets/icons/search.svg?sprite

Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):
InvalidSvg: svg-sprite-loader exception.

module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjMgKDY3Mjk3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uLXNlYXJjaDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJpY29uLXNlYXJjaCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTE1LjMxMzQ2MTUsMTQuNDQzMTUzOCBDMTYuMjIyOTIzMSwxMy4zMzk5MjMxIDE2Ljc2OTIzMDgsMTEuOTI2MDc2OSAxNi43NjkyMzA4LDEwLjM4NDYxNTQgQzE2Ljc2OTIzMDgsNi44NTg1IDEzLjkxMDczMDgsNCAxMC4zODQ2MTU0LDQgQzYuODU4NSw0IDQsNi44NTg1IDQsMTAuMzg0NjE1NCBDNCwxMy45MTA3MzA4IDYuODU4NSwxNi43NjkyMzA4IDEwLjM4NDYxNTQsMTYuNzY5MjMwOCBDMTEuOTI2MDc2OSwxNi43NjkyMzA4IDEzLjMzOTg4NDYsMTYuMjIyOTIzMSAxNC40NDMxNTM4LDE1LjMxMzQ2MTUgTDE5LjEwMzMwNzcsMTkuOTczNjE1NCBMMTkuOTczNjE1NCwxOS4xMDMzNDYyIEwxNS4zMTM0NjE1LDE0LjQ0MzE1MzggWiBNNS4yMzA3NjkyMywxMC4zODQ2MTU0IEM1LjIzMDc2OTIzLDkuMDA3OTYxNTQgNS43NjY4NDYxNSw3LjcxMzczMDc3IDYuNzQwMzA3NjksNi43NDAzMDc2OSBDNy43MTM3MzA3Nyw1Ljc2Njg4NDYyIDkuMDA3OTYxNTQsNS4yMzA3NjkyMyAxMC4zODQ2MTU0LDUuMjMwNzY5MjMgQzExLjc2MTI2OTIsNS4yMzA3NjkyMyAxMy4wNTU1LDUuNzY2ODg0NjIgMTQuMDI4OTIzMSw2Ljc0MDMwNzY5IEMxNS4wMDIzNDYyLDcuNzEzNzMwNzcgMTUuNTM4NDYxNSw5LjAwNzk2MTU0IDE1LjUzODQ2MTUsMTAuMzg0NjE1NCBDMTUuNTM4NDYxNSwxMS43NjEyNjkyIDE1LjAwMjM0NjIsMTMuMDU1NSAxNC4wMjg5MjMxLDE0LjAyODkyMzEgQzEzLjA1NTUsMTUuMDAyMzg0NiAxMS43NjEyNjkyLDE1LjUzODQ2MTUgMTAuMzg0NjE1NCwxNS41Mzg0NjE1IEM5LjAwNzk2MTU0LDE1LjUzODQ2MTUgNy43MTM3MzA3NywxNS4wMDIzODQ2IDYuNzQwMzA3NjksMTQuMDI4OTIzMSBDNS43NjY4NDYxNSwxMy4wNTU1IDUuMjMwNzY5MjMsMTEuNzYxMjY5MiA1LjIzMDc2OTIzLDEwLjM4NDYxNTQgWiIgaWQ9IkltcG9ydGVkLUxheWVycyIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4="
    at Object.loader (/Users/tillhinrichs/Documents/_DEVELOPER/HTML/CleanCleanShop/cc-next2/node_modules/svg-sprite-loader/lib/loader.js:29:11)

 @ ./components/header/searchBox/index.js 5:0-58 6:24-27
 @ ./components/header/index.js
 @ ./pages/_app.js
 @ multi ./pages/_app.js

The source of this error is the (rather smallish) SVG being converted to Base64 before handed over to svg-sprite-loader. I think it would help to always turn of BASE64 conversion for elements having the ?sprite suffix. Is that possible?

Memory Exposure

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ tunnel-agent                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ next-optimized-images [dev]                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ next-optimized-images > img-loader > imagemin-gifsicle >     │
│               │ gifsicle > bin-wrapper > download > caw > tunnel-agent       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/598                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

Dependency versions:
https://unpkg.com/img-loader/package.json
https://unpkg.com/imagemin-gifsicle/package.json
https://unpkg.com/gifsicle/package.json
https://unpkg.com/bin-wrapper/package.json
https://unpkg.com/download/package.json
https://unpkg.com/caw/package.json
https://unpkg.com/tunnel-agent/package.json

Unable to configure hash after upgrading to 2.0

Hi again @cyrilwanner 👋

I'm curious how difficult would it be to customise hash, similar to how it used to work in v1. Back then my config looked like so, according to what file-loader accepts:

{ imagesName: "[name].[ext]?h=[sha512:hash:base64:4]" }

The trick with the hash formatting stopped working after upgrading next-optimized-images to v2, so my config had to become:

{ imagesName: "[name].[ext]?h=[hash]" }

Otherwise, the following error shows up:

Module build failed (from ../node_modules/url-loader/dist/cjs.js):
Error: Digest method not supported
    at new Hash (internal/crypto/hash.js:33:18)
    at Object.createHash (crypto.js:101:10)
    at getHashDigest (/path/to/project/node_modules/loader-utils/lib/getHashDigest.js:46:34)
    at url.replace (/path/to/project/node_modules/loader-utils/lib/interpolateName.js:96:11)
    at String.replace (<anonymous>)
    at Object.interpolateName (/path/to/project/node_modules/loader-utils/lib/interpolateName.js:93:8)
    at Object.loader (/path/to/project/node_modules/file-loader/dist/index.js:24:36)
    at Object.loader (/path/to/project/node_modules/url-loader/dist/index.js:76:19)

I'm wondering if hash could be made customisable again, which should help shorten asset paths if desired. WDYT?

Resizing images usage

Expectation

I should be able to resize images in development after installing responsive-loader and sharp, with no additional configuration in next.config.js.

Result

Images are not optimized in dev when I do:

<img src={`${src}?resize&size=300`} />

or using require gives me Cannot find module error:

<img src={require(`${src}?resize&size=300`)} />

Error when trying to load png

The package works great when I run it locally, but when I run it an alpine Docker container I get the following error only for png images:

> Failed to build
{ Error: (client) ./static/iphone.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
[...]

My next.config.js looks like this:

const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

module.exports = withPlugins([
  [optimizedImages, {
    inlineImageLimit: -1,
    optimizeImagesInDev: true
  }]
]);

And I'm importing the image like this:
<img src={require('../../static/iphone.png')} className="iphone"/>

Any ideas why this would happen?
I've already installed all these

Add SVG placeholder support

It would be really neat to add https://github.com/EmilTholin/image-trace-loader an option for next-optimized-images. The benefit of that vs LQIP is more visual detail without sacrificing file size.

Cannot find module "../static/icons/my-icon"

Hi,

when I try to use any of the query params like "?url" I get an error Cannot find module "../static/icons/my-icon"

so this works:
<img src={require('../static/icons/my-icon.svg')} width="100%" height="100%"/>
... but this doesn't:
<img src={require('../static/icons/my-icon.svg?url')} width="100%" height="100%"/>

(I'm using Typescript)

Thanks in advance!

Need update dependencies

Hello.
Could you please update dependencies of this plugin?

After installing this plugin I got alert from npm:
found 9 moderate severity vulnerabilities in 21838 scanned packages 9 vulnerabilities require manual review. See the full report for details.

I will very appreciate to you.

The plugin is trying to load ai files

For some reason since including the plugin again, I'm getting an error where it's trying to load .ai files from the directory. Is this intended effect?

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

Requiring images with dynamic paths

Is it possible to require images with dynamically created paths? E.g.:

import React from 'react';

export default ({ imgName }) => (
  <div>
    <img src={require(`./images/${imgName}`)} />
  </div>
);

Something along the lines described in this article https://medium.com/@bogdan_plieshka/loading-static-and-dynamic-images-with-webpack-8a933e82cb1e

Thanks for any help!

assetPrefix

how to config the assetPrefix?

example?

it would be very helpful to have a demo project to see how this all works in the wild

Next is not serving image files from _document.js

When requiring images from pages/_document.js the file is created by webpack, but next won't serve it. See the image below:

I also created a repo to reproduce that: https://github.com/felipero/next_images_bug/tree/next-optimized-images

support node v6

nextjs currently supports node v6, but using next-optimized-images fails when imported with the following

./node_modules/next-optimized-images/index.js:93
          ),
          ^

SyntaxError: Unexpected token )

i believe this is because node v6 doesn't support trailing commas. there might be other issues, this is just the first error i hit. i'm exploring now if v6 is fully unsupported or if there are existing workarounds.

Stylus support

How could one makes this plugin work with stylus url()?
It is being ignored.

Adding ?sprite to the module doesn't work

Hello,

My ESLint is complaining when I try to import a file as an svg sprite as follow:

import idea from '../static/images/icons/idea.svg?sprite';

I added comments to ignore the error and it worked. When I tried to test the component with jest it failed to import the file.

webp for background-image

How can I achieve something similar to:

'<source srcSet={require('./images/my-image.jpg?webp')} type="image/webp" /><source srcSet={require('./images/my-image.jpg')} type="image/jpeg" /><img src={require('./images/my-image.jpg')} />'

for a background-image? Is it currently possible?

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from `4.18.0` to `4.18.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Commits

The new version differs by 7 commits.

c51a1ba 4.18.1
c79c1de Merge pull request #8018 from webpack/ci/azure-windows
37046a7 Add windows to azure
814b85b Merge pull request #8012 from webpack/ci/azure
474a9ac Add simple azure pipeline
7b3a297 Merge pull request #8015 from webpack/deps/upgrade-tapable
35015dd Upgrade tapable version

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

JPG largely not working

JPG files seem to be broken in version 1.4.1. I have found that some files work fine, but for example 5 entirely random jpg files which I tested from unsplash.com failed to display. The image does get copied to the .next/images folder as per the default config, but the image is malformed and unreadable, both in the browser and on my local system.

I have tried the same setup in windows 10 as well as mac high sierra, using both nextjs 5.1 and 6.1.

My base next.config.js is as follows:

const { withPlugins, optional } = require('next-compose-plugins');
const images = require('next-optimized-images');

module.exports = withPlugins([
  [images, {
    optimizeImagesInDev: true,
  }],
], {
  webpack: (config) => {
    // Add rules for styled-components linting, this will allow
    // us to lint styles as part of the build
    config.module.rules.push({
      test: /\.js?/,
      loader: 'stylelint-custom-processor-loader',
      exclude: /node_modules/,
      options: {
        emitWarning: false
      },
    });

    // IMPORTANT: the config must be returned
    return config;
  }
});

Test Case:

import React from 'react';
import Icon from '../static/high_low_big.svg?sprite';
import Image from '../static/nathan-peterson-792622-unsplash.jpg?original';

export default () => {
  const imgStyle = {
    maxWidth: '100%',
  };
  return (
    <div>
      <Icon/> // SVG works as expected
      <img style={imgStyle} src={Image} /> // Image does not render, makes no difference if I change `?original` to `?include`, or remove it at all.
    </div>
  );
};

The path which I am referencing is correctly being updated to point to /_next/static/images/nathan-peterson-792622-unsplash-b7e78930f997020df3638a54a25421f8.jpg, but this image is malformed and not displaying.

Optimize webp images

Currently, jpeg/png images can get converted to webp with the ?webp query param but you can't require a .webp image.

This should be possible and the same optimization options should get applied.

feature request: lqip

using something like lqip, i think it would be useful to import and image and request a low quality image placeholder to be generated (or to just extract the dominant color instead).

you likely could use these loaders independently, but i like the decision of this library to use url query params to drive signaling of intent on how to handle the image and i could imagine a ?lqip or ?lqip-dominant-color as extensions of this module.

for now, i'm just generating these myself, but in the spirit of DRY, this might be a useful direction to consider. i'ld be interested if you felt the same way or had previously considered and rejected the idea.

iOS <=8 Safari throws error

Dependencies used:

[email protected]
[email protected]

Since svg-runtime-generator.js is not being transpiled by babel we get a lot of errors in older iOS Safari versions regarding inappropriate usage of const declaration.

Transpiled bundle part which fails on older Safaris looks as the following:

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var svg_baker_runtime_browser_symbol__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! svg-baker-runtime/browser-symbol */ "./node_modules/svg-baker-runtime/browser-symbol.js");
/* harmony import */ var svg_baker_runtime_browser_symbol__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(svg_baker_runtime_browser_symbol__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var svg_sprite_loader_runtime_browser_sprite_build__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! svg-sprite-loader/runtime/browser-sprite.build */ "./node_modules/svg-sprite-loader/runtime/browser-sprite.build.js");
/* harmony import */ var svg_sprite_loader_runtime_browser_sprite_build__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(svg_sprite_loader_runtime_browser_sprite_build__WEBPACK_IMPORTED_MODULE_2__);

    const symbol = new svg_baker_runtime_browser_symbol__WEBPACK_IMPORTED_MODULE_1___default.a({
  "id": "sample--sprite",
  "use": "sample--sprite-usage",
  "viewBox": "0 0 13 13",
  "content": "<symbol ... /></symbol>"
});
    svg_sprite_loader_runtime_browser_sprite_build__WEBPACK_IMPORTED_MODULE_2___default.a.add(symbol);

    const SvgSpriteIcon = function SvgSpriteIcon(props) {
      return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
        'svg',
        Object.assign({
          viewBox: symbol.viewBox,
        }, props),
        react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
          'use',
          {
            xlinkHref: '#' + symbol.id,
          }
        )
      );
    };

    SvgSpriteIcon.viewBox = symbol.viewBox;
    SvgSpriteIcon.id = symbol.id;
    SvgSpriteIcon.content = symbol.content;
    SvgSpriteIcon.url = symbol.url;
    SvgSpriteIcon.toString = symbol.toString;

    /* harmony default export */ __webpack_exports__["default"] = (SvgSpriteIcon);
/***/ }),

Do we need to make a manual transpilation during runtime? Any suggestions are welcome. Thank you.

Struggling with SVGO options

Hi, i'm having trouble getting the svgo options to work.
I tried the following:

module.exports = withPlugins(
  [
    withFonts,
    [withOptimizedImages, {
      svgo: {
        plugins: [
          { removeTitle: true },
          { convertPathData: false },
          { removeUselessStrokeAndFill: true },
          { removeAttrs: { attrs: '(stroke|fill)' } },
        ]
      }
    }]
  ],
  nextConfig
);

I then use the ?icon as described in the docs:

import CartIconSVG from '~/assets/icons/cart.svg?sprite';

The SVG displays fine, the sprite is added to the DOM, but titles are not stripped from the resulting SVGs.

Any help is appreciated!

SCSS absolute image urls are not transformed

I'm really having a hard time making this plugin work with my SASS files, so to make sure it's not my own complex configuration that is in the way, I created a new project from scratch just to test the plugin and try and make it work with CSS url.

The simple project

// pages/styles.scss
.test {
  background-image: url('/static/test.jpg'); // this is not transformed
}

// pages/index.js
import React from 'react';
import './styles.scss';

export default () => <div className="test">Welcome to next.js!</div>

// next.config.js
const withSass = require('@zeit/next-sass');
const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages(withSass({
  assetPrefix: 'http://localhost:3000/',
}));

And the package.json

{
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "next": "^8.0.0",
    "next-optimized-images": "^2.3.3",
    "node-sass": "^4.11.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Note that our other project is on Next v7 (if that changes anything).

Expected behaviour

Since I'm using the assetPrefix Next config option, I'm hoping to see my image URL within the compiled CSS to change to something like this: http://localhost:3000/_next/static/test-hashHere.jpg.

Current behaviour

It's not changing at all. I'm seeing the image since the assetPrefix is the same as my default dev server and Next is correctly parsing the image since if I change the path, it fails to compile.

Cannot use SVG-Files

Hi, thanks for your plugin...

when i try this:

img alt="logo" src={require('../static/logo_white.svg')} className="welcomePageWelcomeInnerLogo" />

i get this issue:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <?xml version="1.0" encoding="UTF-8"?>
| <svg width="1254px" height="279px" viewBox="0 0 1254 279" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
|  <!-- Generated by Pixelmator Pro 1.1.4 -->

How can i solve the issue? My next.config.js looks like this:

//const withImages = require('next-images');
const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

module.exports = withPlugins([
    [optimizedImages, {
      /* config for next-optimized-images */
    }],
    withCSS()
  ]);

Another question... i have a backgroundImage as .jpg file. I set this Image as BackgroundImage with CSS like this:

const setbgImage = {
    backgroundImage: `url('../static/background.jpg')`
};

How can i use this with the fowolling example to use webp?

picture>
    <source srcSet={require('./images/my-image.jpg?webp')} type="image/webp" />
    <source srcSet={require('./images/my-image.jpg')} type="image/jpeg" />
    <img src={require('./images/my-image.jpg')} />
  </picture>

How to set imagesPublicPath in runtime

Currently I can use

app.setAssetPrefix('http://cdn.com/myapp')

to set the assetPrefix for next.js files in runtime, that way I can reuse my build file for both staging and production environment

Is it possible to set imagesPublicPath in runtime too?

strange inline data uris with next 6

Hi @cyrilwanner this is a great idea, but having some issues getting it working. My inline images are being generated with data uris like this:

data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJkMzI1YWI2YzI3ZWEyYzg5NzRmNGMyYjQ5MDI2NGE4YS5wbmciOw==

which, when decoded, contains text content like this:

module.exports = __webpack_public_path__ + "d325ab6c27ea2c8974f4c2b490264a8a.png";

which clearly isn't an image. Is this an incompatibility with next 6 situation I'm encountering here?

Any help appreciated!

fyi. just using imagesFolder and imagesPublicPath config keys.

Always create webp version

How can I configure this plugin to always create a webp version when requiring an image (I.e without having to require twice )?

E.g so require('./images/someimage.jpg') should create two output files, one optimised .jpg and one optimised .webp

Problem on install

Environment

OS: Ubuntu:18
npm: 5.6.0
node: 8.11.2

install command: npm install --save next-optimized-images

I got following log:

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

[email protected] postinstall /media/bipin/052ca934-ac82-4b85-b36a-f161177524d5/workspace/murcul-org/client-juven-frontend/node_modules/pngquant-bin
node lib/install.js

⚠ The /media/bipin/052ca934-ac82-4b85-b36a-f161177524d5/workspace/murcul-org/client-juven-frontend/node_modules/pngquant-bin/vendor/pngquant binary doesn't seem to work correctly
⚠ pngquant pre-build test failed
ℹ compiling from source
✔ pngquant pre-build test passed successfully
✖ Error: pngquant failed to build, make sure that libpng-dev is installed
at Promise.all.then.arr (/media/bipin/052ca934-ac82-4b85-b36a-f161177524d5/workspace/murcul-org/client-juven-frontend/node_modules/pngquant-bin/node_modules/bin-build/node_modules/execa/index.js:231:11)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of stylis@^3.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Now deploy error

Hello. I get this error when I deploy.

now

'(server) ./static/images/google-plus-icon.svg\nModule build failed: TypeError: csstree.translate is not a function\n

next.config.js

const withSass = require('@zeit/next-sass')
const withImages = require('next-images');
const withOptimizedImages = require('next-optimized-images');
module.exports = withSass(withOptimizedImages());

Styled-jsx ignored

Hello all,

I'm facing an issue regarding <style jsx>{``}</style> in my components.
When I want to put an image inline through SCSS files or with import / require statements in JS files it's working fine.
But not with style jsx, so I'm wondering if this plugin supports parsing <style jsx> ?

Someone has something working with style jsx ?

I'm using '[email protected]' + '@zeit/[email protected]' in the project.

Thank you !

eslint + flow support

my project uses eslint + flow

importing images generally works because they can be found on the file system, but when adding query params, this throws off both eslint and flow.

my workaround right now is to update .flowconfig to strip the query

[ignore]

[include]

[libs]

[lints]

[options]
module.name_mapper='^\(.+\.\(png\|gif\|jpg\|webp\)\)\?\(url\|original\|include\|inline\|webp\|sprite\)$' -> '\1'

[strict]

and to add // eslint-disable-line import/no-unresolved on the import line when i do use a query.

not sure what the best way to fix this. either some extra settings for eslint-plugin-import or to have a different api for how to trigger special actions that don't involve changing up the import line.

either way, this might not be a bug for this repo, but filing it here, in case others run into this. feel free to close.