https://i.sstatic.net/pvyUf.png
I've attempted to implement the solution found here but unfortunately, it's still not working for me.
Below are my configuration files:
remix.config.ts:
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
postcss: true,
tailwind: true,
}
tailwind.config.ts
import type { Config } from 'tailwindcss'
export default {
content: ['./app/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
My current setup involves using Remix version 2.3, and here is a glimpse of my tsconfig.json file:
{
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"resolveJsonModule": true,
"module": "ES2022",
"moduleResolution": "Bundler",
"baseUrl": ".",
"noEmit": true,
"paths": {
"~/*": ["./app/*"]
}
}
}
It's imperative to ensure you include the <code>ModuleModuleResolution functionalities in your configuration.
After delving into the Remix documentation, I stumbled upon a valuable piece of information that not only assisted me but could also benefit others facing similar challenges.
The documentation highlights the importance of bundling CSS files from node_modules packages into the project build. To achieve this, an additional line must be inserted into the remix.config.js file:
/** @type {import('@remix-run/dev').AppConfig} */
export default {
serverDependenciesToBundle: [
/^tailwindcss/,
/^swiper/, // Specifically in my scenario
],
//...other settings
};
This simple tweak effectively resolved the issue at hand for me.
These are some example configurations, but make sure to provide your versions and other configurations to clarify.
Note: I do not have tailwind: true in my remix.config.cjs
I suspect the issue may be related to using CJS imports in ESM types.
Please take note - this is written in ESM (not CommonJS) style and the package.json also includes the module type.
postcss.config.js
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const __dirname = dirname(fileURLToPath(import.meta.url));
export default {
plugins: {
'postcss-import': {},
tailwindcss: {
config: __dirname + '/tailwind.config.ts',
},
autoprefixer: {},
},
};
tailwind.config.ts
import type { Config } from 'tailwindcss';
...
// just variables/functions/etc
remix.config.cjs
const isProd = process.env.NODE_ENV === 'production';
/** @type {import('@remix-run/dev').AppConfig} */
const config = {
postcss: true,
ignoredRouteFiles: ['**/.*'],
serverMinify: isProd,
appDirectory: 'src',
browserNodeBuiltinsPolyfill: { modules: { process: true } },
serverDependenciesToBundle: [
'remix-utils/client-only',
'axios',
],
routes(defineRoutes) {
return defineRoutes((route) => {
...
});
},
};
module.exports = config;
Currently, I am facing an issue in my Angular project where subscribing the data to an observable is returning undefined. I have a service method in place that retrieves data from an HTTP request. public fetchData(): Observable<Data[]> { const url = ...
While working with Typescript and firebase-admin for firebase cloud functions, I encountered the error message "Cannot find module 'firebase-admin/app'" when compiling the code with TS. Tried solutions: Reinstalling Dependency Deleting node_modu ...
In my specific case, I believe the error I am encountering may have a different root cause than the common solutions found for it. Configuration-related issues could be at play. Here is the code snippet: export default { data() { return { asy ...
I am facing a challenge in creating an interactive component for language switching on my website and storing the selected language in cookies. The issue arises from the fact that Next.js does not support reactive hooks for server-side components, which ar ...
I am in the process of developing a package for npm and I would like it to be imported in the following manner: import myPackage from 'my-package'; import { subFunction1, subFunction2 } from 'my-package/subfunctions'; Upon trying to u ...
Here is a scenario: const obj1 = { a: 'x', b: 'y', c: 'z', } I am looking to automatically create a type like this: type Type = { x: number, y: number, z: number, } I initially considered the following approach: ...
I am faced with the following scenario: public async handle( handler: WorkflowHandlerOption, payload: <how_to_type_it?>, ): Promise<StepResponseInterface> { switch (handler) { case WorkflowHandlerOption.JOB_APPLICATION_ACT ...
Currently in my interface, I am attempting to implement a filter for the FOLDER column. This filter is supposed to retrieve data from the database and present it in a dropdown checkbox within that column. The filtering should be based on the selected data. ...
I am trying to create a Netflix-inspired website using next.js. I am able to fetch movie data from TMDB using getServerSideProps(). While everything works as expected in development mode, once deployed on Vercel (re-deployed multiple times), the props I re ...
I have developed a function that scales down the font size until the text width is smaller than the canvas width. This text is then added to a canvas containing a QR code. Subsequently, this canvas is included in a PDF file. The issue I am encountering i ...
One of my functions involves taking a map and generating the bijection of that map: export function createBijection(map) { const bijection = {}; Object.keys(map).forEach(key => { bijection[key] = map[key]; bijection[map[key]] = key; }); ...
What does the ?: and <I extends any[] = any[]> signify in this context, and how is it utilized? export interface QueryConfig<I extends any[] = any[]> { name?: string; text: string; values?: I; types?: CustomTypesConfig; } ...
Currently, I am working on developing an API in Typescript to interact with a Google Cloud Datastore instance for storing and retrieving entities. So far, I have successfully implemented the GET, POST, and DELETE methods. However, I encountered an issue w ...
I am currently utilizing chart.js within an Angular 8 environment using Primeng. I am looking to customize the options for my chart as follows: For the y-axis ticks, set textDirection to 'ltr' For the x-axis ticks, set textDirection to 'rtl ...
Exploring the world of AngularJS2, I recently created a sign-up page utilizing formGroup formControlName, but encountered an issue with passing null values to the object. HTML code: <div class="col-md-8 col-md-offset-2"> <form [formGroup]="m ...
Is there a way to import just one function from lodash? I attempted it like this: import get from 'lodash/get'; Even after installing both lodash and @types/lodash, I encountered the following error message: @types/lodash/get/index"' ha ...
Given type UnionType = 'prop1' | 'prop2' | 'prop3'; type DerivedType = { prop1: string; prop2: number; prop3: boolean; }; Is there a method to define DerivedType in such a way that if I introduce a new member to UnionT ...
I have a working method that functions as intended: getdata(): Promise<any> { let query = `SELECT * FROM table`; return new Promise((resolve, reject) => { this.db.query(query, (error, rows) => { if(error) reject(error); ...
I have several variables within the html of this component that are assigned their values by the typescript file. The declaration in the html is as follows: <h1>{{myproperty1}}<\h1> <h1>{{myproperty2}}<\h1> <h1>{{myp ...
Running a simple store interface CartState { cart: { [id: string]: CartDto }; addItem: ({ id, image, name, price }: Omit<CartDto, "quantity">) => void; removeItem: (id: string) => void; reset: () => void; } export const use ...