[question][help] Process not defined

[mein-beer-hu]

Describe the bug

I recently installed this library (thanks ton!). I am trying to experiment with basic example of just importing the Board and instantiating it with dummy data (from storybook).

But my app fails to run as soon as I try to use the Board component. I see following error in my console

fromRequireContextWithGlobalFallback.js:19 ReferenceError: process is not defined
    at Object../node_modules/react-trello/dist/controllers/Board.js

I am using react-functional component

some essential packages in package.json:

...
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-trello": "^2.2.11",
    "react_ujs": "^2.6.1",
...

I am using webpacker for rails.

To Reproduce Steps to reproduce the behavior:

1. yarn add
2. run the local dev server
3. app fails to load

Expected behavior App should load

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser chrome
• Version 93.0.4577.82

[KaiSpencer]

Hi @mein-beer-hu, Is your app packaged with Vite? With vite I get this also, adding the following to my vite config fixes the issue for me.

export default defineConfig({
  plugins: [react()],
  define: {
    "process.env": {},
  },
});

[christopher-caldwell]

@KaiSpencer Worked for me, thanks!

[KaiSpencer]

@mein-beer-hu Can you confirm this works for you also, and if so close this issue?

[karthik-hr]

Facing same issue with Webpack 5

[KaiSpencer]

Facing same issue with Webpack 5

@karthik-hr Does this link provide a solution to your issue?

[karthik-hr]

@KaiSpencer The issue was with jspdf -> canvg package. process/browser causing problem. I have added following plugin for webpack and its working fine now. Thanks

new webpack.EnvironmentPlugin({ REDUX_LOGGING: false }),

[hazigabriel]

Facing same issue with Webpack 5

@karthik-hr Does this link provide a solution to your issue?

@KaiSpencer this has helped me, thanks!

[WillTaylor22]

For people using esbuild, I added the following to my esbuild string (including quote marks): '--define:process.env="{}"' From here: https://github.com/evanw/esbuild/issues/12#issuecomment-587109454

[jeremylynch]

I fixed this issue with the below:

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