ladle: Ladle breaks when next/image component is imported

I have stories for simple components that work fine. But once I click on a story for a component that uses the next/image component, nothing renders and ladle is broken until reload. Once I clock on a story with next/image the following error occurs in the console:

react.development.js:1309 Uncaught ReferenceError: process is not defined
    at node_modules/next/dist/client/normalize-trailing-slash.js (normalize-trailing-slash.ts:12:43)
    at __require (chunk-MYIE5J7A.js?v=88870cd9:25:50)
    at node_modules/next/dist/shared/lib/router/router.js (router.ts:13:50)
    at __require (chunk-MYIE5J7A.js?v=88870cd9:25:50)
    at node_modules/next/dist/client/link.js (link.tsx:11:37)
    at __require (chunk-MYIE5J7A.js?v=88870cd9:25:50)
    at node_modules/next/link.js (link.js:1:18)
    at __require (chunk-MYIE5J7A.js?v=88870cd9:25:50)
    at dep:next_link:1:16
node_modules/next/dist/client/normalize-trailing-slash.js @ normalize-trailing-slash.ts:12
__require @ chunk-MYIE5J7A.js?v=88870cd9:25
node_modules/next/dist/shared/lib/router/router.js @ router.ts:13
__require @ chunk-MYIE5J7A.js?v=88870cd9:25
node_modules/next/dist/client/link.js @ link.tsx:11
__require @ chunk-MYIE5J7A.js?v=88870cd9:25
node_modules/next/link.js @ link.js:1
__require @ chunk-MYIE5J7A.js?v=88870cd9:25
(anonymous) @ dep:next_link:1
react_devtools_backend.js:3973 The above error occurred in one of your React components:

    at Lazy
    at Provider (http://localhost:61000/generated/generated-list.tsx:114:28)
    at Suspense
    at ErrorBoundary (http://localhost:61000/src/error-boundary.tsx:4:5)
    at Story (http://localhost:61000/src/story.tsx:11:18)
    at main
    at App (http://localhost:61000/src/app.tsx:24:41)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Here is a screenshot for better readability:

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 15 (2 by maintainers)

Commits related to this issue

fix(story): add `vite.config.ts` and `define` the `proces.env` property; issuse `https://github.com/tajo/ladle/issues/100#issuecomment-1192413254`; to work with `next-js`; — committed to mikoloism/course-leap-landing-page by deleted user 2 years ago

Most upvoted comments

@bonesoul

You have to create vite.config.js or vite.config.ts in your root folder, not .laddle (this was what I did wrong at least) with the following:

import { defineConfig } from "vite";

export default defineConfig({
  define: {
    "process.env": process.env,
  },
});

This resolves the process is not defined for me, but I still have this issue with images

maksimf on Jul 22, 2022

I found another solution which uses vite aliases to append the unoptimized prop to next/image:

vite.config.ts:

import path from "path";
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "next/original-image": require.resolve("next/image"),
      "next/image": path.resolve(__dirname, "./.ladle/UnoptimizedImage.tsx"),
    },
  },
  define: {
    "process.env": process.env,
  },
});

.ladle/UnoptimizedImage.tsx:

import React from "react";
// @ts-ignore have a look in vite.config.ts
import OriginalImage from "next/original-image";

const UnoptimizedImage = (props: any) => {
  return <OriginalImage {...props} unoptimized />;
};

export default UnoptimizedImage;

For a more detailed description, please have a look at https://sdorra.dev/posts/2023-01-18-ladle-next-image#nextimage

sdorra on Jan 19, 2023

Nice workaround, thanks @jeremytenjo!

I think long term an option like Storybook’s workaround would be preferred to keep mock/ladle props out of the bundle

// .storybook/preview.js

import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => (
    <OriginalNextImage
      {...props}
      unoptimized
    />
  ),
});

Would .ladle/components.tsx be the best place for this? 🤔

joe-bell on Jun 5, 2022