"Uncaught ReferenceError: the process is not defined" - VANILLA JS

[Lulololu]

Hola guys,

• Operating System : Linux - Ubuntu
• Node version : v14.15.1
• NPM version : 6.14.8
• VANILLA JAVASCRIPT (No Framework)

I know this bugs has been already raised with Angular but mine occured with Vanilla JavaScript.

I'm trying to use places.js with a project I've been updated. Unfortunatly, it doesn't work with my updated webpack config, and I get the "process is not defined" error.

Here are the details.

1. Code run that caused the issue - Console Output

_AlgoliaSearchCore.js:13 Uncaught ReferenceError: process is not defined
    at Object../node_modules/algoliasearch/src/AlgoliaSearchCore.js (AlgoliaSearchCore.js:13)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Object../node_modules/algoliasearch/src/browser/builds/algoliasearchLite.js (algoliasearchLite.js:3)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Object../node_modules/places.js/src/places.js (places.js:10)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Object../node_modules/places.js/index.js_

2. Do you want to request a feature or report a bug?
   BUG

3. What is the current behavior?
   Webpack can't compile the project in DEV Mode.

4. **If the current behavior is a bug, please provide all the steps to reproduce and a minimal

• Download this webpack boilerplate (I've got the exact same Webpack Config)
• template.html

 <input
        id="search-box"
        type="text"
        placeholder="Search a City"
        autocomplete="off"
      />

• index.js :

import places from "places.js";

const placesAutocomplete = places({
  appId: "ID",
  apiKey: "KEY",
  container: document.querySelector(#search-input),
  type: "city",
});

placesAutocomplete.on("change", (event) => {
  foo();
});

Do anyone have some idea or work-around ?

Thank you really much

[Haroenv]

this should fix it: https://webpack.js.org/plugins/environment-plugin/

[Lulololu]

Following your path, I've been adding these next lines to my code - as explained here:

• in both webpack.dev.js // webpack.prod.js

plugins: [ 
new webpack.ProvidePlugin({ process: "process/browser", 
}), 
]

It works now.

Thanks for your help.

[Haroenv]

The value you want is likely { "process.env": JSON.stringify({NODE_ENV: "production})} to avoid bundling the whole process package (which isn't needed). You can also use EnvironmentPlugin as I linked earlier.

In the mean time you have a solution though, and this issue can be closed!