React

Introduction When I tried to deploy a Next.js application to Vercel, I encountered a problem where the build succeeded locally but failed on Vercel. The error message was vague, and it was difficult to identify the cause. In this article, I share the process from discovering the problem to resolving it, along with what I learned about JavaScript operator precedence. Symptoms Error Message E [ T r E h r r e o r r o s r p o : e c c c A i u n f r i r e c e r d r m o e p r s r s e o a r c g e c e n u d r i e r s r e i d o n m g i i n t p t a t e g h d e e i " S n / e e r p n r / e o s r d m u e C c l o t l m i s p o / o n 2 n 2 e b - n u 0 t i 3 s l " d r s e n t d o e r a . v o i d l e a k i n g s e n s i t i v e d e t a i l s . ] Characteristic Behavior Local build succeeds, but Vercel build fails Errors occur on different pages each time (22-03, 24-03, 25-04, etc.) Error details are hidden in production builds Finding the Cause While investigating multiple files, I discovered the following code pattern: ...

Introduction When trying to use @elastic/react-search-ui in a project using React 19 and Next.js 15, you may encounter the following dependency error. n n p p m m e e r r r r o o r r E p R e E e S r O L r V e E a c c t o @ u " l > d = n 1 o 6 t . 8 r . e 0 s o < l v 1 e 9 " f r o m @ e l a s t i c / r e a c t - s e a r c h - u i @ 1 . 2 3 . 1 This article explains the cause of this problem and how to resolve it in detail. ...

Background mirador-annotations is a plugin that adds annotation functionality to the IIIF viewer Mirador. The previous project had the following configuration: Build tool: nwb (Create React App based) UI library: Material-UI v4 Mirador: 3.x React: 17.x However, the following problems were occurring: nwb maintenance stopped - nwb has not been updated for a long time, causing frequent dependency conflicts npm install failures - Old dependencies made setup in new environments difficult Security vulnerabilities - Numerous vulnerability warnings in old packages To resolve these issues, we decided to migrate to: ...

Introduction I localized and published a Japanese version of the data visualization tool RAWGraphs. https://rawgraphs-ja.vercel.app/ RAWGraphs is an open-source web application that can transform complex data into beautiful visualizations. Without any coding, you can create various charts simply by dragging and dropping CSV or JSON data. What is RAWGraphs? RAWGraphs is a data visualization tool developed by DensityDesign Research Lab in Italy. https://www.rawgraphs.io/ Key features: ...

Overview I looked into how to use Rekichizu (historical maps) with Next.js, so here are my notes. Background In the following article, I introduced how to use “Rekichizu.” Then, I learned that the “nationwide version was released” on April 4, 2025. https://rekichizu.jp/ So I investigated how to integrate it into an application built with Next.js. Demo App I prototyped the following application. https://rekichizu-next.vercel.app/ja/ For the investigation, I aimed to reproduce features such as map switching, overlay, and search functionality provided on the official site. For this implementation, I used the following React library. ...

Overview I enabled initial angle settings in the Mirador 4 plugin for rotating images at arbitrary angles. The repository is here. https://github.com/nakamura196/mirador-rotation-plugin The demo page is here. You can rotate images with initial settings for angle and bounding box. https://nakamura196.github.io/mirador-rotation-plugin/ Background The following article explains this plugin. However, there was an issue where initial angle values could not be provided. As introduced in the following article, it appeared that Mirador 4’s standard functionality allows providing initial angle values. ...

Overview This is a memo on developing a TEI/XML viewer combining Next.js, CETEIcean, and React TEI Router. Background CETEIcean is a JavaScript library that converts TEI/XML to HTML5. https://github.com/TEIC/CETEIcean React TEI Router is a library that enables structured display of TEI/XML using React components, based on CETEIcean. It is described as follows: https://github.com/pfefferniels/react-teirouter TEI for React using CETEIcean and routes By combining these, I created a viewer that can customize and display TEI/XML in Next.js. ...

Introduction This article was generated by GPT-4o. It explains how to build a multilingual static site using Next.js. In particular, it focuses on a configuration where the main language has no URL prefix while other languages have prefixes. It also includes configuration for deploying to GitHub Pages. Project Setup First, create a Next.js project. Initialize the project using create-next-app. n p x c r e a t e - n e x t - a p p @ l a t e s t n e x t - i n t l - s s g Installing Required Packages Install next-intl for multilingual support. ...

Overview I have been developing a Firebase-linked annotations plugin for Mirador 3. Previously, only Google account login functionality was provided, but I have now added email-based login functionality. Feature Introduction Below is the screen after pressing the login button. With email-based login, new account creation is possible. After login, user information is now displayed. Clicking the icon displays a logout button. Summary I hope this serves as a helpful reference for creating and sharing annotations using IIIF. ...

Overview When using @react-three/fiber with Next 15 (which uses React 19), the following is stated: R3F v8 is not compatible with React 19 or Next 15, which uses React 19. Use the R3F v9 RC instead which can be installed with @react-three/fiber@rc. However, when I added the following for mouse controls, it did not work well with @react-three/fiber@rc. https://www.npmjs.com/package/@react-three/drei This is a note on how to address this issue. ...

Overview In the following article, I introduced the Aleph 3D viewer. After further research, I also discovered the following repository. https://github.com/aleph-viewer/aleph-r3f It is described as follows, with the difference being that it uses react-three-fiber and shadcn/ui. Aleph is a 3D object viewer and annotation/measurement tool built with react-three-fiber and shadcn/ui The annotation features also appear to have been improved as shown below. In this article as well, we use the 3D data of the “Ishibuchi Family Globe” published in the Kikuchi City Digital Archive. ...

Overview I created a plugin for Mirador 3 that copies a window. Note that this functionality is already provided by the following plugin. https://github.com/ProjectMirador/mirador-plugin-demos Therefore, this plugin was created to learn the plugin development process. I hope this plugin serves as a useful reference from that perspective. Here is a screenshot. The source code is available here. https://github.com/nakamura196/mirador-copy-window-plugin The demo site is available here. https://nakamura196.github.io/mirador-copy-window-plugin/ Development Notes For developing this plugin, I first cloned the following repository and made modifications to it. ...

When using onBackdropClick in MUI’s Dialog component, the following warning occurred. W a r n i n g : F a i l e d p r o p t y p e : T h e p r o p ` o n B a c k d r o p C l i c k ` o f ` F o r w a r d R e f ( D i a l o g ) ` i s d e p r e c a t e d . U s e t h e o n C l o s e p r o p w i t h t h e ` r e a s o n ` a r g u m e n t t o h a n d l e t h e ` b a c k d r o p C l i c k ` e v e n t s . The warning message is about the deprecated prop onBackdropClick of the Dialog component. This means that this prop is being used somewhere in your code but is no longer supported or recommended. The warning suggests using the onClose prop instead. ...