CivicDataLab / CivicDataLab/IDS-DRR-Frontend

Dependency upgrades

Open
#355 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

maintenance
Dominant language
TypeScript
Stars
0
Forks
1
Avg merge
6d 1h
Merged PRs (30d)
1

Description

Logging these for now, but no immediate action needed.

  • Tailwind 4 (currently 3) https://endoflife.date/tailwind-css (will eliminate tailwind.config.js)
  • Next 16 (currently 15) https://endoflife.date/nextjs
    • "next lint is deprecated and will be removed in Next.js 16." so need to run npx @next/codemod@canary next-lint-to-eslint-cli . and then migrate eslint config from package.json to eslint.config.mjs
    • Might need to opt-in to next build --webpack, since turbopack becomes the default.
      • next build --turbopack errors to move @import before @tailwind, but doing so causes Pseudo-elements like '::before' or '::after' can't be followed by selectors like 'Delim('.')'.
      • See also below.
  • next-intl 4 (currently 3)
    • Note that using next build --turbopack on version 3 causes a (ignorable) deprecation warning
  • Typescript 6 (currently 5) https://en.wikipedia.org/wiki/TypeScript#Release_history

For next-intl 4, need to change global.d.ts to:

declare module 'next-intl' {
  interface AppConfig {
    Messages: typeof import('../locales/en.json');
  }
}

Turbopack

Turbopack support depends on https://github.com/CivicDataLab/opub-mono/pull/403

Need to add to next.config.ts (and add "raw-loader" to both package.json and knip.jsonc):

  turbopack: {
    rules: {
      '*.csv': {
        loaders: ['raw-loader'],
        as: '*.js',
      },
    },
  },

And need to re-order @import as above, e.g. something like:

@layer reset, base, components, utilities, app;

@import url('opub-ui/dist/assets/styles.css') layer(base);
@import url('./tokens/_variables.css');
@import url('nprogress/nprogress.css') layer(app);

@tailwind base;
@tailwind components;
@tailwind utilities;

And need to configure this postcss plugin in package.json (and add to devDependencies):

"postcss-import": { "path": ["node_modules"] }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the dependency checklist and the affected package.json, next.config.ts, global.d.ts, and stylesheet imports first. The migration includes the listed Tailwind, Next, next-intl, and TypeScript upgrades, plus the stated ESLint and Turbopack configuration changes. Done means the upgrades and required configuration are applied without the documented build and migration issues.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, tailwindcss, typescript
Domain
build-system, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.