fix: move maplibre-gl CSS to layout to fix Next.js webpack build

The maplibre-gl webpack alias in next.config.mjs was intercepting CSS
sub-path imports, causing 'Module not found' for maplibre-gl/dist/maplibre-gl.css.
Removed the alias entirely (not needed for Next.js 14) and moved the CSS
import to layout.tsx so it resolves directly from node_modules.

Also adds the prisma migration file for RouteSegment table
(20260324000000_add_route_segments).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-24 12:47:23 -07:00
parent bd3413d186
commit 611400c3d6
4 changed files with 31 additions and 10 deletions

View File

@ -1,16 +1,7 @@
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
output: 'standalone', output: 'standalone',
basePath: '/rtrips', basePath: '/rtrips',
webpack: (config) => {
config.resolve.alias['maplibre-gl'] = path.resolve(__dirname, 'node_modules/maplibre-gl/dist/maplibre-gl.js');
return config;
},
}; };
export default nextConfig; export default nextConfig;

View File

@ -0,0 +1,29 @@
-- CreateTable
CREATE TABLE "RouteSegment" (
"id" TEXT NOT NULL,
"tripId" TEXT NOT NULL,
"fromDestId" TEXT NOT NULL,
"toDestId" TEXT NOT NULL,
"profile" TEXT NOT NULL DEFAULT 'driving-car',
"distanceMeters" INTEGER,
"durationSeconds" INTEGER,
"geometry" TEXT,
"computedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
CONSTRAINT "RouteSegment_pkey" PRIMARY KEY ("id")
);
-- CreateIndex
CREATE UNIQUE INDEX "RouteSegment_tripId_fromDestId_toDestId_profile_key" ON "RouteSegment"("tripId", "fromDestId", "toDestId", "profile");
-- CreateIndex
CREATE INDEX "RouteSegment_tripId_idx" ON "RouteSegment"("tripId");
-- AddForeignKey
ALTER TABLE "RouteSegment" ADD CONSTRAINT "RouteSegment_tripId_fkey" FOREIGN KEY ("tripId") REFERENCES "Trip"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "RouteSegment" ADD CONSTRAINT "RouteSegment_fromDestId_fkey" FOREIGN KEY ("fromDestId") REFERENCES "Destination"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "RouteSegment" ADD CONSTRAINT "RouteSegment_toDestId_fkey" FOREIGN KEY ("toDestId") REFERENCES "Destination"("id") ON DELETE CASCADE ON UPDATE CASCADE;

View File

@ -1,5 +1,6 @@
import type { Metadata } from 'next' import type { Metadata } from 'next'
import { Inter } from 'next/font/google' import { Inter } from 'next/font/google'
import 'maplibre-gl/dist/maplibre-gl.css'
import './globals.css' import './globals.css'
import { AuthProvider } from '@/components/AuthProvider' import { AuthProvider } from '@/components/AuthProvider'
import { Header } from '@/components/Header' import { Header } from '@/components/Header'

View File

@ -2,7 +2,7 @@
import { useRef, useCallback, useMemo } from 'react'; import { useRef, useCallback, useMemo } from 'react';
import Map, { Marker, Source, Layer, NavigationControl } from 'react-map-gl/maplibre'; import Map, { Marker, Source, Layer, NavigationControl } from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css'; // maplibre-gl CSS is imported globally in layout.tsx
interface Destination { interface Destination {
id: string; id: string;