Skip to content

process is not defined #64

Description

@gabrielbahniuk

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!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions