Building a Nextjs app within a monorepo poses challenges when utilizing shared libraries

In my monorepo using pnpm, I have a backend along with 3 nextjs apps that connect to the backend within the same monorepo.

/packages
         /admin -> nextjs
         /operator -> nextjs
         /backend -> nestjs
         /shared -> shared library

Currently, I am facing an issue on the operator web page where I am attempting to export certain functions that need to be used in other projects. However, when trying to link frontend ReactJS functions, it leads to the following error: https://i.stack.imgur.com/iNaDi.png

The problem arises from linking to the project as "../shared/...". This causes webpack to struggle bundling the shared library due to the relative path being incorrect.

https://i.stack.imgur.com/0HeUd.png

This is what is reflected in the pnpm-lock.yaml file.

next.jspnpm

Answer №1

After some trial and error, I realized my mistake. I made a silly error by including my libraries in this way

import { apiRequest } from "shared/utils/apiRequest";

In the index.ts file of my library

export default {
  ...
  apiRequest,
  ...
};

I corrected the exports in src/index.ts

import { apiRequest } from "shared";

I removed the default from the exports in my index.ts

export {
  ...
  apiRequest,
  ...
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing a user from accessing the login page if they are already logged in using Reactjs

I need assistance with implementing a "Login Logout" module in Reactjs using the nextjs framework. My goal is to redirect users to the "dashboard" page if they are logged in (email set in cookie). However, I am encountering an error with the following co ...

javascriptnode.jsreactjsnext.js

Exploring the capabilities of the Next.js framework with the powerful Advanced Custom Fields Repeater

Having trouble implementing an ACF repeater field in my Next.js project. I have a block with a repeater field containing sub fields, and although I can retrieve the data, I'm unsure how to iterate through it. Below is a snippet of my JavaScript file: ...

reactjswordpressnext.jsadvanced-custom-fields

Explore how Next.js's getServerSideProps feature incorporates loading animations and improves

I have implemented getServerSideProps in my project's pages/post/index.js file: import React from "react"; import Layout from "../../components/Layout"; function Post({ post }) { console.log("in render", post); return ( <Layout title={pos ...

javascriptreactjsnext.js

"Implement next-auth alongside a credentials provider and utilize a JWT token as a bearer in order to authenticate access to the API

Currently in the process of developing an application using Next.js and Next-auth with credentials provider. I'm trying to figure out how to secure my APIs within the pages folder by utilizing the JWT token generated by next-auth as a bearer token in ...

next.jsjwtbearer-tokennext-auth

Looking to retrieve selections when the inputValue changes in react-select?

I'm working with a react-select component and I would like to implement a feature where an API request is triggered as soon as the user starts typing in the react-select field. This request should fetch items related to the keyword entered by the user ...

javascriptreactjsnext.jsreact-select

"Encountering a 404 error with NextAuth when deploying on Verc

My current setup involves using a CustomProvider as a Python backend server for app authentication: import CredentialsProvider from 'next-auth/providers/credentials' import NextAuth from 'next-auth' import { postLogin } from '../.. ...

next.jsvercelnext-authcredential-providerscustom-error-pages

What sets Layout apart from Template in Nextjs Version 13?

Can anyone clarify the distinction for me? I'm under the impression that a layout and template are interchangeable terms. ...

reactjstemplateslayoutnext.js

Error: The build process for Next.js using the command `npm run build`

Currently attempting to construct my application with target: 'serverless' set in the next.config.js file (in order to deploy on AWS Lambda). Upon running npm run build, I am encountering the following output: Warning: Built-in CSS support is bei ...

javascriptnext.js

Avoiding unnecessary re-renders of a parent component caused by a child component

I'm facing rendering problems and would greatly appreciate any assistance. I attempted to use useMemo and useCallback, but it resulted in the checkbox breaking. Within a component, I am displaying information from an object. Let's consider the fo ...

javascriptreactjsnext.js

Having trouble with nextjs routes not displaying the Modal?

Struggling to get the intercepting routes feature of Next.js' new app router to work with a Modal. The issue is, the Modal never renders and only the URL changes. My project structure is as follows: /app @modal (.)user [id] page.js user [ ...

reactjsnext.jsmodal-dialognext.js13app-router

Version 13.5 of NextJS is triggering errors in the GraphQL schema

Ever since I updated to NextJS 13.5, I've been encountering these errors specifically when deploying on Vercel (although everything works fine locally): Error: Schema must contain uniquely named types but contains multiple types named "h". at new Gr ...

next.jsgraphqlapolloverceltypegraphql

What is the best way to dynamically insert an object into a field name in react-final-form?

When using the react-final-form component, you can expect the following result: <Field name="answers[0].name" component="input" type="radio" value="0" /> { answers: [ { name: 'value' } ] ...

javascriptreactjsnext.jsreact-final-formfinal-form

Vercel deployed Next-App encountering issues: Request for a new refresh token triggers an unexpected 304 Not Modified response

For my latest project, I developed a Next.js frontend app and deployed it on Vercel, along with a Django backend app on Heroku. The authentication mechanism I used involves JWTs and a connection between the Next.js frontend and Django backend through a Nex ...

next.jsjwtvercelhttp-status-code-304

I'm unable to retrieve the information from Sanity. When trying to access the product details, I receive a 404 error

/index file/ i am encountering an issue with fetching data from sanity. Despite validating the slug and schema files, I am getting a "404 page could not be found" error when trying to access the product. Can anyone provide assistance?. import React from ...

reactjsnext.jssanity

Which is better: NextJs or just pure ReactJs?

Although I recognize the advantages of NextJs such as SSR (which supports SEO), built-in routing, and image rendering optimization, it seems that using a state management library like Redux or Thunk is still necessary for managing app-wide state. While the ...

reactjsnext.js

"Pushing elements into an array does not function properly within a promise

I'm having trouble with my code - the push method isn't working and it's not returning anything. import {nearbyUsers, getLatitude, getLongitude} from './helper' const users = [] nearbyUsers(session, getLatitude(), getLongitude()).t ...

javascriptnode.jsreactjsnext.js

The getStaticProps() function is failing to send data over to the components

I am currently learning how to use Next.js by following the guide on nextjs.org. My question is, when I use the getStaticProps function, it seems to fetch and log the data correctly inside the function. However, when I pass the data (which is the props ob ...

javascriptreactjswindowsnext.jslocalhost

Automatically open the Chackra UI accordion upon page loading

Currently, I am working on developing a side menu with accordion functionality in Nextjs. I have managed to get the index values from 0 to 1 based on the page URL, but I am facing an issue where the accordion is not opening as expected. Each time a user ...

javascriptreactjsnext.jsaccordionchakra-ui

Creating personalized Stop and Play controls for Swiper.js Autoplay feature in a React/Next project

My quest to create a Swiper in React with autoplay functionality using Swiper.js has been quite a challenge. Despite following the instructions diligently and researching extensively, I couldn't find a solution. I even tried referencing a jQuery examp ...

javascriptreactjsnext.jsswiper.js

I am seeking guidance on how to properly display the html iframe element within rich text formatting

Currently, I am going through the Strapi tutorial that covers the process of creating a blog using Nextjs with Strapi. If you are interested, you can find the tutorial here One important point mentioned in the tutorial is that a markdown package needs to ...

reactjsnext.jsmarkdownstrapimdxjs