Category: javascript

Category Added in a WPeMatico Campaign

Package does not provide default export

I am using an npm package in my test project, and it complains that caught SyntaxError: The requested module '/@fs/Users/package/module/index.js' does not provide an export named 'default' when using vite to build the project, but with webpack everything works just fine.

my tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

and vite config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Having difficulty importing emscripten wasm c++ class into svelte component

I’ve been trying to use my c++ class in my svelte component, and been beating my head against the screen for the past week trying to figure out how to do this. I’m comfortable in c++ but not so much in JS, which I suspect is part of the issue.
My c++ code is :

#include <emscripten/emscripten.h>
#include <emscripten/val.h>
#include <emscripten/bind.h>

using namespace emscripten;
using emscripten::val;
using namespace std;
thread_local const val document = val::global("document");

class MyClass{
  private :
  val canvas;
  val ctx;
  public :
MyClass(std::string id){
  canvas = val::global("document").call<val>("getElementById", val(id));
  ctx = canvas.call<val>("getContext", val("2d") );}

void greenRect(){
   emscripten_run_script("alert('greenrect')");
   ctx.set("fillStyle", "green");
   ctx.call<void>("fillRect", 10, 10, 150, 100);
 }
 ~MyClass(){}};

  EMSCRIPTEN_BINDINGS(MyClassModule) {
   class_<MyClass>("MyClass")
     .constructor< std::string>()
     .function("greenRect", &MyClass::greenRect)
     ;}

In this example my life would probably be easier if I just switched to a C++ function rather than a class, but I would like to keep it as a class unless this is completely non-viable (which it shouldn’t be).
My current invocation of the compiler is em++ -s ALLOW_MEMORY_GROWTH=1 -lembind -s USE_SDL=2 -s ENVIRONMENT='web' -s SINGLE_FILE=1 chart.cpp -o glue.js

The script portion of the App.svelte component is

  import { onMount } from "svelte";
  import { MyClass } from "../em/glue.js";
  onMount(async () => {
    alert("pre");
    const chart = new Module.MyClass("canvas0");
    alert("post");
    chart.greenRect();
  });

I get the “pre” popup but never the “post” popup.

I’ve tried several variations on the import statement with import MyClass from 'glue.js', <script src ="glue.js"> in the svelte:header section. I’ve also tried a variety of CLI options including-s MODULARIZE=1, -s EXPORT_ES6=1,-s EXPORT_ALL=1, -s WASM=1 none of which seem to fix this issue.

The problem is that I keep getting errors in the browser
import { MyClass } from 'glue.js' -> “Uncaught SyntaxError: ambiguous indirect export: MyClass”
import * as MyClass from 'glue.js' -> Uncaught (in promise) TypeError: Module.MyClass is not a constructor
import MyClass from 'glue.js' -> Uncaught SyntaxError: ambiguous indirect export: default
I’ve also changed the const chart = new MyClass("canvas0") to const chart = new Module.MyClass("canvas0"); and const chart = new MyClass.MyClass("canvas0");

Yup, JS is not my strong point and I’m admittedly just throwing stuff at the wall to see what sticks.

If someone could point me in the right direction I’d really appreciate it. I tried to get chatGPT and Bard to fix the issue and have come away feeling confident that coders’ jobs are secure for the foreseeable future.

I appreciate any help you can give.
Thanks

Run forEach in order of value inside of loop

I have a forEach loop that calls a function for each element in the loop. One of the elements is an element called index that has values as such:

"fields": [
                {
                    "label": "ID",
                    "index": 0.0
                },
                {
                    "label": "field 1",
                    "index": 1.0
                },
                {
                    "label": "field 2",
                    "index": 2.0
                },
                {
                    "label": "field 3",
                    "index": 2.7
                }
]

My Code:

const func2 = (result) => {
  result.data.fields.forEach((d) => {
    otherFunc(d.label);
  });
});

const otherFunc = (d) => //do something

As of now otherFunc is being called in any order. Can it be called based on the index field in result from low to high. That is call in the order of ID, field 1, field 2, field 3` instead of a random order.

How to use asset/source imported by js files imported in entry.js (Webpack, ThreeJS)

In my entry.js file, I import a lot of js files like so:

import {airplane} from "./path/to/airplane.js"

In airplane.js, which uses ThreeJS, there are some file imports such as:

OBJLoader().load("./path/to/object.obj");

My webpack config file is arranged like so:

module.exports = {
    entry: "./path/to/entry.js",

    module: {
        rules: [
            {
                test: /.*.obj$/i,
                type: "asset/source"
            },
        ],
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
    },
};

Is it possible for Webpack to load the content of object.obj using asset/source or asset/resource?

For context, I am doing this to bundle everything into one bundle.js file so no file paths are needed. Additionally, I don’t always know the path to object.obj, so a wildcard filepath would be nice. Thanks in advance!

javascript(node js) new date is giving wrong current datetime [closed]

In my nodejs project, new Date() function is giving me a datetime that is six hours behind from my local datetime. Suppose if my local time is 2023-05-11T10:00:00.070Z its giving me 2023-05-11T04:00:00.070Z. There is nothing wrong with the datetime of my pc. Then why is it happening ? How can I get the actual datetime ?

My current timezone is Asia/Dhaka

code:

var current_date = new Date()
console.log(current_date)

Please help.

Mybutton prev and next is not working | Next js Owl Carousel

I can’t use my button prev and next, how do i get the button to work.

This my code


export const Slider = () => {
  const carouselRef = useRef(null);

  const handlePrev = () => {
    carouselRef.current.prev();
  };

  const handleNext = () => {
    carouselRef.current.next();
  };

  const options = {
    responsive: Responsive,
    loop: true,
    autoplay: true,
    autoplayTimeout: 3500,
    autoplayHoverPause: true,
    dots: true,
    nav: true,
    navText: ["<", ">"],
  };

  return (
    <div className=' items-center justify-center content-center flex flex-row py-44'>
      <button onClick={handlePrev}>prev</button>
      <div className='mx-auto w-5/6'>
        <OwlCarousel ref={carouselRef} {...options}>
          {images.map((item, index) => (
            <div
              key={index}
              className='bg-white shadow-lg rounded-xl overflow-hidden md:m-5 m-3 md:p-6 px-2 py-3'>
              <div className='h-36 flex flex-col items-center justify-center text-center'>
                <img src={item.images} className='object-contain h-full' />
                <div className='w-full'>
                  <h2 className='title-font font-semibold text-lg text-green-400'>
                    {item.name}
                  </h2>
                  <h3 className='text-gray-700 mb-3'>{item.role}</h3>
                </div>
              </div>
            </div>
          ))}
        </OwlCarousel>
      </div>
      <button onClick={handleNext}>next</button>
    </div>
  );
};

I tried to using useRef but give me an error
“TypeError: carouselRef.current.prev is not a function”
enter image description here

I want to fix the button, like is there a way to link it with navtext or is there some other way? please help

Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it) in next.js 13.4.1

I am working in the next.js new version 13.4.1 App route , I made a api route.js I want to get something but I getting error ,

- error ./node_modules/bson/lib/bson.mjs
Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)      
Import trace for requested module:

when I installed next.js ever after that next.config.js file was empty
. if I tried write some code inside the next.config.js then i getting anther error

 warn Invalid next.config.js options detected: 
- warn     The root value has an unexpected property, topLevelAwait, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, configOrigin, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, target, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack).

how to solve it !

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    
}

module.exports = nextConfig;

Api Route when i tried to get something , app/api/user/route.js
its code not working showing error.

import dbConnect from "../../../../lib/connect";

export async function GET(req, res) {
      dbConnect()
    return new Response('Hello, Next.js! I can make twitter clone',  {
      status: 200,  
    });
   
  }

Split Scrolling in React

I have been trying to simulate the same effect as https://replit.com/ has with their split scrolling.

Here is what I got so far: https://codesandbox.io/s/silly-goldberg-o18f3t?file=/src/App.js

I cant seem to get the left side to scroll with the right side.

So when I scroll from the right side, it seems to be fine but when I scroll from the left side it goes straight to the next section of my website without scrolling through the images.

Basically I need them to be scroll at the same time regardless where the cursor is until the right side is done scrolling.

Am I going about this all wrong? Should I be using a library like gsap?

Thanks for your time

turbolinks:load eventlistener in rails 7 partial not executing

I have a partial with some radio buttons and a submit button.

    <div class="row align-items-center h-100">
      <div class="col-md-6 mx-auto">
              <form>
        <% @options.each_with_index do |option, index| %>
          <div class="mb-3 text-center custom-radio">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios<%= index + 1 %>" value="<%= index %>">
            <label class="form-check-label" for="exampleRadios<%= index + 1 %>"><%= option %></label>
          </div>
        <% end %>
      </form>
      </div>
    </div>
  </div>

<div class = "container text-center" style = "padding-top:20px">
    <button id="submit-answer-button" class="btn btn-primary" disabled> Submit </button>
  </div>

I also have this script underneath the same partial file:

<script>
console.log('test')
document.addEventListener('turbolinks:load', function() {
console.log('test1')
  let submitButton = document.getElementById('submit-answer-button');
  let radioButtons = document.querySelectorAll('input[type="radio"]');

  for (let i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', function() {

      if (this.checked) {

        submitButton.disabled = false;
      }
    });
  }
});
</script>

I confirmed that the console produces ‘test’ but not ‘test1’ so something is wrong with turbolinks. I’ve tried a lot of different things like using DomContentLoad instead and placing this in the application view. Nothing works! The turbolinks:load simply refuses to execute.