process is not defined

Question

process is not defined

Opened this issue 3 years ago · 0 comments

Hi everyone,

I am trying to use react-loading as externals in webpack with "react-loading": "^2.0.3" and "webpack": "^5.37.0":

webpack.prod.js:

externals: {
   react: 'React',
   axios: 'axios',
   moment: 'moment',
   'react-dom': 'ReactDOM',
   'react-router-dom': 'ReactRouterDOM',
   'react-loading': 'react-loading'
}

template.prod.html

 <body>
    <div id="root"></div>
     ....
    <script crossorigin src="https://unpkg.com/react-loading@2.0.3/dist/react-loading.js"></script>
    ....
  </body>

As soon as I start it and open it in the browser, I get the following error:

index.js:3 Uncaught ReferenceError: process is not defined
    at Object.<anonymous> (index.js:3)
    at __webpack_require__ (bootstrap 6feda731dd4ebaacd003:19)
    at Object.<anonymous> (react-loading.jsx:1)
    at __webpack_require__ (bootstrap 6feda731dd4ebaacd003:19)
    at bootstrap 6feda731dd4ebaacd003:62
    at bootstrap 6feda731dd4ebaacd003:62
    at webpackUniversalModuleDefinition (universalModuleDefinition:9)
    at universalModuleDefinition:10

The problem seems to be here (https://unpkg.com/react-loading@2.0.3/dist/react-loading.js) in the following lines and also maybe in other lines where "process" exists:

if (process.env.NODE_ENV !== 'production') {
  validateFormat = function validateFormat(format) {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  };
}

I tried to use DefinePlugin like this in my webpack.prod.js file:

new DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
}),

Besides, I also added ProvidePlugin with the following config after running npm install process:

new ProvidePlugin({
  process: 'process/browser',
}),

Unfortunately none of those solved the problem.

What am I doing wrong?

Thanks in advance!