Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing vue-server-renderer/basic module on build #5394

Closed
Jaimeloeuf opened this issue Jul 18, 2020 · 15 comments
Closed

Missing vue-server-renderer/basic module on build #5394

Jaimeloeuf opened this issue Jul 18, 2020 · 15 comments
Labels
Library: Vue InstantSearch Issues in vue-instantsearch

Comments

@Jaimeloeuf
Copy link

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
Copy link
Contributor

Haroenv commented Jul 20, 2020

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
Copy link
Contributor

Kocal commented Jul 24, 2020

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:
image

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 🤣) can you confirm you are using:

  • webpack
  • webpack friendly plugin errors

Thanks!

@Haroenv
Copy link
Contributor

Haroenv commented Jul 27, 2020

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
Copy link

tristanbes commented Aug 11, 2020

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
Copy link
Contributor

Haroenv commented Aug 12, 2020

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
Copy link

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
Copy link

+1 on this :(

@Kocal
Copy link
Contributor

Kocal commented Sep 12, 2020

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

@sunscreem
Copy link

@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
Copy link
Contributor

Haroenv commented Sep 12, 2020

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
Copy link

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
Copy link

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
Copy link

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.

@sarahdayan sarahdayan added the Library: Vue InstantSearch Issues in vue-instantsearch label Dec 23, 2022
@Haroenv Haroenv transferred this issue from algolia/vue-instantsearch Dec 30, 2022
@bvogel
Copy link

bvogel commented Mar 27, 2024

Status update: We had the workaround from #5394 (comment) 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
Copy link
Contributor

Haroenv commented Mar 27, 2024

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.

@Haroenv Haroenv closed this as completed Mar 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Library: Vue InstantSearch Issues in vue-instantsearch
Projects
None yet
Development

No branches or pull requests