Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images optimizations crash #18946

Closed
ScreamZ opened this issue Nov 8, 2020 · 11 comments
Closed

Images optimizations crash #18946

ScreamZ opened this issue Nov 8, 2020 · 11 comments
Labels
Image (next/image) Related to Next.js Image Optimization.
Milestone

Comments

@ScreamZ
Copy link

ScreamZ commented Nov 8, 2020

Bug report

event - compiled successfully
event - build page: /blog
wait  - compiling...
event - build page: /next/dist/pages/_error
event - compiled successfully
dyld: lazy symbol binding failed: Symbol not found: _g_once_impl
  Referenced from: /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/sharp/build/Release/sharp.node
  Expected in: /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/node_modules/sharp/build/Release/../../vendor/lib/libvips.42.dylib

dyld: Symbol not found: _g_once_impl
  Referenced from: /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/sharp/build/Release/sharp.node
  Expected in: /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/node_modules/sharp/build/Release/../../vendor/lib/libvips.42.dylib

error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Describe the bug

When I migrate to next 10, I'm using the new component image with the following config (image is from prismic CMS)

images: {
    domains: ["images.prismic.io"],
},

Image URL is https://images.prismic.io/blaze/c5975c62-4bd8-4151-8e04-d6837add38c4_sequencing-article-image.png?auto=compress,format from prismic.

System information

  • OS: MacOS
  • Version of Next.js: 10.0.1
  • Version of Node.js: 14.13.1
@ScreamZ ScreamZ added the bug Issue was opened via the bug report template. label Nov 8, 2020
@styfle
Copy link
Member

styfle commented Nov 11, 2020

Can you try yarn add next@canary?

It should fail gracefully with an error linking to https://github.com/vercel/next.js/blob/canary/errors/install-sharp.md

@ScreamZ
Copy link
Author

ScreamZ commented Nov 11, 2020

@styfle Looks like we have some errors on new canary : "next": "^10.0.2-canary.10

$ NODE_OPTIONS='--inspect' next dev
Debugger listening on ws:https://127.0.0.1:9229/e5cfc7db-dfce-4085-a5ba-9ffe94db5284
For help, see: https://nodejs.org/en/docs/inspector
Loaded env from /Users/screamz/js-dev/perso/web-apps/coding-spark/.env.local
ready - started server on http:https://localhost:3000
info  - Using external babel configuration from /Users/screamz/js-dev/perso/web-apps/coding-spark/.babelrc
event - compiled successfully
event - build page: /
wait  - compiling...
(node:26184) UnhandledPromiseRejectionWarning: Error: Cannot find module '@babel/preset-react'
Require stack:
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/processLoaders.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/index.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/loader-runner/lib/loadLoader.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/webpack/lib/NormalModule.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/webpack/lib/Compiler.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/webpack/lib/webpack.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/@next/react-dev-overlay/lib/middleware.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/server/hot-reloader.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/server/next-dev-server.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/server/next.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/server/lib/start-server.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/cli/next-dev.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at convertToComponent (/Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/processLoaders.js:79:40)
    at processLoaders (/Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/processLoaders.js:111:14)
    at /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/index.js:56:48
(node:26184) 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: 1)
(node:26184) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:26184) UnhandledPromiseRejectionWarning: Error: Cannot find module '@babel/preset-react'
Require stack:
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/processLoaders.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/index.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/loader-runner/lib/loadLoader.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/webpack/lib/NormalModule.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/webpack/lib/Compiler.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/webpack/lib/webpack.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/@next/react-dev-overlay/lib/middleware.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/server/hot-reloader.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/server/next-dev-server.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/server/next.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/server/lib/start-server.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/cli/next-dev.js
- /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at convertToComponent (/Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/processLoaders.js:79:40)
    at processLoaders (/Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/processLoaders.js:111:14)
    at /Users/screamz/js-dev/perso/web-apps/coding-spark/node_modules/optimized-images-loader/lib/index.js:56:48
(node:26184) 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: 2)

@Timer
Copy link
Member

Timer commented Nov 11, 2020

Can you share your babel configuration (.babelrc), next.config.js, and package.json @ScreamZ? Preliminary theory is that you're using @babel/preset-react and you didn't install it.

@ScreamZ
Copy link
Author

ScreamZ commented Nov 11, 2020

No issue with the previous stable version, even without babel/preset-react, it's just when I bump to canary as requested by stylfe. But in case here are my config

  "presets": ["next/babel"],
  "plugins": ["react-optimized-image/plugin"]
}
const withPlugins = require("next-compose-plugins");
const withBundleAnalyzer = require("@next/bundle-analyzer");
const optimizedImages = require("next-optimized-images");

const plugins = [[withBundleAnalyzer, { enabled: true }], [optimizedImages]];

const nextConfig = {
  images: {
    domains: ["images.prismic.io"],
  },
  typescript: {
    ignoreDevErrors: true,
  },
};

module.exports = withPlugins(plugins, nextConfig);
{
  "name": "brand-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "typescript:lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "typescript:lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "typescript:typescheck": "tsc -p tsconfig.json --noEmit"
  },
  "dependencies": {
    "@next/bundle-analyzer": "^10.0.1",
    "@tailwindcss/typography": "^0.2.0",
    "@tailwindcss/ui": "^0.7.2",
    "classnames": "^2.2.6",
    "date-fns": "^2.8.1",
    "firebase": "^8.0.1",
    "i18next": "^19.0.1",
    "i18next-browser-languagedetector": "^6.0.1",
    "next": "^10.0.2-canary.10",
    "next-compose-plugins": "^2.2.0",
    "next-optimized-images": "^3.0.0-canary.10",
    "next-seo": "^4.7.3",
    "prismic-javascript": "^3.0.2",
    "prismic-reactjs": "^1.3.3",
    "react": "^17.0.1",
    "react-cookie-consent": "^6.1.0",
    "react-dom": "^17.0.1",
    "react-i18next": "^11.2.3",
    "react-syntax-highlighter": "^15.2.1",
    "react-transition-group": "^4.4.1",
    "swr": "^0.3.1",
    "tailwindcss": "^1.9.5"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.10",
    "@types/node": "^14.6.0",
    "@types/react": "^16.9.13",
    "@types/react-syntax-highlighter": "^13.5.0",
    "@typescript-eslint/eslint-plugin": "^4.6.1",
    "@typescript-eslint/parser": "^4.6.1",
    "eslint": "^7.7.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.0",
    "husky": "^4.2.4",
    "lint-staged": "^10.1.3",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.0.5",
    "typescript": "^4.0.2"
  },
  "author": {
    "name": "Andréas HANSS"
  }
}

@sdn90
Copy link

sdn90 commented Nov 12, 2020

I ran into this and it is due to next-optimized-images and optimized-images-loader using an older version of sharp.

I don't have a solution to fix it. I tried installing the master branch of optimized-images-loader but couldn't get it to build.

@timneutkens timneutkens added kind: story and removed bug Issue was opened via the bug report template. labels Nov 24, 2020
@timneutkens timneutkens added this to the backlog milestone Nov 24, 2020
@tomafro
Copy link

tomafro commented Dec 29, 2020

Just had the same problem where lqip-modern required sharp@^0.25.4 and next needing [email protected]. As a temporary workaround I've added the following to my package.json, fixing the immediate problem. Not sure if this works with npm or just yarn:

"resolutions": {
  "sharp": "0.27.0"
}

@the-main-thing
Copy link

Just had the same problem where lqip-modern required sharp@^0.25.4 and next needing [email protected]. As a temporary workaround I've added the following to my package.json, fixing the immediate problem. Not sure if this works with npm or just yarn:

"resolutions": {
  "sharp": "0.27.0"
}

Worked for me. Thank you!

@PaulSenon
Copy link

Just had the same problem where lqip-modern required sharp@^0.25.4 and next needing [email protected]. As a temporary workaround I've added the following to my package.json, fixing the immediate problem. Not sure if this works with npm or just yarn:

"resolutions": {
 "sharp": "0.27.0"
}

God thank you @tomafro...

I was struggling with the same under next dev only:

dyld: lazy symbol binding failed: Symbol not found: _g_once_impl

It was working on production build, but I was so tired of having to make one build each time I wanted to test something using images because of a conflict between next/image component (next 10) and next-optimized-images (v3 cannary).

What I did (if it can help anyone):

  1. yarn add sharp
  2. add the "resolutions" snippet (just above) in package.json with the installed version of sharp from step 1
  3. npm rebuild sharp

Et voilà everithing is now working like a charm

@timneutkens
Copy link
Member

Can you try next@canary, sharp has been replaced.

@timneutkens timneutkens added the Image (next/image) Related to Next.js Image Optimization. label Nov 17, 2021
@styfle
Copy link
Member

styfle commented Jan 20, 2022

Closing since this was fixed a year ago

@styfle styfle closed this as completed Jan 20, 2022
@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 19, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Image (next/image) Related to Next.js Image Optimization.
Projects
None yet
Development

No branches or pull requests

8 participants