Giters

algolia / algoliasearch-client-javascript

⚡️ A fully-featured and blazing-fast JavaScript API client to interact with Algolia.

Home Page:https://www.algolia.com/doc/api-client/javascript/getting-started/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue building in vite for prod

joepagan opened this issue · comments

commented

Hi,

Getting this issue when trying to build for prod, it works fine on dev envs.
Sorry if this isn't the right place for this issue. Let me know if not and I'll open one elsewhere.

vite v2.6.14 building for production...
transforming...

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
✓ 545 modules transformed.
'createHmac' is not exported by __vite-browser-external, imported by node_modules/@algolia/client-search/dist/client-search.esm.js
file: /home/circleci/repo/buildchain/node_modules/@algolia/client-search/dist/client-search.esm.js:4:9
2: import { createTransporter, CallEnum, createMappedRequestOptions, serializeQueryParameters } from '@algolia/transporter';
3: import { MethodEnum } from '@algolia/requester-common';
4: import { createHmac } from 'crypto';
            ^
5: 
6: function createBrowsablePromise(options) {
error during build:
Error: 'createHmac' is not exported by __vite-browser-external, imported by node_modules/@algolia/client-search/dist/client-search.esm.js
    at error (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:158:30)
    at Module.error (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:12354:16)
    at Module.traceVariable (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:12739:29)
    at ModuleScope.findVariable (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:11531:39)
    at ReturnValueScope.findVariable (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:6902:38)
    at ChildScope.findVariable (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:6902:38)
    at ReturnValueScope.findVariable (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:6902:38)
    at ChildScope.findVariable (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:6902:38)
    at Identifier.bind (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:6392:40)
    at CallExpression.bind (/home/circleci/repo/buildchain/node_modules/rollup/dist/shared/rollup.js:4998:23)

Some similar errors on other threads:

Contents of my package.json:

{
    ...
"dependencies": {
    "algoliasearch": "^4.12.1",
    "vue": "^3.2.9",
    "vue-class-component": "^8.0.0-rc.1",
    "vue-instantsearch": "^4.3.1",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@netlify/tailwindcss-first-line": "^1.0.1",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/line-clamp": "^0.2",
    "@typescript-eslint/eslint-plugin": "^4.32.0",
    "@typescript-eslint/parser": "^4.32.0",
    "@vitejs/plugin-legacy": "^1.5.2",
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/compiler-sfc": "^3.2.9",
    "autoprefixer": "^10.3.4",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-airbnb-typescript": "^14.0.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-vue": "^7.18.0",
    "postcss": "^8.3.6",
    "rollup-plugin-critical": "^1.0.4",
    "tailwindcss": "^2.2.11",
    "tailwindcss-pseudo-elements": "^2.0.0",
    "vite": "~2.6.14",
    "vite-plugin-eslint": "^1.3.0",
    "vite-plugin-restart": "0.0.2",
    "vite-svg-loader": "^2.2.0",
    "vite-tsconfig-paths": "^3.3.14"
  },
    ...
}
commented

Do you have a complete reproduction in a standalone repository? What I think might be happening is you compiling the node version for browsers somehow. If you haven't tried that yet, please replace algoliasearch with algoliasearch/lite where you're importing it

commented

@Haroenv thanks for getting back, and great call!

It looks like this is only happening on circleci's node image: circleci/node:16, running against docker's node:16-alpine is absolutely fine. I'll take it up with them or try another 16minor version are report back.

Sorry for the noise here.

commented

No worries! if you get a reproducible failure, we'd love to see if there's anything on our side that should be changed as well.

commented

Hi @Haroenv just updating you... very strangely I couldn't make a reproducible failure. Despite copying my app's files...
I did update my circle deployment to use node:16-alpine though that still hit the same issue despite working fine on a dev environment!

tl;dr I needed to update my vite config to the following:

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default ({ command }) => ({
  plugins: [
    nodeResolve({
      browser: true,
      preferBuiltins: true,
...

Maybe this was obvious to some, but seems like this should be default vite/rollup behaviour as surely the vast majority of apps using that will be for browsers?
Not sure if there is anything that could be done at package level to make this behave in this way?
This is the first time I've encountered this on this app, though I admit, there is not that many packages where I could have come across this elsewhere yet (as my package.json reveals).

long version (which may save someone some time):
After going down the rabbit hole of trying to satisfy this by using aliased browserify-based packages, I eventually hit a point where I didn't know how many more sub-dependencies I'd have to alias.

Also found some faster progress with rollup-plugin-node-polyfills then discovered it's got so many issues it's worth using snowpack's instead rollup-plugin-polyfill-node, but ultimately this wasn't needed in the end and I could get away with preferBuiltins: true which seemed preferable!

If anyone can follow up with a bit more as to why this is necessary that'd be great.

commented

That makes sense, I think what made the change is browser: true, to make sure you resolved the browser version of algoliasearch, not the node one

commented

Ah! Yeah that clears that up.

I think it might be helpful for others to reference that on pages such as: https://www.algolia.com/doc/guides/building-search-ui/installation/vue/?client=Vue+3

Which is probably going to ultimately need the browser version for rollup/vite users? Don't think I've needed to do this with algolia with webpack before, though been a while!

Though appreciate maybe it's just my very niche scenario that this occurs as I couldn't reproduce.

commented

In most cases it should automatically use the browser option if that's what you're building for, but sometimes it might accidentally be overridden I think. What we can do is write an FAQ item for this type of error. Would you have found that in the docs?

commented

I googled the shit out of the 'createHmac' is not exported by __vite-browser-external type errors above so if there was ANY reference to that on a google search result on that especially on your site I deffo would have read it, I exhausted them all. As long as you dont noindex your FAQs then I would have found it.

Otherwise, I have to admit it would be unlikely I would look there on the off chance as it seemed so niche I wouldn't expect it.

I think if I would have seen it anywhere it would be around where you suggest the es import for vue3:

import InstantSearch from 'vue-instantsearch/vue3/es';