no declaration file

[BernardA]

Just got this error on Visual Studio Code when attempting to use react-loadable-visibility.

I am using npm v 6.4.1 and latest react/webpack as well.

Also I was already using react-loadable separately without that issue.

 Could not find a declaration file for module 'react-loadable-visibility/react-loadable'. '/.../.../Sites/app/node_modules/react-loadable-visibility/react-loadable.js' implicitly has an 'any' type.

Thanks

The app component:

import React from 'react';
import { Provider } from 'react-redux';
import {
    Route,
    BrowserRouter as Router,
    Switch
} from 'react-router-dom';
import PropTypes from 'prop-types';
import Loadable from 'react-loadable';
import LoadableVisibility from 'react-loadable-visibility/react-loadable';
import PrivateRoute from './auth/auth';
import Header from './pages/common/header/';
import { Loading } from './tools/functions';

const HomePage = Loadable({
    loader: () => import('./pages/home/'),
    loading: Loading,
    delay: 100
});

 .......

const Footer = LoadableVisibility({
    loader: () => import('./pages/common/footer/'),
    loading: Loading,
  })

Additionally, I do have an issue with react-loadable not retrieving files from cache when used with service-worker. I could not find where to report on the react-loadable repository. See this question on SO, https://stackoverflow.com/questions/52812620/react-loadable-does-not-retrieve-from-cache

[tazsingh]

Hi @BernardA, are you using TypeScript on your project? The error related to a declaration file seems to be from type definitions not being present.

I don't use TypeScript myself but maybe this article could be of use? https://medium.com/@chris_72272/migrating-to-typescript-write-a-declaration-file-for-a-third-party-npm-module-b1f75808ed2 Can possibly just reuse react-loadable's definitions as it's the same API as that. A PR would definitely be welcome if you get it working.

With respect to the service worker, I'm guessing that Webpack is resolving to a different URL than the require path. I haven't had a good use for service workers yet but maybe something like this could be useful - https://github.com/oliviertassinari/serviceworker-webpack-plugin In the past I've just used HTTP caching to do what I believe you're trying to do. Maybe have a look at that also as I've seen service workers cause more harm than good for a various projects.

[BernardA]

Thanks @tazsingh. I am not directly using TypeScript. React seems to do that on its own. I will check the article you referenced to, but I am afraid I am not knowledgeable enough to come up with a PR.

Concerning the service worker issue, I will try the plugin you mentioned. Right now I am updating Webpack to v4, from my Symfony Encore installation. Once I got that done, I will check if the fetching from network issue persists. If so, I will install the plugin.

In general I am very pleased with service worker, and it would be fantastic to have react-loadable fetch from cache for all requests subsequent to initial load. I will keep you posted.

By the way, the issue with double posting was that I posted the first time and still saw zero issues open. Same on the second time around. I had actually given up. As you said, it was a temporary glitch on github.

[BernardA]

I tried the OfflinePlugin instead of the workbox-webpack-plugin but it did not solve the issue with react-loadable/visibility not fetching from cache. It would seem that the issue is really with react-loadable/visibility.

[tazsingh]

Hi @BernardA, it would be impossible for this library to influence caching as there is nothing related to caching or service workers in it. As such, I am closing this issue due to it not being an issue with the way that this library functions.

I'm not sure exactly what you're trying to achieve with a service worker and its caching, however as mentioned above I've used HTTP caching with a long max-age or even immutable value as well as Webpack's chunk hash in the filename to achieve the desired effect for me. This is also the more conventional way of handling asynchronous chunk loading. Have you taken a look at that?