flash-list: SyntaxError: Cannot use import statement outside a module

I’m solved this with:

const withTM = require("next-transpile-modules")([
  "@shopify/flash-list",
  "recyclerlistview",
]);

I have added flash list recyclerlistview dependency and nextjs compiled without errors.

My next.config.js:

const path = require("path");
const { withExpo } = require("@expo/next-adapter");
const withImages = require("next-images");
const withSvgr = require("next-svgr");
const withPWA = require("next-pwa");
const packageJson = require("./package.json");
const withTM = require("next-transpile-modules")([
  "@shopify/flash-list",
  "recyclerlistview",
]);

module.exports = withTM(
  withExpo(
    withPWA(
      withSvgr(
        withImages({
          projectRoot: __dirname,
          fileExtensions: ["jpg", "jpeg", "png", "gif"],
          productionBrowserSourceMaps: true,
          pwa: {
            dest: "public",
          },
        })
      )
    )
  )
);

yeah, works with next-transpile-modules!

@dhatGuy @pleaseshutup

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
  webpack: (config, options) => {
    if (options.isServer) {
      // provide plugin
      config.plugins.push(
        new options.webpack.ProvidePlugin({
          requestAnimationFrame: path.resolve(__dirname, './raf.js'),
        }),
      );
    }
    return config;
  }
};

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",
  "@shopify/flash-list",
]);

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

@flygomel I did the same thing, and was able to build without errors, however, the <FlashList/> component didn’t actually render and this was in the actual render output:

ReferenceError: exports is not defined at eval (webpack-internal:///./node_modules/recyclerlistview/dist/reactnative/core/VirtualRenderer.js:3:11492)

can I see the config? I tried it adding flashlist to next-transpile-modules, still getting the error

The native components aren’t included in expo right now. Wait for one of the future revisions.

when running on iOS (managed expo) we get Invariant Violation: requireNativeComponent: "AutoLayoutView" was not found in the UIManager. 😕