javascriptreactjsnode.jsmaterial-uivite

Vite: RefreshRuntime.injectIntoGlobalHook is not a function

We have CRA react app, we moved from webpack to Vite.

Issue: When I run the application locally with prod mode I get the following error:

1. Uncaught TypeError: RefreshRuntime.injectIntoGlobalHook is not a function at (index):6:16

line 16:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import RefreshRuntime from "/@react-refresh"
      RefreshRuntime.injectIntoGlobalHook(window)
      window.$RefreshReg$ = () => {}
      window.$RefreshSig$ = () => (type) => type
      window.__vite_plugin_react_preamble_installed__ = true
    </script>
  </head>
</html>
```

  1. Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See       https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201

at TokenContext.jsx:1:71 ```

line 1:

```jsx
import { createContext, useContext, useEffect, useState } from "react";
```

However when we run locally the other modes like testin,dev,staging its working fine. The browser that I use it doesn't have any extensions like React dev tool.

package.json:

  json
  "scripts": {
  "start": "vite",
  "staging": "vite --mode staging",
  "dev": "vite --mode development",
  "testing": "vite --mode testing",
  "prod": "vite --mode production",
  "build": "vite build",
  "test": "vite test",
  "test:coverage": "vite test --collectCoverage --watchAll",
  "eject": "vite eject",
  "stylelint": "stylelint \"**/*.scss\"",
  "eslint": "npx eslint ./src --max-warnings=2",
  "eslint:fix": "npx eslint ./src --fix",
  "build:dev": "vite build --outDir dist/development --mode development",
  "build:test": "vite build --outDir dist/testing --mode testing",
  "build:staging": "vite build --outDir dist/staging --mode staging",
  "build:prod": "vite build --outDir dist/production --mode production",
  "build-all": "npm-run-all --parallel build:*",
  "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
  },

Vite.config.mjs :

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  return defineConfig({
    build: {
      outDir: 'build',
      chunkSizeWarningLimit: 2000,
    },
    plugins: [
      react(),
      svgrPlugin({
        svgrOptions: {
          icon: true,
        }
      }),
    ],
    envDir: "./src/environments",
    define: {
        "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV || mode),
    },
    server: {
      port: 3000,
    },
  });
};

System Info vite version: "^4.2.1" Operating System: Windows 11 Node version: v18.19.0

Based on the community feedback, removing the react dev tool extension seems not workin. and adding the following code to Index.html seems not working as well.

    <script type="module">
    import RefreshRuntime from "/@react-refresh"
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {}
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
    </script>
Solution

  • The problem was from vite.config file

    I had to remove mode condition from NODE_ENV

    define: {
    "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV),
},