pedro00dk Posts - Answer Overflow

pedro00dk

•Created by pedro00dk on 11/11/2024 in #support

Solid/reactivity lint rule complains about async custom event handlers

Hello, I'm having some issues with solid eslint plugin regarding custom event handlers.

const comp = <my-element on-click={async () => {}} />
// warns:
// This tracked scope should not be async. Solid's reactivity only tracks synchronously. (eslintsolid/reactivity)

const comp = <my-element on-click={async () => {}} />
// warns:
// This tracked scope should not be async. Solid's reactivity only tracks synchronously. (eslintsolid/reactivity)

Just the line above is enough to reproduce it in playground. Is there any way to disable it? Or this could be a bug? I also checked if this has anything with event delegation as custom events are not delegated and it does not seem so:

const comp = <my-element on-click={async () => {}} on:click={async () => {}} onclick={async () => {}} onClick={async () => {}} />

// produces:
var _tmpl$ = /*#__PURE__*/_$template(`<my-element>`, true, false);
(() => {
  var _el$ = _tmpl$();
  _el$.$$click = async () => {};                   // onclick (WARNS)
  _el$.$$click = async () => {};                   // onClick
  _el$.addEventListener("-click", async () => {}); // on-click (WARNS)
  _el$.addEventListener("click", async () => {});  // on:click
  _el$._$owner = _$getOwner();
  return _el$;
})();
_$delegateEvents(["click"]);

const comp = <my-element on-click={async () => {}} on:click={async () => {}} onclick={async () => {}} onClick={async () => {}} />

// produces:
var _tmpl$ = /*#__PURE__*/_$template(`<my-element>`, true, false);
(() => {
  var _el$ = _tmpl$();
  _el$.$$click = async () => {};                   // onclick (WARNS)
  _el$.$$click = async () => {};                   // onClick
  _el$.addEventListener("-click", async () => {}); // on-click (WARNS)
  _el$.addEventListener("click", async () => {});  // on:click
  _el$._$owner = _$getOwner();
  return _el$;
})();
_$delegateEvents(["click"]);

3 replies

SSolidJS

•Created by pedro00dk on 1/22/2024 in #support

Solid-refresh with Webpack HMR errors

Hello, I'm trying to integrate solid-refresh in a webpack based solid-js app to make development a bit easier. The app is a microfrontend and we used module federation in the company I work on, so I can't just use other bundlers. Unfortunately, I haven't found any templates or projects with this setup. The following are some pieces from the webpack config I think might be relevant to figure the issue out.

{
  mode: 'development',
  devServer: {
    hot: true,
    liveReload: false,
  },
  module: {
    rules: [
      {
        resource: { and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [['solid-refresh/babel', { bundler: 'webpack5' }]],
          },
        },
      },
      {
        resource: { not: /node_modules/, and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-typescript', 'babel-preset-solid'],
          },
        },
      },
    ]
  }
}

{
  mode: 'development',
  devServer: {
    hot: true,
    liveReload: false,
  },
  module: {
    rules: [
      {
        resource: { and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [['solid-refresh/babel', { bundler: 'webpack5' }]],
          },
        },
      },
      {
        resource: { not: /node_modules/, and: [/.[j|t]sx?$/i] },
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-typescript', 'babel-preset-solid'],
          },
        },
      },
    ]
  }
}

The application starts and works normally, however, webpack displays a warning and error when I make a change. Browser logs:

(refresh)
...
[HMR] Waiting for update signal from WDS...

(make change)
[webpack-dev-server] App updated. Recompiling...
[webpack-dev-server] App hot update...
[HMR] Checking for updates on the server...

(warning)
[HMR] Update failed: ChunkLoadError: Loading hot update chunk main failed.
(missing: http://localhost:5010/main.e0752036943124e3b068.hot-update.js)
    (...stacktrace omitted)

[HMR] Updated modules:
[HMR]  - ./src/pages/Channels.tsx
[HMR] App is up to date.

(error)
Uncaught TypeError: Cannot set properties of undefined (setting './src/pages/Channels.tsx')
    at self.webpackHotUpdatechannels

(refresh)
...
[HMR] Waiting for update signal from WDS...

(make change)
[webpack-dev-server] App updated. Recompiling...
[webpack-dev-server] App hot update...
[HMR] Checking for updates on the server...

(warning)
[HMR] Update failed: ChunkLoadError: Loading hot update chunk main failed.
(missing: http://localhost:5010/main.e0752036943124e3b068.hot-update.js)
    (...stacktrace omitted)

[HMR] Updated modules:
[HMR]  - ./src/pages/Channels.tsx
[HMR] App is up to date.

(error)
Uncaught TypeError: Cannot set properties of undefined (setting './src/pages/Channels.tsx')
    at self.webpackHotUpdatechannels

I appreciate any help, please let me know if any additional data is needed.

2 replies

SSolidJS

•Created by pedro00dk on 12/18/2023 in #support

Solid-js router 0.10.x cache invalidation

Hi, I started migrating an app from solidjs router 0.9.x and 0.10.x. The new caching and preload features are nice, but I'm having some trouble with testing. In my test setup I intercept API requests and inject different stubs for different tests. Since the tests run fast, the new solid router cache function does not invalidate the cache from one test to the next, causing some tests to get API responses made for previous tests when making the same API requests. I looked at the source code of cache and there seems to be no way to invalidate the entire cache. I saw that there is a cache.set function there but it seems it can't be used for invalidating individual caches. Are there other tricks I can use to achieve this behavior? I really don't want to change components' code to fetch without caching for tests, so it would be interesting to have some sort of cache.clear to invalidate the entire cache for testing purposes.

6 replies

Gaming

Programming