Static images in Expo + Next

[RichardLindhout]

Images are not loaded now in Next.js, I did put my images at packages/app/assets. On NextJS it renders an empty view without any image ta g

[nandorojo]

try adding next-images to your next config

[nandorojo]

any luck?

[RichardLindhout]

Did not see your comment yet. @arjendevos can you try this tomorrow, see instructions here: https://www.npmjs.com/package/next-images

[arjendevos]

@RichardLindhout It appears to break when i add next-images to the next.config file. TypeError: unsupported file type: undefined (file: undefined)

[louisholley]

@arjendevos i fixed this issue by passing:

[
      withImages,
      {
        exclude: path.resolve(__dirname, "../../node_modules/*"),
        images: {
          disableStaticImages: true,
        },
      },
    ],

to withPlugins

[nandorojo]

In general, would be useful for you guys to share full code (ie your entire next config file). It's hard to debug without that.

@louisholley thanks for sharing that

[MainStreetTech]

@louisholley, that'd be great if you could share the before and after next.config file

[louisholley]

@MainStreetTech before:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
};

const { withExpo } = require("@expo/next-adapter");
const withPlugins = require("next-compose-plugins");
const withFonts = require("next-fonts");
const withTM = require("next-transpile-modules")([
  "solito",
  "dripsy",
  "@dripsy/core",
  "@dripsy/gradient",
  "moti",
  "@motify/core",
  "@motify/components",
  "app",
  "react-native-web",
  "react-native-svg",
  "native-base",
]);

module.exports = withPlugins(
  [withTM, withFonts, [withExpo, { projectRoot: __dirname }]],
  nextConfig
);

after:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
};

const path = require("path");
const { withExpo } = require("@expo/next-adapter");
const withPlugins = require("next-compose-plugins");
const withFonts = require("next-fonts");
const withImages = require("next-images");
const withTM = require("next-transpile-modules")([
  "solito",
  "dripsy",
  "@dripsy/core",
  "@dripsy/gradient",
  "moti",
  "@motify/core",
  "@motify/components",
  "app",
  "react-native-web",
  "react-native-svg",
  "native-base",
]);

module.exports = withPlugins(
  [
    withTM,
    withFonts,
    [
      withImages,
      {
        exclude: path.resolve(__dirname, "../../node_modules/*"),
        images: {
          disableStaticImages: true,
        },
      },
    ],
    [withExpo, { projectRoot: __dirname }],
  ],
  nextConfig
);

[nandorojo]

I have something similar, except I don’t use exclude. I also put the images object directly into nextConfig

I’ll see what I have to the solito starter when I have some time

[MainStreetTech]

@nandorojo @louisholley Thank you

This is working for me now

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
}

const { withExpo } = require('@expo/next-adapter')
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const withTM = require('next-transpile-modules')([
  'solito',
  'dripsy',
  '@dripsy/core',
  'moti',
  '@motify/core',
  '@motify/components',
  'app',
])

module.exports = withPlugins(
  [withTM, [
    withImages,
    {
      images: {
        disableStaticImages: true,
      },
    },
  ],[withExpo, { projectRoot: __dirname }]],
  nextConfig
)

[nandorojo]

Hey guys, try out the new solito/image: https://solito.dev/usage/image

It doesn't support optimizations via require, only import. Once all images use import instead of require, you can remove disableStaticImages: true from your next config.