process is not defined #64
Description
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/[email protected]/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/[email protected]/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!