How to change antd theme in Vite config? - reactjs

It is a project composed of Vite & React & antd.
I want to handle antd theme dynamically in vite.config.ts.
I would appreciate it if you could tell me how to modify less.modifyVars value in React component.
This is the current screen.
light state /
dark state
In dark mode, the style of the select component does not work properly.
import { getThemeVariables } from 'antd/dist/theme'
...
css: {
modules: {
localsConvention: 'camelCaseOnly'
},
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
...getThemeVariables({
dark: true // dynamic
})
}
}
}
}
}

You need to import 'antd/dist/antd.less' instead of 'antd/dist/antd.css'
Install dependency for less npm add -D less. Vite will automatically catch it.
Use the following config:
css: {
preprocessorOptions:{
less: {
modifyVars: {
'primary-color': '#1DA57A',
'heading-color': '#f00',
},
javascriptEnabled: true,
},
},
},

It's been a while, but this is works for me now:
You need to make sure you import less on demand. I use plugin vite-plugin-imp to achieve. And then getThemeVariables should be work well.
import vitePluginImp from 'vite-plugin-imp';
import { getThemeVariables } from 'antd/dist/theme';
export default defineConfig({
plugins: [
// ...
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
},
],
}),
],
resolve: {
alias: [
// { find: '#', replacement: path.resolve(__dirname, 'src') },
// fix less import by: #import ~
// https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
{ find: /^~/, replacement: '' },
],
},
css: {
preprocessorOptions: {
less: {
// modifyVars: { 'primary-color': '#13c2c2' },
modifyVars: getThemeVariables({
dark: true,
// compact: true,
}),
javascriptEnabled: true,
},
},
},
});
Moreover: you can get more inspiration from here: vite-react/vite.config.ts

Related

MFE module federation cannot find module for remote child import

Im trying to build out a micro frontend for the first time so my main application can support a sub application. I have it all working when everything is just rendering App.tsx (remote) but as soon as I try and render a child within the remote application I get the Cannot find module error from webpack
Container craco.congig.js
/* eslint-disable #typescript-eslint/no-var-requires */
const CracoEsbuildPlugin = require('craco-esbuild');
const { ModuleFederationPlugin } = require("webpack").container;
const deps = require("./package.json").dependencies;
module.exports = {
webpack: {
plugins: {
add: [
new ModuleFederationPlugin({
name: "Dashboard",
remotes: {
DigitalCanopy: "DigitalCanopy#//localhost:3001/remoteEntry.js",
},
shared: {
react: {
singleton: true,
strictVersion: true,
requiredVersion: deps['react']
},
"react-dom": {
singleton: true,
strictVersion: true,
requiredVersion: deps['react-dom']
},
},
}),
],
},
...
My remote craco.config.js
/* eslint-disable #typescript-eslint/no-var-requires */
const CracoEsbuildPlugin = require('craco-esbuild');
const { ModuleFederationPlugin } = require("webpack").container;
const deps = require("./package.json").dependencies;
module.exports = {
devServer: {
port: 3001
},
webpack: {
plugins: {
add: [
new ModuleFederationPlugin({
name: "DigitalCanopy",
exposes: {
"./DigitalCanopy": "./src/App.tsx",
},
filename: "remoteEntry.js",
shared: {
react: { singleton: true },
"react-dom": { singleton: true },
},
}),
],
},
configure: (webpackConfig) => ({
...webpackConfig,
output: {
...webpackConfig.output,
publicPath: "auto",
},
}),
},
plugins: [
{
plugin: CracoEsbuildPlugin,
options: {
esbuildLoaderOptions: {
// Optional. Defaults to auto-detect loader.
loader: 'tsx', // Set the value to 'tsx' if you use typescript
target: 'es2018',
},
esbuildMinimizerOptions: {
target: 'es2018',
css: true, // if true, OptimizeCssAssetsWebpackPlugin will also be replaced by esbuild.
},
skipEsbuildJest: false, // Optional. Set to true if you want to use babel for jest tests,
esbuildJestOptions: {
loaders: {
'.ts': 'ts',
'.tsx': 'tsx',
},
},
},
},
],
};
My remote App.tsx
import { createTheme, ThemeProvider } from '#mui/material';
import React from 'react';
import './App.css';
import App1 from './App1';
const baseTheme = createTheme({
...MUI THEME STUFF
});
function App() {
return (
<ThemeProvider theme={baseTheme}>
<div className="App">Digital Canopy App</div>;
<App1 />
</ThemeProvider>
);
}
export default App;
This works and renders fine until I try and render <App1 />
Then I get this error Module not found: Error: Can't resolve './App1' in ...
Any ideas? I feel like this should just work. Importing children components from within the remote is pretty standard doesnt seem unique but I cannot find anything similar online which makes me think Im missing something obvious.
Thanks for the help
My issue was I was missing the .tsx extension on the import. I have no idea why that is required by the sub application. My build configs are identical for typescript and my main app does not require that. I'll dig in and try and figure out why

Cannot convert lodash library from CommonJS to ES in Vitejs

I am building a project using Vite + React + Antd.
My project has lodash library, when i build with vite build command then get an error like below:
Running on environment production
vite v2.9.9 building for production...
transforming (2741) node_modules\.pnpm\lodash#4.17.21\node_modules\lodash\isLength.jsUnexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000cross-fetch?commonjs-proxy"
error during build:
Error: Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000cross-fetch?commonjs-proxy"
In my vite.config.js file, I added #rollup/plugin-commonjs,
import commonjs from '#rollup/plugin-commonjs';
import react from '#vitejs/plugin-react';
import { defineConfig, loadEnv } from 'vite';
export default ({ mode }) => {
const env = loadEnv(mode, 'env');
const htmlPlugin = () => {
return {
name: 'html-transform',
// Replace %VITE_X% env variables in index.html.
transformIndexHtml(html: string) {
return html.replace(/%(.*?)%/g, function match(_match, p1) {
return env[p1];
});
},
};
};
return defineConfig({
resolve: {
alias: [
{ find: /^~/, replacement: '' },
{ find: 'react/jsx-runtime', replacement: 'react/jsx-runtime.js' },
],
},
define: {
'process.env': process.env,
},
build: {
outDir: './build',
rollupOptions: {
plugins: [commonjs()],
},
commonjsOptions: {
exclude: [/./],
},
},
publicDir: './public',
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
optimizeDeps: {
include: ['#ant-design/icons'],
},
plugins: [
htmlPlugin(),
react({
babel: {
plugins: [['#babel/plugin-transform-react-jsx', { runtime: 'automatic' }]],
},
}),
],
});
};
I tried to change lodash into lodash-es, but in my node_modules has a couple of libraries use it.
Please help me. Thank all

Use variables declared in the webpack config inside js file

I have added some varaibles inside my webpack.config.js file like this
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
{
test: lessRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
javascriptEnabled: true
},
'less-loader',
{
javascriptEnabled: true,
modifyVars: { '#primary-color': '#5cb885','#secondary-color':'#2e3456' }
}
)
}
]
}
so in css file i can use them via
index.less
.mainText {
line-height: 1.5;
font-size: 32px;
color: #primary-color;
}
But how can i use this variable in my jsx file if suppose i want to give inline styling for any element ?
In your webpack file you can declare any variable like this ->
module.exports = {
externals: {
'config': JSON.stringify({ EXP_TIME: new Date() })
},
modules : [...],
Then in any JS file you can simply import like this ->
var config = require('config')
var tokenExpTime = config.EXP_TIME
console.log(tokenExpTime) //Will print current date and time
Hope you got the point now. :)

Getting an error when run "vite preview" (use Vite + React + Antd)

I am building a library with vite, react and ant design.
The build command vite build runs fine without warnings, but when I run vite preview command, then I give an error. I do not know why this is happening.
[![enter image description here][1]][1]
index.b71761d7.js:4879 TypeError: jsxDevRuntime.exports.jsxDEV is not a function
at Provider (index.b71761d7.js:31334:48)
at Ch (index.b71761d7.js:3752:8)
at ck (index.b71761d7.js:6267:12)
at bk (index.b71761d7.js:5797:12)
at ak (index.b71761d7.js:5790:5)
at Tj (index.b71761d7.js:5773:7)
at Lj (index.b71761d7.js:5541:26)
at Jg (index.b71761d7.js:5389:52)
at lk (index.b71761d7.js:6631:3)
at index.b71761d7.js:6719:7
Please help me, thank you very much!
This is my vite.config.js file
import { defineConfig, loadEnv } from 'vite';
import react from '#vitejs/plugin-react';
export default ({ mode }) => {
// Load app-level env vars to node-level env vars.
console.log('Running on environment ' + mode);
process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
return defineConfig({
plugins: [
react({
babel: {
plugins: [['#babel/plugin-transform-react-jsx', { runtime: 'automatic' }]],
},
}),
],
resolve: {
alias: [{ find: /^~/, replacement: '' }],
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
// 'primary-color': '#282F7E',
'primary-color': '#F58220',
// 'text-color': '#282F7E',
'btn-border-radius-base': '6px',
'btn-border-radius-sm': '6px',
'control-border-radius': '6px',
'tag-border-radius': '6px',
dark: true,
compact: true,
},
javascriptEnabled: true,
},
},
},
optimizeDeps: {
include: ['#ant-design/icons'],
},
server: {
port: 3711,
},
preview: {
port: 8711,
},
build: {
chunkSizeWarningLimit: 1000,
outDir: 'build',
},
});
};
[1]: https://i.stack.imgur.com/gw1Wf.png

Minify result of TailwindCSS buid, PostCSS

I have a project using ReactJS, Webpack, TailwindCSS, and when I run the build command, the CSS file built is TOO BIG:
Here is my postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss,
require("autoprefixer"),
require("cssnano")({
preset: "default",
}),
],
};
And here is my tailwind.config.js:
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx,vue}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
greenLight: "#1db954",
greyDark: "#121212",
greyLight: "#282828",
greyLighter: "#282828",
backgroundLight: "rgba(40,40,40,0.4)",
},
fontFamily: {
custom: ["Circular Spotify Tx T Black"],
},
container: {
screens: {
mobile: "23rem",
},
},
},
},
variants: {
extend: {},
},
plugins: [],
};
And this is ```webpack.config.js
I have searched a lot, but can not figure it out! Thanks.

Resources