Nextjs error: Cannot assign to read only property 'process' of object '#<Window>'

[alekseitsvetkov]

Uncaught TypeError: Cannot assign to read only property 'process' of object '#'
at ff.js?pid=80fd23be42e4e6:1
at ff.js?pid=80fd23be42e4e6:1

Nothing happens when the button is pressed :(

[GaelS]

I have the same issue. Working on my computer but not in production

[danvernon]

@mxstbr is this something on your radar?

[everest113]

I also have this issue with Next.js 10.0.7 (latest release)

[timolins]

I just created a new Next.js project on 10.0.7 and added Feedback Fish, but I couldn't reproduce this error. Do you have any custom loaders/configs in place for this to happen?

[alekseitsvetkov]

@timolins i use next with nx

nx babel.config.json

{
  "presets": ["@nrwl/web/babel"],
  "babelrcRoots": ["*"]
}

nx .eslintrc.json

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              { "sourceTag": "*", "onlyDependOnLibsWithTags": ["*"] }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "parserOptions": { "project": "./tsconfig.*?.json" },
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ]
}

nx tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@castmate/prisma": ["libs/prisma/src/index.ts"],
      "@castmate/containers/*": ["libs/containers/src/*"],
      "@castmate/utils/*": ["libs/utils/src/*"],
      "@castmate/chat": ["libs/chat/src/index.ts"],
      "@castmate/auth": ["libs/auth/src/index.ts"],
      "@castmate/room": ["libs/room/src/index.ts"],
      "@castmate/auth-api": ["libs/auth-api/src/index.ts"],
      "@castmate/user-api": ["libs/user-api/src/index.ts"],
      "@castmate/room-api": ["libs/room-api/src/index.ts"],
      "@castmate/connection-api": ["libs/connection-api/src/index.ts"],
      "@castmate/components/*": ["libs/components/src/*"],
      "@castmate/icons/*": ["libs/icons/src/*"],
      "@castmate/layouts/*": ["libs/layouts/src/*"],
      "@castmate/user": ["libs/user/src/index.ts"],
      "@castmate/community-api": ["libs/community-api/src/index.ts"],
      "@castmate/community": ["libs/community/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

next next.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');

module.exports = withNx({});

next tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "preserve",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ],
  "exclude": ["node_modules"]
}

next .babelrc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "pure": true, "ssr": true }]]
}

[tobiaslins]

@alekseytsvetkov
I just created a sandbox using Next.js 10.0.7 but couldn't reproduce the issue.
https://codesandbox.io/s/blue-frog-tzdy9

Can you please create a sandbox where you can reproduce the issue? Thanks!!

[beaussan]

I have the same problem using ViteJS and the same error, I didn't have it with CRA before, I don't know if it's related, but I seems like it :
Uncaught TypeError: Cannot assign to read only property 'process' of object '#'
at ff.js?pid=40bf40541aac9c:formatted:251
at ff.js?pid=40bf40541aac9c:formatted:3651

[andrelandgraf]

I have the same issue on Chrome, it still works on Safari and it worked before I upgraded to React 17!

Chrome points to the following code in ff.js: window.process={env:"production"}

My specs:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    npm: 7.6.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 89.0.4389.90
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.0.1 => 3.0.1
    gatsby-plugin-image: ^1.0.0 => 1.0.0
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0
    gatsby-plugin-offline: ^4.0.0 => 4.0.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
    gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0
    gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
    gatsby-plugin-styled-components: ^4.0.0 => 4.0.0
    gatsby-source-filesystem: ^3.0.0 => 3.0.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0

[lkleuver]

I'm a bit skeptical about feedback.fish now seeing this issue has been open for 3 months.
Having the same problem (next 11, typescript), tried dynamic import or setTimeout but alas.

[tobiaslins]

Hey @lkleuver,

Do you have a codesandbox that reproduces this issue in chrome?
I've just deployed a fix in the ff.js file. Let me know if you still have this issue!

[lkleuver]

Hey Tobias,

Unfortunately, it still doesn't work. Not quite sure how to create a sandbox, I have quite a complex next application with a lot of private code.

ff.js?pid=2784654bc38092:1 Uncaught TypeError: Cannot assign to read only property 'process' of object '#<Window>'
    at ff.js?pid=2784654bc38092:1
    at ff.js?pid=2784654bc38092:1

window.process={env:"production"}

Our clients are super excited about feedback.fish but I'm at a loss how to abide.

[tobiaslins]

hey @lkleuver,

I just had another look and did some changes to get rid of this window.process code. It's already deployed, let me know if it works!

[lkleuver]

I get a lot further now, thanks!
feedback popup shows (a padding width's worth offscreen though)
and I can post feedback (shows up in the dashboard).

the screenshot doesn't work though

Uncaught TypeError: Illegal invocation
setTimeout (async)
(anonymous) @ ff.js?pid=2784654bc38092:1
(anonymous) @ ff.js?pid=2784654bc38092:1
(anonymous) @ ff.js?pid=2784654bc38092:1
r @ ff.js?pid=2784654bc38092:1
Promise.then (async)
i @ ff.js?pid=2784654bc38092:1
(anonymous) @ ff.js?pid=2784654bc38092:1
e @ ff.js?pid=2784654bc38092:1
(anonymous) @ ff.js?pid=2784654bc38092:1

 (n = document.createElement("div")).className = "feedback-flash",
                    document.body.appendChild(n),
                    setTimeout(n.remove, 1e3),
                    _r.contentWindow.postMessage(JSON.stringify({
                        type: "screenshot",
                        data: e.value
                    }), Dr),

I'll test it in a staging environment first. not sure if it's next's fault.

Thank you for the quick responses!

[lkleuver]

Still getting "TypeError: Illegal invocation" error, also in production.