TS `paths` config (imports with "@-paths") does not work for imports in TS workers

[CombeeMike]

Summary

I have set up my tsconfig.json with the following:

{
  "compilerOptions": {
    // ...
    "paths": { "@/*": ["./src/*"] }
  },
  // ...
}

This way I can import everything within src/... with nice absolute paths like import { format } from '@/utils/date.helpers';. I'm using this pattern throughout my app.

In the custom TS worker example, you're writing "... Yes! you can share codes between web app and the service worker! ...", but this doesn't seem to work with those @-paths.

When importing above mentioned import { format } from '@/utils/date.helpers'; in the worker I get the following error on compilation:

ERROR in ./worker/index.ts 1:0-67 Module not found: Error: Can't resolve '@/utils/date.helpers' in '/home/mike/dev/reminder-pwa/worker' resolve '@/utils/date.helpers' in '/home/mike/dev/reminder-pwa/worker'

If I change the import within the worker file to use an absolute path (e.g. ./../src/utils/date.helpers), it still errors as the imported date.helpers.ts file itself also uses those @-paths which means I'd probably need to get rid of all those @-paths in all files imported in a worker which I really don't want to...

Am I doing something wrong here or can I fix this somehow myself?

Versions

• next-pwa: 5.6.0
• next: 13.4.9

How To Reproduce

Steps to reproduce the behavior:

• Setup paths in tsconfig.json as shown described above
• Import a file using an @-path within a TS worker

Expected Behaviors

Compiles without errors

[joelpierre]

Are you passing the aliases to your next.config webpack config? I have a similar paths setup and I ensure I do that in all next projects:

// Relative to wherever this const/file lives
const aliases = {
'@/*': path.resolve(__dirname, './src'),
}

// nextConfig
webpack: (config, { isServer }) => {
...
config.resolve.alias = Object.assign(config.resolve.alias, aliases);
...
}

[CombeeMike]

@joelpierre Thanks for the input & sorry for the late response. I didn't find the time to test this earlier...

I actually did not adjust the webpack config within my next config. However, I can't get it to run with this neither as I'm always getting the following error which seems like it is still not picking up those additional alias configs in the webpack config:

ERROR in ./worker/index.ts 11:0-75
Module not found: Error: Can't resolve '@/utils/notification.utils' in '/home/mike/dev/reminder-pwa/worker'
resolve '@/utils/notification.utils' in '/home/mike/dev/reminder-pwa/worker'
  Parsed request is a module
  using description file: /home/mike/dev/reminder-pwa/package.json (relative path: ./worker)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/mike/dev/reminder-pwa/worker/node_modules doesn't exist or is not a directory
      looking for modules in /home/mike/dev/reminder-pwa/node_modules
        /home/mike/dev/reminder-pwa/node_modules/@/utils doesn't exist
      /home/mike/dev/node_modules doesn't exist or is not a directory
      /home/mike/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

I'm importing the following within worker/index.ts:

import { isReminderNotificationPayload } from '@/utils/notification.utils';

Here's my config & folder structure in detail:

• Basic folder structure:

  repo
    /src
        /utils/notification.utils.ts
    /worker/index.ts
    next.config.mjs
    tsconfig.json

• tsconfig.json:

  {
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  // ...
  }

• next.config.mjs:

  import withPWAImport from 'next-pwa';
  
  const pwaConfig = {
  dest: 'public',
  register: true,
  skipWaiting: true,
  };
  const withPWA = withPWAImport(pwaConfig);
  
  /**
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
  * This is especially useful for Docker builds.
  */
  !process.env.SKIP_ENV_VALIDATION && (await import('./src/env/server.mjs'));
  
  /** @type {import("next").NextConfig} */
  const config = {
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  webpack: config => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@/*': path.resolve(__dirname, './src'),
    };
    return config;
  },
  };
  
  export default withPWA(config);

I'd really appreciate some help with this as I'm a little stuck on what I might be doing wrong here...

Thanks!

[CombeeMike]

FYI, I bootstrapped my app with create-t3-app which might be interesting to know...