My current project involves utilizing NextJS and TailwindCSS. I am looking to transition it to a static format for hosting on an apache server. However, whenever I attempt the "next build" command, I encounter the following errors:
(I have confirmed that useContext is not used in my .tsx files)
next.config:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export'
};
export default nextConfig;
Repository: Github Link
My contributions to the project on Github have resulted in successful builds after making three key changes:
output: 'export' to the next config, a modification not present in the repository.src/app/page.tsx, I adjusted the casing in the import statement for the Intro component to: import Intro from "@/components/Intro";"moduleResolution": "node",Upon completion, the build yielded the following results:
$ npm run build
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4849b8680929b989d9bb4c4dac5dac4">[email protected]</a> build
> next build
▲ Next.js 14.2.14
Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (4/4)
✓ Collecting build traces
✓ Finalizing page optimization
Route (app) Size First Load JS
┌ ○ / 29.6 kB 117 kB
└ ○ /_not-found 875 B 88.2 kB
+ First Load JS shared by all 87.3 kB
├ chunks/117-9c48060295ddae61.js 31.7 kB
├ chunks/fd9d1056-5af6eea51486f846.js 53.7 kB
└ other shared chunks (total) 1.95 kB
○ (Static) prerendered as static content
Hey there, I'm working with a string: "BALCONI \n\n\t\t\t\t10-pack MixMax chocolade cakejes" and trying to tidy it up by removing unnecessary tabs and new lines. I attempted using .replace(/(\n\t)/g, '&apo ...
I am currently developing a citizenNumber component for use in forms. This component implements ControlValueAccessor to work with ngModel. export class CitizenNumberComponent implements ControlValueAccessor { private _value: string; @Input() place ...
Trying to convert an Observable<Array<ISource>> to an Observable<ISource>. To accomplish this: this.sources$ = this.store$ .select(fromRoot.getSourceEntities) .map(sourceEntities => { return sourceEntities .filt ...
Trying to implement ESLint in my React project to specifically target a single rule, such as max-len, with the following command: eslint . --ext .js,.jsx,.ts,.tsx --rule "{'max-len': ['error', { code: 120, ignoreComments: true, ign ...
Error message details: "The type 'Observable' is not compatible with the type 'DataListeItem[]'. The 'includes' property is missing in the 'Observable' type." I am currently using the Material Table Schematic an ...
After following a tutorial on passing async data to Angular 2 child components, specifically using solution number 2, I attempted to implement the method as shown below: Code snippet from parent component ts : ngOnInit() { this.route.queryParams.subs ...
I have a service that connects to a backend API and receives data in the form of comma-separated lines of text. These lines represent attributes in a TypeScript class I've defined called TopTalker: export class TopTalker { constructor( pu ...
Let's say I have a custom interface called MyInterface Is there a built-in method in TypeScript that allows checking if an object adheres to the MyInterface ? Something similar to using instanceof but for interfaces instead of classes. ...
When it comes to the form, its purpose is to send data fetched from another API along with an additional note. The fetched data was successfully received, as I confirmed by logging it to the console. It seems that the form is able to send both the fetche ...
I've hit a roadblock while trying to call the API to fetch paginated data for viewing and non-paginated data for exporting as CSV Here's how Redux Saga is implemented: function* exportsearchPaymentRequests({ payload, type }: { payload: any ...
I have a basic library file that encapsulates some redis features: import Redis from 'ioredis' // Setting TTL to expire after an hour const TTL = 3600 console.log('Performing operations in redis.ts') const client = new Redis(process.e ...
I am currently working on a project with the latest version of Next.js, specifically Next.js 13, and I have organized my app directory structure accordingly. Within the app/sample directory, I have implemented custom error handling by creating pages named ...
Background I recently undertook the task of converting a create-react-app application to nextjs. Most of my effort has been focused on ensuring that all existing components are compatible with server-side rendering. During this process, I encountered an ...
I am attempting to write the specifications for a function that can take records of any structure and convert the values into a discriminated union. For example: const getKeys = <T extends {key: string}>(items: T[]): T['key'] => { // ...
Currently in the process of developing a React application utilizing TypeScript, I have incorporated the React-Toastify library to handle notifications. However, encountering some challenges with the styling of the ToastContainer component. Specifically, ...
I am currently working with a nebular stepper component and I have implemented lazy loading for the final step. Within this component, there is a need to target an element by its id and make some modifications to it. Below is the structure of the stepper ...
I keep encountering this error message. The issue arises as I utilize js-cookie to retrieve cookies ...
I am looking to add a special touch to my website by showcasing a code segment with the Typewriter effect. I want this code block not only displayed but also "typed" out when the page loads. Unfortunately, I have been unable to find a suitable solution s ...
How do I troubleshoot this Error: src/app/metronic/orderByLocation/locationsByOneOrder/locationsByOneOrder.component.ts:7:25 - error TS2307: Cannot find module '@angular/router/src/utils/collection' or its corresponding type declarations.m 7 imp ...
Struggling to display images using Next.js, even though the src is correct. The documentation suggests using a loader function to resolve this issue, but it's not working. const PhotographerCard = (props) => { const loader = ({ src }) => { ...