fetch is not defined - maybe your browser targets are not covering everything you need
cah-brian-gantzler opened this issue · 33 comments
I believe I have tracked the issue down to https://github.com/github/fetch. In version 3.1.1 it used to contain this https://github.com/github/fetch/blob/v3.1.1/fetch.js#L546 but in 3.2.0 it now contains this https://github.com/github/fetch/blob/v3.2.0/fetch.js#L564
Ember-fetch contains this check https://github.com/ember-cli/ember-fetch/blob/master/assets/browser-fetch.js.t#L36. I believe the module body here https://github.com/ember-cli/ember-fetch/blob/master/assets/browser-fetch.js.t#L34 injects the fetch library somehow. Ember-fetch is checking self and I think it now needs to check global maybe. Since this happened so long ago I dont know what dependencies have changed to make it fail for me now, but it failed today for me in multiple unrelated projects.
If your using yarn add this to your package.json
"resolutions": {
"whatwg-fetch": "3.3.1"
}Looks like new release 3.4.0 of whatwg-fetch breaks ember-fetch
Hmm, maybe this global:
ember-fetch/assets/browser-fetch.js.t
Line 1 in 612bfd0
Is now conflicting with this?
https://github.com/github/fetch/blob/99b26818147a4288429fcd96421cf038dccbc1ac/fetch.js#L1-L4
I did try to see if the tests here would fail with the latest versions of whatwg-fetch, and they do not (#548).
Does anyone have a reproduction?
All of my addons have started failing with Error: fetch is not defined - maybe your browser targets are not covering everything you need?. What's the workaround?
This addon docs PR is currently throwing the error ember-learn/ember-cli-addon-docs#495
I can confirm adding this fixes the issue for addon docs:
"resolutions": {
"whatwg-fetch": "3.3.1"
}Is there a fix we can add to ember-fetch so this is not necessary?
Is there a fix we can add to ember-fetch so this is not necessary?
Definitely. Once we know what is actually wrong 😃
We need a repro, and ideally to make this addons test suite fail like what is happening for realz...
https://github.com/bgantzler/fetch-app
Just a new application, install ember-fetch, create a controller and import fetch. Will fail when you run the app
fails when you run the tests. They are the default blueprint tests unmodified
Oh and I resolved to the failing version using
"resolutions": {
"whatwg-fetch": "3.4.0"
}
just in case cause I saw a merge of a yarn.lock rollback
Just a new application, install ember-fetch, create a controller and import fetch. Will fail when you run the app
Hmm, why aren't our own tests failing here then (if that is all that is needed)?
Just a new application, install ember-fetch, create a controller and import fetch. Will fail when you run the app
Hmm, why aren't our own tests failing here then (if that is all that is needed)?
@rwjblue perhaps importing fetch in tests does not do the same things as importing it in app code?
Perhaps we should set this addon to explicitly use 3.3.1 until we have a fix?
For the simple app I have created above, running the test ember t does fail on the controller
not ok 1 Chrome 84.0 - [145 ms] - Unit | Controller | application: it exists
---
actual: >
null
stack: >
Error: fetch is not defined - maybe your browser targets are not covering everything you need?
at Module.callback (http://localhost:7357/assets/vendor.js:66720:13)
at Module.exports (http://localhost:7357/assets/vendor.js:118:32)
at Module._reify (http://localhost:7357/assets/vendor.js:155:59)
at Module.reify (http://localhost:7357/assets/vendor.js:142:27)
at Module.exports (http://localhost:7357/assets/vendor.js:116:10)
at requireModule (http://localhost:7357/assets/vendor.js:39:18)
at Class._extractDefaultExport (http://localhost:7357/assets/vendor.js:92885:20)
at Class.resolveOther (http://localhost:7357/assets/vendor.js:92545:32)
at Class.resolve (http://localhost:7357/assets/vendor.js:92608:25)
at resolve (http://localhost:7357/assets/vendor.js:1884:36)
message: >
Died on test #1 at Object.<anonymous> (http://localhost:7357/assets/tests.js:15:21)
at processModule (http://localhost:7357/assets/test-support.js:3894:16)
at module$1 (http://localhost:7357/assets/test-support.js:3919:4)
at Module.callback (http://localhost:7357/assets/tests.js:12:21)
at Module.exports (http://localhost:7357/assets/vendor.js:118:32)
at requireModule (http://localhost:7357/assets/vendor.js:39:18)
at TestLoader.require (http://localhost:7357/assets/test-support.js:14364:9)
at TestLoader.loadModules (http://localhost:7357/assets/test-support.js:14357:14): fetch is not defined - maybe your browser targets are not covering everything you need?
negative: >
false
browser log: |
...
ok 2 Chrome 84.0 - [1 ms] - ember-qunit: Ember.onerror validation: Ember.onerror is functioning properly
1..2
# tests 2
# pass 1
# skip 0
# todo 0
# fail 1
Oh im sorry. I think I know what you mean. You mean ONLY importing fetch in tests. Yes I believe you may be correct. If has something to do with the loader.
This is the initial post I made in discord help
Uncaught Error: fetch is not defined - maybe your browser targets are not covering everything you need?
at Module.callback (ember-fetch.js:824)
at Module.exports (loader.js:106)
at Module._reify (loader.js:143)
at Module.reify (loader.js:130)
at Module.exports (loader.js:104)
at Module._reify (loader.js:143)
at Module.reify (loader.js:130)
at Module.exports (loader.js:104)
at requireModule (loader.js:27)
at Class._extractDefaultExport (index.js:397)
I dont know if this helps, but on the repo I posted https://github.com/bgantzler/fetch-app if you switch to the branch acceptance (I just created), the fetch is no longer in the app, so the app no longer fails. It is now only imported in an acceptance test. And it fails there.
Hmm, I have no idea why it doesn't fail in tests in this repo then. I think we should likely set to 3.3.1 explicitly until someone can figure out the real fix. @rwjblue thoughts on putting that in as a temporary patch?
During this addons test run, the ember-fetch in vendor doesnt have any code where the <%= moduleBody %> is suppose to be
When when I run during my apps controller test (master) there is
So yea, the test environments they are running in are different
The tutorial builds are failing as well: https://github.com/ember-learn/super-rentals-tutorial/actions/runs/199896721
Created a PR for failing CI.
It seems the self -> global name change Rob mentioned broke ember-fetch
Nice, thanks @xg-wang! Looking forward to having this merged 😃
@rwwagner90 no problem! Just released https://www.npmjs.com/package/ember-fetch/v/8.0.2
Tutorial build is fixed with #552 https://github.com/ember-learn/super-rentals-tutorial/actions/runs/201815359
"resolutions": {
"whatwg-fetch": "3.4.0"
}
I use this did not resolved the question
@EugeniaZhang that would not resolve the issue, as 3.4.0 is where the issue began. You would need:
"resolutions": {
"whatwg-fetch": "3.3.1"
}However, version 8.0.2 of ember-fetch has a fix for this issue, so I would recommend updating to 8.0.2.
@iamareebjamal maybe try yarn upgrade? If it's failing, something is likely still not using 8.0.2.
I'm using ember-fetch 8.0.4 and still have this issue.
@tehmaestro can you paste the output of yarn why whatwg-fetch to tell us what's the versions you're using?
@tehmaestro can you paste the output of
yarn why whatwg-fetchto tell us what's the versions you're using?
yarn why whatwg-fetch
yarn why v1.22.4
[1/4] 🤔 Why do we have the module "whatwg-fetch"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "whatwg-fetch@3.6.2"
info Reasons this module exists
- "pretender" depends on it
- Hoisted from "pretender#whatwg-fetch"
- Hoisted from "ember-fetch#whatwg-fetch"
- Hoisted from "ember-simple-auth#ember-fetch#whatwg-fetch"
- Hoisted from "ember-simple-auth-token#ember-fetch#whatwg-fetch"
info Disk size without dependencies: "72KB"
info Disk size with unique dependencies: "72KB"
info Disk size with transitive dependencies: "72KB"
info Number of shared dependencies: 0
✨ Done in 0.87s.
Hey, turns out I was using ember-simple-auth version 2.1.0, which uses an older version of ember-fetch . I was able to fix the issue by upgrading ember-simple-auth
I'm running into this right now and see that I'm using ember-fetch@8.1.2. Yarn why shows that I only have that version installed and even tried the whatwg-fetch resolution trick. Still getting it.
I'm in the process of updating an app from 3.x to 5.x and am wondering if there's some other dependency issue here.
Here is my package.json:
{
"name": "--redacted--",
"version": "1.4.25",
"private": true,
"description": "Small description for --redacted-- goes here",
"repository": "--redacted--",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"build:prod": "ember build --environment=production",
"build:dev": "ember build --environment=development",
"release": "npx semantic-release",
"lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:!(fix)'",
"lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
"lint:hbs": "npx ember-template-lint .",
"lint:hbs:fix": "npx ember-template-lint . --fix",
"lint:js": "eslint . --cache",
"lint:js:fix": "eslint . --fix",
"lint:ts": "eslint . --cache",
"lint:ts:fix": "eslint . --fix",
"start": "ember serve",
"start:local": "ember serve -e=local",
"test": "cross-env COVERAGE=true ember test",
"test:all:lint": "npm-run-all lint test:*"
},
"nyc": {
"reporter": [
"text-summary",
"html",
"json",
"lcov"
],
"cache": true,
"report-dir": "./coverage"
},
"devDependencies": {
"@ember-data/legacy-compat": "^5.3.8",
"@ember/optional-features": "^2.1.0",
"@ember/render-modifiers": "^2.1.0",
"@faker-js/faker": "^9.0.0",
"@fortawesome/ember-fontawesome": "^0.2.1",
"@fortawesome/free-regular-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@glimmer/component": "^1.1.2",
"@glimmer/tracking": "^1.1.2",
"@glint/core": "^1.4.0",
"@glint/environment-ember-loose": "^1.4.0",
"@semantic-release/changelog": "^5.0.1",
"@semantic-release/commit-analyzer": "^8.0.1",
"@semantic-release/git": "^9.0.1",
"@semantic-release/gitlab": "^6.2.2",
"@semantic-release/npm": "^7.1.3",
"@semantic-release/release-notes-generator": "^9.0.3",
"@tsconfig/ember": "^3.0.8",
"@types/bootstrap": "^5.2.10",
"@types/ember": "^4.0.11",
"@types/ember-data": "^4.4.16",
"@types/ember-data__model": "^4.0.5",
"@types/ember-data__store": "^4.0.7",
"@types/ember-qunit": "^6.1.1",
"@types/ember-resolver": "^9.0.0",
"@types/ember__application": "^4.0.11",
"@types/ember__array": "^4.0.10",
"@types/ember__component": "^4.0.22",
"@types/ember__controller": "^4.0.12",
"@types/ember__debug": "^4.0.8",
"@types/ember__engine": "^4.0.11",
"@types/ember__error": "^4.0.6",
"@types/ember__object": "^4.0.12",
"@types/ember__polyfills": "^4.0.6",
"@types/ember__routing": "^4.0.22",
"@types/ember__runloop": "^4.0.10",
"@types/ember__service": "^4.0.9",
"@types/ember__string": "^3.16.3",
"@types/ember__template": "^4.0.7",
"@types/ember__test": "^4.0.6",
"@types/ember__test-helpers": "^2.9.1",
"@types/ember__utils": "^4.0.7",
"@types/htmlbars-inline-precompile": "^3.0.3",
"@types/qunit": "^2.19.10",
"@types/rsvp": "^4.0.9",
"babel-eslint": "^10.1.0",
"broccoli-asset-rev": "^3.0.0",
"broccoli-funnel": "^3.0.8",
"cross-env": "^7.0.3",
"ember-async-await-helper": "^1.0.0",
"ember-can": "~6.0.0",
"ember-cli": "^5.11.0",
"ember-cli-app-version": "^7.0.0",
"ember-cli-babel": "^8.2.0",
"ember-cli-code-coverage": "^1.0.0-beta.9",
"ember-cli-dependency-checker": "^3.3.2",
"ember-cli-htmlbars": "^6.3.0",
"ember-cli-inject-live-reload": "^2.1.0",
"ember-cli-mirage": "^3.0.4",
"ember-cli-moment-shim": "^3.8.0",
"ember-cli-new-version": "^4.1.0",
"ember-cli-sass": "^11.0.1",
"ember-cli-sri": "^2.1.1",
"ember-cli-string-helpers": "^6.1.0",
"ember-cli-terser": "^4.0.2",
"ember-cli-typescript": "^5.3.0",
"ember-cli-typescript-blueprints": "^3.0.0",
"ember-cli-update": "^2.0.1",
"ember-composable-helpers": "^5.0.0",
"ember-concurrency": "^4.0.2",
"ember-concurrency-ts": "^0.3.1",
"ember-cp-validations": "^4.0.0",
"ember-data": "~4.7.1",
"ember-fetch": "^8.1.2",
"ember-inflector": "^5.0.1",
"ember-intl": "^7.0.5",
"ember-load-initializers": "^2.1.2",
"ember-math-helpers": "^4.0.0",
"ember-maybe-import-regenerator": "^1.0.0",
"ember-metrics": "^1.5.2",
"ember-modifier": "^4.2.0",
"ember-moment": "^10.0.1",
"ember-page-title": "^8.2.3",
"ember-power-select": "~8.3.0",
"ember-qunit": "^8.1.0",
"ember-resolver": "^8.0.3",
"ember-source": "~4.7.0",
"ember-template-lint": "^6.0.0",
"ember-test-selectors": "^7.0.0",
"ember-welcome-page": "^7.0.2",
"ember-window-mock": "^1.0.2",
"eslint": "^9.9.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-ember": "^12.2.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-qunit": "^8.1.2",
"eslint-plugin-unused-imports": "^4.1.3",
"glob": "^11.0.0",
"loader.js": "^4.7.0",
"miragejs": "^0.2.0-alpha.3",
"moment": "~2.30.1",
"morgan": "^1.10.0",
"npm-run-all": "^4.1.5",
"prettier": "^3.3.3",
"qunit": "^2.22.0",
"qunit-dom": "^3.2.0",
"sass": "^1.78.0",
"semantic-release": "^17.4.7",
"typescript": "^5.5.4",
"webpack": "^5.94.0",
"webpack-bundle-analyzer": "^4.10.2"
},
"dependencies": {
"@eclass/semantic-release-sentry-releases": "^3.1.0",
"@ember/test-helpers": "^3.3.1",
"@mercury-dev/ember-cui": "^1.24.58",
"@popperjs/core": "^2.11.8",
"@sentry/ember": "^7.83.0",
"animate.css": "^4.1.1",
"bootstrap": "^5.3.3",
"conventional-changelog-conventionalcommits": "^4.6.3",
"crypto-js": "^4.2.0",
"ember-auto-import": "^2.7.4",
"ember-basic-dropdown": "^8.3.0",
"ember-data-storefront": "ember4",
"ember-element-helper": "^0.8.6",
"ember-get-config": "^2.1.1",
"ember-truth-helpers": "^4.0.3",
"jsonexport": "^3.2.0"
},
"resolutions": {
"ember-power-select": "^8.2.0",
"ember-auto-import": "^2.7.4",
"broccoli-rollup": "^5.0.0",
"@ember/test-helpers": "^3.3.1",
"whatwg-fetch": "3.3.1"
},
"engines": {
"node": "14.* || >= 16 || >= 18"
},
"ember": {
"edition": "octane"
},
"packageManager": "yarn@3.8.1"
}Any thoughts on what I should check for?
It would appear that enabling preferNative helped in my case:
ember-cli-build.js
'ember-fetch': {
preferNative: true
}