Shoutout to itxch over on GitHub for helping me with the integration of Vite, Remix, and NX.
Currently facing an error that reads:
Error when evaluating SSR module /@fs/Users/joseasilis/Documents/programming/alertdown/nx/nx-remix-vite/libs/ui/src/templates/AuthForm/index.tsx: failed to import "@lingui/macro"
|- file:///Users/joseasilis/Documents/programming/alertdown/nx/nx-remix-vite/node_modules/@lingui/macro/dist/index.mjs:1
import { createMacro } from 'babel-plugin-macros';
^^^^^^^^^^^
SyntaxError: Named export 'createMacro' not found. The requested module 'babel-plugin-macros' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'babel-plugin-macros';
const { createMacro } = pkg;
I've attempted manually going into the index.js file within node_modules to destructure it to commonjs format:
const { createMacro } from 'babel-plugin-macros';
However, this method did not resolve the issue.
Included below is my vite.config.ts file:
/// <reference types='vitest' />
import { defineConfig } from 'vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { vitePlugin as remix } from '@remix-run/dev';
import { expressDevServer } from 'remix-express-dev-server';
import { denyImports } from 'vite-env-only';
import { lingui } from '@lingui/vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
root: __dirname,
cacheDir: '../../node_modules/.vite/apps/alertdown-vite',
plugins: [
expressDevServer(),
denyImports({}),
remix(),
lingui({
// This is needed for lingui to pickup the config
cwd: __dirname,
}),
nxViteTsPaths(),
],
test: {
setupFiles: ['test-setup.ts'],
watch: false,
globals: true,
environment: 'jsdom',
include: ['./tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
reporters: ['default'],
coverage: {
reportsDirectory: '../../coverage/apps/alertdown',
provider: 'v8',
},
},
});
My main package.json details are as follows:
{
"name": "@alertdown/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"dev": "nx dev @alertdown/app",
"gen": "nx g @nx/js:lib",
"reset": "nx reset"
},
"private": true,
...
...
}
Any suggestions or solutions to tackle this problem?