Missing vue-server-renderer/basic module on build

[Jaimeloeuf]

Bug 🐞

What is the current behavior?

Currently after building my app, the vue cli shows the following error:

warning  in ./node_modules/vue-instantsearch/dist/vue-instantsearch.esm.js

Module not found: Error: Can't resolve 'vue-server-renderer/basic' in 'C:\code\classpass\app\node_modules\vue-instantsearch\dist'

Does this happen only in specific situations? And What is the version you are using?

This only happened right after I upgraded dependencies for algolia related items:

• algoliasearch
  • from 4.2.0 to 4.3.0
• vue-instantsearch
  • from 2.7.0 to 3.1.0

[Haroenv]

Hi @Jaimeloeuf, could you show how you are using and importing Vue InstantSearch? could you make this in a GitHub repo or a sandbox?

[Kocal]

I'm using Webpack Encore and I have this issue too. It's blocking us from using initialUiState on AisInstantSearch component (cc @tristanbes).

The error message is coming from Encore and/or the friendly-errors-webpack-plugin. I will investigate to see what can happens and try fix it.

EDIT: my bad, the error message in OP is not the same I faced:

So the error is coming from vue-instantsearch, or webpack, or friendly-errors-webpack-plugin.

EDIT2: Okay, so I disabled the friendly-errors-webpack-plugin and I don't have the issue anymore. The project is building correctly and I don't have any runtime errors (but I don't use SSR).

Encore
  .addEntry('...')
  // ...

const config = Encore.getWebpackConfig();

// Exclude FriendlyErrorsWebpackPlugin, workaround for https://github.com/algolia/instantsearch/issues/5394
config.plugins = config.plugins.filter((plugin) => {
  return plugin.constructor.name !== 'FriendlyErrorsWebpackPlugin';
});

module.exports = config;

@Jaimeloeuf (sacré pseudo :rofl:) can you confirm you are using:

• webpack
• webpack friendly plugin errors

Thanks!

[Haroenv]

I feel like that's a bug in those plugins, the dependency is only used if you actually use it, which is why we use require inside a try-catch block. If you find an underlying reason in those plugins, we can look into those, and maybe find a different pattern to use here

[tristanbes]

Yup, just ran into this issue myself;

the workaround does not work though,

 WARNING  Compiled with 1 warnings                                                                                                                                          10:10:24 PM

Module build failed: Module not found:
./node_modules/vue-instantsearch/dist/vue-instantsearch.esm.js contains a reference to the file vue-server-renderer/basic.
This file can not be found, please check it for typos or update it if the file got moved.

Adding the unused library fixes the issue:

yarn add @vue/server-renderer

[Haroenv]

Thanks for reporting @tristanbes. If you are not using Server side rendering, it's best to not include the library, or alias it to an empty module (especially for client-side).

We do a conditional require in a try-catch in a code path which normally only runs on the server, however depending on the way you are importing you might get a false positive for this unused code. Do you have a GitHub reproduction for it?

[saltymouse]

I'm seeing a similar issue with the same vue-server-renderer/basic, but it's only a warning, not an error:

warning  in ./node_modules/vue-instantsearch/dist/vue-instantsearch.esm.js

Module not found: Error: Can't resolve 'vue-server-renderer/basic' in '/Users/saltymouse/webdev/my-app/node_modules/vue-instantsearch/dist'

The resulting app bundle still seems to work, but it's just showing this warning.

I've setup a minimal repo with Laravel Mix (same as my production setup) if this helps: https://github.com/saltymouse/algolia-vue-instantsearch-module-warning

[sunscreem]

+1 on this :(

[Kocal]

@sunscreem maybe you can help us by telling what building tool you use, your node version, etc ... instead of a +1

[sunscreem]

@Kocal apologies - I thought you had all the information you needed above.

I've solved this by doing a npm install vue-server-renderer/basic --save but as someone said that installs a dependency I don't need.

Happy to give you all the details you need to debug this. Can you let me know what would help?

[Haroenv]

a git repository with a reproduction. This should be something related to the setup of your tools, and not related to InstantSearch itself, we have done some guarding to make sure that webpack / parcel / rollup treats it as runtime dependency

[Skullbock]

Hi, sorry to hijack this conversation but i think this could be helpful: The easiest way to solve this is by using webpack externals in your projects:

externals: {
    'vue-server-renderer/basic': 'vue-server-renderer/basic'
}

In a Laravel Mix configuration file you can do so like this:

mix.webpackConfig({
        externals: {
            'vue-server-renderer/basic': 'vue-server-renderer/basic'
        }
})

[mindtechmedia]

Also having the same issue with webpack and could not solve it with npm install vue-server-renderer/basic --save as this triggers a permission denied issue, so I had to install the whole package npm install vue-server-renderer --save

[knightknight]

I had the same issues using the latest [gem install algoliasearch-rails](https://github.com/algolia/algoliasearch-rails#install) guide and [yarn add vue-instantsearch](https://github.com/algolia/vue-instantsearch). I had to [yarn add vue-server-renderer](https://www.npmjs.com/package/vue-server-renderer) to get past the error warnings.

[bvogel]

Status update: We had the workaround from https://github.com/algolia/instantsearch/issues/5394#issuecomment-1367968910 in place and I just tried removing it to see if the error persists and can report it's gone for

• algoliasearch: 4.22.0
• vue-instantsearch: 4.14.0

[Haroenv]

Thanks, there indeed haven't really been any reports of this in a while, I assume bundlers have caught up? Let's close for now.