Blancer.com Tutorials and projects

I am building a iOS in-house Time Card app, and I added functionality to track user clock-in location. This will be used to just to get a basic idea of where the user clocked in.

The issue I am facing is the prompt for location access is never given to the user. Which makes the location grab always fail.

I have implemented the privacy settings for the info.plist, however, it is still not appearing.

Here is my config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.blductless.workhour" version="2.3.86" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>WorkHour</name>
    <description>Time Card App for BL Ductless</description>
    <author email="[email protected]" href="https://blductless.com">
        BL Ductless
    </author>
    <content src="index.html" />
    <access origin="https://blductless.com/*" />
    <allow-navigation href="https://blductless.com/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <preference name="AllowUniversalAccessFromFileURLs" value="true" />
    <preference name="AllowFileAccessFromFileURLs"      value="true" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="UIWebViewBounce" value="false" />
    <plugin name="cordova-plugin-fingerprint-aio" />
    <plugin name="cordova-pdf-generator" />
    <plugin name="cordova-plugin-nativegeocoder" />
    <plugin name="cordova-plugin-geolocation" />
    <platform name="ios">
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
            <string>Your location is used to track where you clock-in.</string>
          </edit-config>
          <edit-config file="*-Info.plist" mode="merge" target="NSLocationAlwaysAndWhenInUseUsageDescription">
            <string>Your location is used to track where you clock-in/work on projects.</string>
          </edit-config>

          <!-- Privacy Manifest: “Do we track users across apps or websites?” -->
          <edit-config file="*-Info.plist" mode="merge" target="NSPrivacyTracking">
            <!-- set to true only if you use IDFA or other cross‑app trackers -->
            <false/>
          </edit-config>
          <edit-config file="*-Info.plist" mode="merge" target="NSPrivacyTrackingDomains">
            <!-- list any domains involved in ad/network tracking, or leave empty -->
            <array/>
          </edit-config>

          <!-- Privacy Manifest: “Which sensitive APIs do we access?” :contentReference[oaicite:0]{index=0} -->
          <edit-config file="*-Info.plist" mode="merge" target="NSPrivacyAccessedAPITypes">
            <array>
              <dict>
                <key>NSPrivacyAccessedAPITypesIdentifier</key>
                <string>Location</string>
                <key>NSPrivacyAccessedAPITypesPurpose</key>
                <string>To confirm correct location when updating time card status (clock in, clock out, edit time card)</string>
              </dict>
            </array>
          </edit-config>

 
        <icon height="57" src="resources/ios/icon/57.png" width="57" />
        <icon height="114" src="resources/ios/icon/114.png" width="114" />
        <icon height="29" src="resources/ios/icon/29.png" width="29" />
        <icon height="58" src="resources/ios/icon/58.png" width="58" />
        <icon height="87" src="resources/ios/icon/87.png" width="87" />
        <icon height="40" src="resources/ios/icon/40.png" width="40" />
        <icon height="80" src="resources/ios/icon/80.png" width="80" />
        <icon height="50" src="resources/ios/icon/50.png" width="50" />
        <icon height="100" src="resources/ios/icon/100.png" width="100" />
        <icon height="72" src="resources/ios/icon/72.png" width="72" />
        <icon height="144" src="resources/ios/icon/144.png" width="144" />
        <icon height="76" src="resources/ios/icon/76.png" width="76" />
        <icon height="152" src="resources/ios/icon/152.png" width="152" />
        <icon height="167" src="resources/ios/icon/167.png" width="167" />
        <icon height="180" src="resources/ios/icon/180.png" width="180" />
        <icon height="60" src="resources/ios/icon/60.png" width="60" />
        <icon height="120" src="resources/ios/icon/120.png" width="120" />
        <icon height="1024" src="resources/ios/icon/1024.png" width="1024" />
    </platform>
</widget>

Am I missing something? Everything I’ve read in the documentation has shown that this is the setup required to use Geolocation in iOS (however outdated).

I have verified that the app has not previously requested for permission, in my settings it says “Allow location when prompted” which is intended behavior for a application that has not yet prompted for location use.

For reference, here is a snippet of my JavaScript clock-in functionality:

// Clock In.
        window.clockInTime = new Date();
        window.clockedIn = true;
        clockBtn.innerText = "Clock Out";
        document.getElementById("statusLabel").innerText = "Clocked In";
        window.timerInterval = setInterval(updateTimer, 1000);
        var finalAddress = "";
        navigator.geolocation.getCurrentPosition(onSuccessGetLocation, onErrorGetLocation);

        function onSuccessGetLocation(position) {
            var msg =
              'Latitude: '           + position.coords.latitude         + 'n' +
              'Longitude: '          + position.coords.longitude        + 'n' +
              'Altitude: '           + position.coords.altitude         + 'n' +
              'Accuracy: '           + position.coords.accuracy         + 'n' +
              'Altitude Accuracy: '  + position.coords.altitudeAccuracy + 'n' +
              'Heading: '            + position.coords.heading          + 'n' +
              'Speed: '              + position.coords.speed            + 'n' +
              'Timestamp: '          + position.timestamp;

              nativegeocoder.reverseGeocode(reverseLocationSuccess, reverseLocationFailure, position.coords.latitude, position.coords.longitude, { useLocale: true, maxResults: 1 });
        }


        // onError Callback receives a PositionError object
        //
        function onErrorGetLocation(error) {
          
        }

        function reverseLocationSuccess(result) {
          var firstResult = result[0] || {};
          // extract the pieces you want
          var street = firstResult.thoroughfare     || '';
          var city   = firstResult.locality         || '';
          var state  = firstResult.administrativeArea || '';

          // join them with commas, skipping any empty values
          var formattedAddress = [street, city, state]
            .filter(function(part) { return part.length; })
            .join(', ');
          finalAddress = formattedAddress;
          console.log('Formatted Address:', formattedAddress);
          fetch("redacted", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            employeeId: employee.id,
            clockInTime: window.clockInTime.toISOString(),
            projectId: projectId,
            location: finalAddress
          })
        })
          .then(r => r.json())
          .then(d => console.log("Clock in recorded:", d))
          .catch(e => console.error("Error clocking in:", e));
        }

I attempted to modify my info.plist with correct location permissions and usage descriptions, ran on real hardware, ran unit tests with a test configuration with location set to a specified entry, and switched geolocation plugins.

I tried to set my columns type for Start Date and End Date to datetime type but I always receive this error :

Invalid data table format: column #2 must be of type ‘date’.

(Where column 2 is Start Date in this case):

var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('datetime', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

I’m trying to represent our builds workflow (waiting time VS execution time) but it’s max hours, not days. I’m wondering if there a way to tweak the chart to accept a date time input and not just a date.
Thanks for the help !

I have an object taken from the DOM who’s actual offsetHeight I can not correctly get.

When trying to console.log the object to check the property, it does show the correct offsetHeight. But when I try to get the object.property, then the wrong value shows.

My code (using console.log for simplicity but using the values anywhere in a different way results in the same core problem):

function introBackgroundSize(){
    

    let endpointElement = document.querySelector("div[data-bg--intro='endhere']");
    
    console.log(endpointElement.offsetHeight); //logs 1636(px)
    console.log(endpointElement); //opening to check shows offsetHeight 912(px) (the value I need)
    console.log(endpointElement.offsetHeight); //logs 1636(px)

   
}
introBackgroundSize();

Looking for directions and possible reasons.

Tried using different values and different properties like scrollHeight and swapping around orders. But I keep receiving the wrong value.

What’s odd is that it does show the right value in the object, so it’s not like the element changes height before or after I try to get the value.

I want to display historical alert data (like timestamps, severity, action details) on a dashboard — showing how many times a rule was triggered over a time range (e.g., line/bar chart of alert frequency.

Problem:
Currently, when I query the .opendistro-alerting-alerts index, I see that each alert contains a alert_history array, but it only keeps a limited number of executions. After some time, older entries seem to be overwritten or removed. This makes it hard to reconstruct a full timeline of all past alerts.

What I want to know:
Does OpenSearch Alerting persist all triggered alert events by default?

If not, what’s the recommended approach to log each alert trigger to a custom index for long-term storage?

Can this be achieved using a Webhook destination that writes to a custom index?

I’m building a WordPress site using Elementor and would like to implement a scratch card feature similar to some digital products I’ve seen on Etsy. Here’s how the feature should work:

• A user fills out a form to customize a hidden message.
• The site generates a unique link to a scratch card page.
• The recipient clicks the link and scratches the card to reveal the hidden message.
• The link expires after 30 days (final product i bought from etsy)

Specific Implementation Questions:

• What’s the best way to implement the scratch-off effect in WordPress (ideally using Elementor-compatible tools or via shortcode)?

• Can I use a form plugin (e.g., Gravity Forms, WPForms) to collect the message and generate a custom post or link?

• How should I securely generate and store temporary URLs that expire after 30 days?

• Are there existing plugins or code snippets that can help implement the scratch interaction using canvas or JavaScript?

Any guidance on plugins, Elementor add-ons, or custom code (shortcodes, JS/CSS snippets) would be appreciated!

I’m trying to use navigator.mediaDevices to record user voice (vocab learning). However, my current problem is it always gives null data at the first time but after that it shows the local URLs and blob normally

I have been looking around for 2 days but there is no proper solution. I also looked at npm libs but they are kind of outdated (last update 2-5 years ago).

I’m using Next.js, React, TypeScript, and Tailwind CSS.

This is my code:

  const [isRecording, setIsRecording] = useState(false)
  const [recorder, setRecorder] = useState<MediaRecorder | null>(null)
  const [audioUrl, setAudioUrl] = useState<string | null>(null)
  const [audioBlob, setAudioBlob] = useState<Blob | null>(null)

const startRecording = async () => {
        setIsButtonLoading(true)
        navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
            const recorder = new MediaRecorder(stream, {
                mimeType: 'audio/webm'
            });
    
            const chunks: BlobPart[] = [];
        
            recorder.ondataavailable = (event) => {
                chunks.push(event.data);
            };
        
            recorder.onstop = () => {
                const blob = new Blob(chunks, { type: "audio/webm" });
                setAudioBlob(blob);
                const url = URL.createObjectURL(blob);
                setAudioUrl(url);
                
                setIsRecording(false);
            };
        
            recorder.start();
            setIsButtonLoading(false)
            setRecorder(recorder);
        });
    };
  
    const stopRecording = () => {
        if (recorder && recorder.state !== "inactive") {
            // Request final data before stopping
            recorder.stop();
            recorder.stream.getTracks().forEach((track) => track.stop());
            console.log("Recording stopped. Audio data:", {
                blob: audioBlob,
                url: audioUrl
            });
            setIsButtonLoading(false)
        }
    };

    useEffect(() => {
        if(isRecording) {
            startRecording()
        } else {
            stopRecording()
        }
    }, [isRecording])

// Button high-level implementation 
<button onClick = {() => setIsRecording(!isRecording)}></button>

Is there a formula using the data array that, when I change the value in the sheet, also changes the title in the data array and shows it in the table?

This code is where I set the title of the headers in the table. What I need is to connect this title of the header to the cell in the Google sheet.

  { title: "Name" },
  { title: "April-01-2025"},
  { title: "April-02-2025"},
  { title: "April-03-2025"},
  { title: "April-04-2025"},
  { title: "April-07-2025"},
  { title: "April-08-2025"},
  { title: "April-09-2025"},
  { title: "April-10-2025"},
  { title: "April-11-2025"},
  { title: "April-14-2025"},
  { title: "April-15-2025"},
  { title: "April-16-2025"},
  { title: "April-17-2025"},
  { title: "April-18-2025"},
  { title: "April-21-2025"},
  { title: "April-22-2025"},
  { title: "April-23-2025"},
  { title: "April-24-2025"},
  { title: "April-25-2025"},
  { title: "April-28-2025"},
  { title: "April-29-2025"},
  { title: "April-30-2025"},
  { title: " "},
  { title: " "},
  { title: " "},
  { title: " "},
  { title: "TOTAL"},
  { title: "Attendance"},

The Code:

Code.gs

const sid = "1J00PMoj2_lEAbRAfkkeBnAv2slAF7WxbcD8KuANMveA";
const MySheetss = SpreadsheetApp.openById(sid);
let LoginSheetSH  = MySheetss.getSheetByName("Hybrid speed"); 


/**DataTable */
function getAllDataSH() {
  var sess = getSession();
  var uid = sess.uid;
  var range = LoginSheetSH.getDataRange().getDisplayValues();
  var header = range.shift(); 
  var userData = range.filter(function(row) {
    return row[34] === uid; 
  });
  Logger.log(userData);
  return userData;
}

HTML CODE where I set the title or header of table:

Datatable.html

google.script.run.withSuccessHandler(createTable).getAllDataAtt();
      document.getElementById('resp-spinner5').classList.remove("d-none");
      document.getElementById('resp-spinner6').classList.remove("d-none");
      document.getElementById('resp-spinner7').classList.remove("d-none");
      document.getElementById('resp-spinner8').classList.remove("d-none");
      document.getElementById('resp-spinner9').classList.remove("d-none");
      document.getElementById('resp-spinner10').classList.remove("d-none");

  function createTable(dataArray) {
      $('#btn-close').click()
      $(document).ready(function(){
      document.getElementById('resp-spinner5').classList.add("d-none");
      document.getElementById('resp-spinner6').classList.add("d-none");
      document.getElementById('resp-spinner7').classList.add("d-none");
      document.getElementById('resp-spinner8').classList.add("d-none");
      document.getElementById('resp-spinner9').classList.add("d-none");
      document.getElementById('resp-spinner10').classList.add("d-none");  
      $('#data-table').DataTable({
    //data: dataArray,
      data: dataArray.slice(1),
     columns: [
      { title: "Name" },
      { title: "April-01-2025"},
      { title: "April-02-2025"},
      { title: "April-03-2025"},
      { title: "April-04-2025"},
      { title: "April-07-2025"},
      { title: "April-08-2025"},
      { title: "April-09-2025"},
      { title: "April-10-2025"},
      { title: "April-11-2025"},
      { title: "April-14-2025"},
      { title: "April-15-2025"},
      { title: "April-16-2025"},
      { title: "April-17-2025"},
      { title: "April-18-2025"},
      { title: "April-21-2025"},
      { title: "April-22-2025"},
      { title: "April-23-2025"},
      { title: "April-24-2025"},
      { title: "April-25-2025"},
      { title: "April-28-2025"},
      { title: "April-29-2025"},
      { title: "April-30-2025"},
      { title: " "},
      { title: " "},
      { title: " "},
      { title: " "},
      { title: "TOTAL"},
      { title: "Attendance"},

 
     ],

Here is the example of the sheet I am using

And the example table in app script

Thank you for your answer.

Variable declared with var and functions in script at global scope level, are a able to accessed with variable_name and window.*variable_name* .

var foo = "10";
let bar= "20";
function func(){
    
}


console.log(foo); //10
console.log(window.foo); //10

I was in an understudying on:

• var foo , the identifier foo binding is created and maintained by
  Global Execution Context > Realm > Global Environment Record ‘s Object
  Record.
• let bar , the identifier bar binding is created and maintained by
  Global Execution Context > LexicalEnvironment > Global Environment Record’s
  Declarative Record .

When JS tries to access a variable X in global code. Does is first check for its binding at Global Environment Record ‘s Object Record followed by Global Environment Record’s Declarative Record. How would JS know which record X binding is available.

I’m trying to create a two-day event where both days start at the same time but end at different times. Here are the event details:

Day 1: (Saturday) February 22, 2025, from 2:30 PM to 6:30 PM

Day 2: (Sunday) February 23, 2025, from 2:30 PM to 6:00 PM

Issue:
When I send the .ics file via email:
On the Gmail mobile app, the preview looks correct—it shows both events as expected. On Gmail in a desktop browser, the preview only shows the first event on Feb 22, and doesn’t mention the second day at all. Sample Screenshot

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
CALSCALE:GREGORIAN
BEGIN:VEVENT
LOCATION:Test Location
DESCRIPTION:Test Description
DTSTART:20250222T143000
DTEND:20250222T183000
SUMMARY:Test Summary
URL;VALUE=URI:https://test.com
DTSTAMP:20250422T123020
UID:6335d25d9ecb2c
ORGANIZER;CN=Expo Posgrados:mailto:[email protected]
END:VEVENT
BEGIN:VEVENT
LOCATION:Test Location
DESCRIPTION:Test Description
DTSTART:20250223T143000
DTEND:20250223T180000
SUMMARY:Test Summary
URL;VALUE=URI:https://test.com
DTSTAMP:20250422T123020
UID:6335d25d9ecb2c
ORGANIZER;CN=Expo Posgrados:mailto:[email protected]
END:VEVENT
END:VCALENDAR

    let teamData = {};

    if (category === "Challenger") {
      if (createTeam === false) {
        teamData = {
          team: {
            connect: { teamName: assignedTeamName },
          },
        };
      } else if (createTeam === true) {
        teamData = {
          teamName: assignedTeamName,
        };
      } else {
        teamData = {
          teamName: null,
        };
      }
    } else {
      teamData = {
        teamName: null,
      };
    }
    let roomData = {};

    if (
      (category === "Visitor" && (createRoom || (!randomRoom && roomCode))) ||
      (category === "Challenger" &&
        (createTeam === true || (createTeam === true && randomRoom === false)))
    ) {
      roomData = { roomCode: assignedRoomCode };
    } else if (category === "Challenger" && createTeam === false) {
      roomData = { room: { connect: { roomCode: assignedRoomCode } } };
    }
    // Create a new user
    const roundedTotal = Math.round(total * 10) / 10;
    console.log(assignedRoomCode);
    const user = await db.user.create({
      data: {
        name,
        lastName,
        email,
        dateBirth: formattedDate,
        phoneNumber: phoneNumber.toString(),
        location,
        category,
        ...teamData,
        withBus,
        randomRoom,
        ...roomData,
        extras: selectedExtras,
        p2pPayment,
        total: roundedTotal,
      },
    });

model User {
  id          Int      @id @default(autoincrement())
  name        String
  lastName    String
  email       String   @unique
  dateBirth   DateTime
  phoneNumber String
  location    String
  category    String
  team        Teams?   @relation(fields: [teamName], references: [teamName], onDelete: SetNull, onUpdate: Cascade)
  teamName    String?
  withBus     Boolean
  room        Rooms?   @relation(fields: [roomCode], references: [roomCode], onDelete: SetNull, onUpdate: Cascade)
  roomCode    String?
  randomRoom  Boolean?
  extras      Json
  p2pPayment  Boolean
  total       Decimal
  payed       Boolean  @default(false)

  @@index([teamName])
}

model Teams {
  id                    Int    @id @default(autoincrement())
  teamCode              String @unique
  teamName              String @unique
  teamSize              Int
  teamMembers           String
  remainingTeamCapacity Int
  members               User[]
}

model Rooms {
  id                Int     @id @default(autoincrement())
  roomCode          String  @unique
  roomType          String
  roomOwner         String
  roomParticipants  String?
  maxCapacity       Int
  remainingCapacity Int?
  members           User[]
}

when i create a team everything works fine
when i want to join a team i get this error
** Unknown argument team. Did you mean name? Available options are marked with ?.**

• if i change the user creation logic in team like that
  teamName: assignedTeamName
  in the team creation it works but in joining i get this error
  Unknown argument teamName. Available options are marked with ?.

i just want it to be fixed so who ever register can create and join a team

I’m showing a toast alert, controlling visibility with alpinejs, and want the alert to dim after a couple of seconds and be hidden after some more seconds unless the mouse hovers over it. I got the dimming working, but don’t know how to interrupt the timeout that hides the element.

        <div
        x-data="{visible: true, dimmed: false}"
        x-show="visible"
        x-effect="setTimeout(() => dimmed = true, 5000);setTimeout(() => visible = false, 10000)"
        x-on:mouseover="dimmed = false"  // <-- How can I stop the second setTimeout() here?
        x-transition.duration.500ms
        :class="dimmed ? 'opacity-60' : 'opacity-100'"
        class="flex alert alert-info justify-between">
            <div>Some message here</div>
            <div x-on:click="visible = false">
                <button class="btn btn-sm btn-square btn-info">
                    Close
                </button>
            </div>
        </div>

In js I would declare a variable for the setTimeout() and then call cancelTimeout() on that variable but I don’t know how to do this using alpine.

Additionally want to restart the setTimeout() once the mouse leaves the div. I guess this could easily be done by defining another setTimeout in x-data and then calling that @onmouseleave, but I can’t figure out how to interrupt the timeout in the first place.

I’m showing a toast alert, controlling visibility with alpinejs, and want the alert to dim after a couple of seconds and be hidden after some more seconds unless the mouse hovers over it. I got the dimming working, but don’t know how to interrupt the timeout that hides the element.

        <div
        x-data="{visible: true, dimmed: false}"
        x-show="visible"
        x-effect="setTimeout(() => dimmed = true, 5000);setTimeout(() => visible = false, 10000)"
        x-on:mouseover="dimmed = false"  // <-- How can I stop the second setTimeout() here?
        x-transition.duration.500ms
        :class="dimmed ? 'opacity-60' : 'opacity-100'"
        class="flex alert alert-info
        justify-between">
            <div>Some message here</div>
            <div x-on:click="visible = false">
                <button class="btn btn-sm btn-square btn-info">
                    Close
                </button>
            </div>
        </div>

In js I would declare a variable for the setTimeout() and then call cancelTimeout() on that variable but I don’t know how to do this using alpine.

Additionally want to restart the setTimeout() once the mouse leaves the div. I guess this could easily be done by defining another setTimeout in x-data and then calling that @onmouseleave, but I can’t figure out how to interrupt the timeout in the first place.

I Want generate my cucumber HTML Report to Gmail After Run the test while Pass the test Report Could not View Image or CSS anything it Come with only Number and Words How can I generate fancy Report to send gmail

I’m currently working on a project that involves building a chatbot.
As part of the assignment, I’ve been tasked with automating the testing process. This involves sending around 10 paraphrased versions of a single question to the chatbot and comparing the responses against the expected answer.
The goal is to generate a similarity report that shows how closely each response matches the expected answer in terms of percentage.

I’d really appreciate any suggestions or improvements you might have regarding the process, tools, or approach. Open to all feedback!

This is my esbuild.config.js:

import { glob } from "glob";
import { execSync } from "child_process";
import path from "path";

import pino from "pino";
import pinoPretty from "pino-pretty";

import esbuild from "esbuild";
import { sassPlugin as sass, postcssModules } from "esbuild-sass-plugin";

const logger = pino({ level: "trace" }, pinoPretty());
const buildMode = process.env.MODE.trim();

/** @type {string[]} glob pattern for entry points */
const entries = (await glob("./src/**/*.{ts,tsx,json,scss}")).map(entry =>
  path.resolve(import.meta.dirname, entry),
);

if (entries.length === 0) {
  logger.error("No entry points found. Please check your glob pattern.");
  process.exit(1);
}

try {
  logger.info("Generating TypeScript declaration files...");
  execSync("tsc", { stdio: "inherit" }); 
  logger.info("TypeScript declaration files generated successfully.");
} catch (error) {
  logger.error("Could not generate TypeScript declaration files!", error);
  process.exit(1);
}

logger.info("Building React components with esbuild...");

esbuild
  .build({
    entryPoints: entries,
    outbase: path.resolve(import.meta.dirname, "./src"),
    outdir: path.resolve(import.meta.dirname, "./.dist"),
    bundle: false,
    minify: buildMode === "production",
    sourcemap: true,
    format: "esm",
    target: ["esnext"],
    jsx: "automatic",
    loader: {
      ".ts": "ts",
      ".tsx": "tsx",
      ".scss": "css",
    },
    tsconfig: "./tsconfig.json",
    preserveSymlinks: true,
    plugins: [
      sass({
        transform: (source, dirname, filePath) => {
          logger.debug(`Processing SCSS file: ${path.relative("./src", filePath)}`);
          return postcssModules({
            basedir: path.resolve(import.meta.dirname, "./src"),
            scopeBehaviour: "local",
            generateScopedName:
              buildMode === "production" ? "[hash:base64:5]" : "[name]__[hash:base64:5]__[local]",
          })(source, dirname, filePath);
        },
        importMapper: givenPath => {
          const constructedPath = path.resolve(
            import.meta.dirname,
            givenPath.replace(/^@styles//, "./src/styles/"),
          );
          return constructedPath;
        },
        type: "css",
      }),
    ],
    splitting: false,
    logLevel: "info",
  })
  .then(() => {
    logger.info("Build completed successfully.");
  })
  .catch(() => process.exit(1));

My folder structure is as follows:

./src
   /components
   /hooks
   /styles

I am currently trying to create a build process for my react library, that is supposed to be used in nextjs. When I am setting bundle to true, everything works correctly, but creates a seperate bundle for every file containing all its imports… That’s not my goal. My goal is to build the component and hook files such that they do not yet contain all the code they import in the pre build step and still import it after the build process.

That’s where the problem comes in… These are the imports I get when I build the project:

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import Flap from "@components/Flap";
import Drop from "@components/Drop";
import { RelativeMouseCoordiantesContext } from "@components/RelativeMouseCoordinates";
import Tooltip from "@components/Tooltip";
import useClassName from "@hooks/useClassName";
import styles from "./Button.module.scss";

as you can see, aliases are not resolved (which works correctly when setting bundle to true.), also ./Button.module.scss is not updated, also the esbuild-sass-plugin does not create any .css files in the ./.dist directory… which also works when bundle: true.

Does anyone have an idea what is going on here?