Vite with swc works locally, but production build in CI fails

[coreylight]

I'm sure this is a misconfiguration on my end, but I can't figure out why or where.

I have this vite config:

import { lingui } from '@lingui/vite-plugin';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { defineConfig } from 'vite';
import istanbul from 'vite-plugin-istanbul';
import tsconfigPaths from 'vite-tsconfig-paths';

const toPath = (_path): string => path.join(process.cwd(), _path);

export default defineConfig({
  build: {
    outDir: '../build-vite',
    sourcemap: !process.env.NO_SOURCEMAPS,
  },
  root: 'src',
  publicDir: '../public',
  logLevel: 'info',
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      plugins: [['@lingui/swc-plugin', {}]],
    }),
    lingui(),
    tsconfigPaths(),
    vanillaExtractPlugin() as any,
    istanbul(),
  ].filter(Boolean),
  resolve: {
    alias: {
      '@env': toPath('src/utils/env/vite'),
    },
  },
  define: {
    'process.env': {
      EMOTION_ENABLE_LABELS: JSON.parse(
        process.env.EMOTION_ENABLE_LABELS || 'false'
      ),
      EMOTION_WARN_UNSAFE_SELECTOR: JSON.parse(
        process.env.EMOTION_WARN_UNSAFE_SELECTOR || 'false'
      ),
    },
  },
});

Here are my versions:

└─ @lingui/swc-plugin@4.0.4
└─ @lingui/macro@4.4.0
└─ @swc/core@1.3.75
└─ @vitejs/plugin-react-swc@3.3.2
└─ vite@4.4.9

Here is my lingui.config.ts:

import type { LinguiConfig } from '@lingui/conf';

const config: LinguiConfig = {
  locales: ['en', 'cs', 'fr', 'sp'],
  catalogs: [
    {
      path: '<rootDir>/src/locales/{locale}',
      include: ['src'],
    },
  ],
  fallbackLocales: {
    default: 'cs',
  },
};

export default config;

My local machine info:

  System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Max
    Memory: 4.36 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/opt/node@18/bin/npm
    pnpm: 8.6.12 - ~/Library/pnpm/pnpm
  Managers:
    Cargo: 1.68.2 - ~/.cargo/bin/cargo
    Homebrew: 4.1.5 - /opt/homebrew/bin/brew
    pip3: 22.0.4 - /Library/Frameworks/Python.framework/Versions/3.9/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 14.0.3 - /usr/bin/gcc
    Git: 2.39.2 - /usr/bin/git
    Clang: 14.0.3 - /usr/bin/clang
    FFmpeg: 6.0 - /opt/homebrew/bin/ffmpeg
    Curl: 7.88.1 - /usr/bin/curl
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.30.3 - /usr/bin/perl
    Python3: 3.9.13 - /Library/Frameworks/Python.framework/Versions/3.9/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
    Rust: 1.68.2 - /Users/coreylight/.cargo/bin/rustc

CI env info:

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 AMD EPYC 7763 64-Core Processor
    Memory: 30.09 GB / 31.34 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.17.1 - /opt/hostedtoolcache/node/18.17.1/x64/bin/node
    Yarn: 1.22.[19](https://github.com/masterysystems/mastery-frontend/actions/runs/6102949127/job/16562467313?pr=16579#step:4:19) - /usr/local/bin/yarn
    npm: 9.6.7 - /opt/hostedtoolcache/node/18.17.1/x64/bin/npm
  Managers:
    Apt: 2.0.9 - /usr/bin/apt
    Cargo: 1.71.1 - ~/.cargo/bin/cargo
    Composer: 2.5.8 - /usr/bin/composer
    Gradle: 8.3 - /usr/bin/gradle
    Maven: 3.8.8 - /usr/bin/mvn
    pip3: [20](https://github.com/masterysystems/mastery-frontend/actions/runs/6102949127/job/16562467313?pr=16579#step:4:20).0.2 - /usr/bin/pip3
    RubyGems: 3.1.2 - /usr/bin/gem
  Utilities:
    Bazel: 6.3.2 - /usr/local/bin/bazel
    CMake: 3.27.3 - /usr/local/bin/cmake
    Make: 4.2.1 - /usr/bin/make
    GCC: 9.4.0 - /usr/bin/gcc
    Git: 2.41.0 - /usr/bin/git
    Clang: 11.0.0 - /usr/bin/clang
    Curl: 7.68.0 - /usr/bin/curl
  Servers:
    Nginx: 1.18.0 - /usr/sbin/nginx
  Virtualization:
    Docker: [24](https://github.com/masterysystems/mastery-frontend/actions/runs/6102949127/job/16562467313?pr=16579#step:4:24).0.5 - /usr/bin/docker
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
    Go: 1.20.7 - /usr/bin/go
    Java: 11.0.20 - /usr/bin/javac
    Perl: 5.[30](https://github.com/masterysystems/mastery-frontend/actions/runs/6102949127/job/16562467313?pr=16579#step:4:30).0 - /usr/bin/perl
    PHP: 8.2.9 - /usr/bin/php
    Python: 3.8.10 - /usr/bin/python
    Python3: 3.8.10 - /usr/bin/python3
    R: 4.3.1 - /usr/bin/R
    Ruby: 2.7.0 - /usr/bin/ruby
    Rust: 1.71.1 - /home/runner/.cargo/bin/rustc

Thing is - this setup works well locally, I'm getting the features that lingui describes.
But when I push this to CI, I'm getting this error message:

[commonjs--resolver] The macro you imported from "@lingui/macro" is being executed outside the context of compilation.
This indicates that you don't have the "babel-plugin-macros" or "@lingui/swc-plugin" configured correctly. Please see the documentation for how to configure Vite with Lingui correctly:

What could be different about CI runs? Or how vite/rollup behaves there? 🤔 How else can I troubleshoot the difference?
Help appreciated! ❤️

[timofei-iatsenko]

The configs look fine. That warning means the code was not processed by swc-plugin and macro expressions left as is.

I know that @vitejs/plugin-react-swc works a bit differently between dev / prod builds. That stated in theirs docs. AFAIK they don't use SWC in production, instead use only esbuild. But, when you pass a plugin array, it should start using SWC all the time.

Did you try to run a production build locally?

I also would check do you have package.lock / yarn.lock in the project.

[coreylight]

Hey @thekip
Yes the odd thing is that my build works locally when I run vite build --mode production
Additionally I can run the build correctly in a docker container with ubuntu, same as my github action.
I have been pretty stumped on this. From all of my investigation, it looks like swc isn't running the plugin for some reason, or lingui swc plugin is bailing silently somehow.
I'm trying to get a public reproduction but if you have any ideas on why it would behave differently, I'd love to hear it. Thanks!

[timofei-iatsenko]

Unfortunately i have no idea.

swc isn't running the plugin for some reason, or lingui swc plugin is bailing silently somehow.

That's hardly possible. If there is an error in a plugin SWC will "panic" right away.

Maybe some special env variables which exists in CI setup and not presented during local builds? May be @vitejs/plugin-react-swc' react on them and change the logic?

[coreylight]

@thekip I finally found my particular issue.
Reproduced here:
https://github.com/coreylight/vite-swc-test/actions/runs/6226854502/job/16900256768#step:6:16
In my projects' setup I have the --ignore-optional flag on the yarn install. This was somehow causing a silent error within the swc + plugins setup (nothing to do with vite nor lingui).
I'll probably create an issue with swc. This was very frustrating to track down 😞
Thanks for the discussion!