Basically my issue is that I get an error message, "__DEV__ is not defined" when I run jest. So I have read stackoverflow and other google posts on this. Some have suggested removing my .babelrc, but I actually need that file. Others have suggested adding
"globals": {
"__DEV__": true
}
To my package.json. I did that as well. I even deleted my node modules folder and re-installed. What should I do? Odd thing is that it was working before, but not now.
You can create a jest.config.json file in the root of your react-native project and add this globally as such
{
"jest": {
"globals": {
"__DEV__": true
}
}
}
Just add globals.DEV = true to your test file or set it in globals part of your jest settings
I got this when I was running Detox E2E tests inside of my react native app. Then use to work just fine but then I upgraded my mac OS and xcode and they started throwing Reference error DEV is not defined. Not sure why it was fine before and then broke after that.
My issue was fixed when I removed any code that was being imported from my react native app inside of the detox E2E tests. So the issue was importing any javascript from my app/ folder. I had a simple utility log function that wraps console.log which was the culprit. I did not need to modify any jest configs.
For anyone facing this issue I updated my jest by running in the terminal npm update jest this solved the issue for me.
Related
I'm trying to run the Nuxt3 app but when I'm trying to run npm run dev then this error showing in my console: ERROR Cannot start nuxt: Context is not available
Anyone have face the same type of issue and how to fix that.
I had this same issue but the problem was that I was trying to use Nuxt/Vue specific functionality in a .ts file.
I was abstracting some of the lengthier functions and computed objects into a composition file, specifically import { useNuxtApp } from '#imports' and const { $store } = useNuxtApp(). The .ts file has no Nuxt context so these imports and functions just won't work there!
Might you be experiencing something similar?
I had same issue, when i try generated app for production "npm run generate".
Most likely its a version issue, update nuxt to "3.0.0-rc.8"
https://github.com/nuxt/framework/issues/6583
I am trying to include tests in my App created with Expo, but I am facing errors with AsyncStorage module
Could not find module '#react-native-async-storage/async-storage' from 'src/pages/Welcome.tsx'
I tested some configurations of the jest/expo to avoid this error, as downgrade the jest to version 26 as suggested in a GitHub issue of the project, using a mock directory as suggested here and in the official documentation here, and using jest setup file. Details below.
When I try with mock directory nothing changes in the error. The execution ignores the mock directory. When using the jest setup file the only change in the error message is that the message point to the jest setup file instead of the welcome.tsx.
The page tested is the "Welcome.tsx" that import the AsyncStorage
The test has nothing, only a a console log (code below) and don't use the AsyncStorage
The test code
const {getAllByTestId} = renderer.create(<Welcome />);
console.log(getAllByTestId);
The Welcome.tsx
...
<Image source=... testID="WelcomeImage" />
...
package.json
...
"scripts": { ... "test": "jest" ...},
"jest:" {
"preset": "jest-expo",
"globals": { "DEV": true
}
...
Installed versions
React: 17.0.1
React native: 0.64.3
React native testing library: 6.0.0
React test renderer: 17
Jest: 27.4.5
Follow the directions at - https://react-native-async-storage.github.io/async-storage/docs/advanced/jest/
Here is what I did:
Setup jestSetupFile.js as mentioned.
Setup mocks/#react-native-async-storage directory as mentioned
(I know it mentions to use either of two but I did both)
Cleared npm cache, deleted node-modules folder, deleted package-lock.json and did npm i again.(The usual steps to a clean start)
And it works now. Although I get error for enzyme but that is not within the scope of this question.
This question already has answers here:
error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
(33 answers)
Closed 2 months ago.
ERROR in node_modules/#angular/common/http/http.d.ts:2801:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
2801 export declare class HttpClientModule {
restart your server...
terminate server for windows
ctrl + C
start again
ng serve
I had the same issue.
I was going through comments here https://github.com/angular/angular/issues/35399 for solution.
I simple ran ng serve --prodand the error was gone. After that I even ran ng serve.
Other solutions proposed are
Ensure that the tsconfig.json of your library has set "importHelpers": true
Add "enableIvy": false to compilerOptions in tsconfig.app.json
Adding "postinstall": "ngcc" to scripts: {...} in package.json then run npm run postinstall solved problem.
if you still want to keep the Anuglar Ivy and AOT advantage
Simply restart the server (press ctrl+c on the prompt) and then, run ng serve again.
I had the same issue. Then I realized that previously I've some changes in app.module.ts Every time you made changes in app.module.ts remember restart the server process.
I had the same issue. I was adding service to module i.e. app.module.ts's imports array instead of adding it to the providers array.
app.module.ts
#NgModule({
imports: [
MyService // wrong here
],
providers: [
MyService // should add here
]
})
export class EventsModule { }
For me I had a Pipe declared in my 'imports' in my module. Apparently many things can produce this error. I do not suggest you disable IVY, as that is not the problem.
Setting "aot": false inside angular.json file worked for me.
I terminated the current build and restarted it again.
i.e ng serve solved my error. Hope it helps.
In my case, I had included HttpClientModule run running the Angular server.
The below solution works best for my case
Just Close the Server, and reopen it.
It will work.
Working within an NX workspace I just came across this issue.
After a lot of searching I realised that the internal library that I just created had by default Ivy turned off.
I do have it on everywhere else. And yes, even for my libraries. They're only internal to the monorepo we don't expose any of them so we don't want to have an extra step to compile them with the deprecated view engine instructions and later on run ngcc onto it to turn that into Ivy code.
Conclusion: I just forgot to set
"angularCompilerOptions": {
"enableIvy": true
}
on my newly created library and the default is false which wasn't working in my case.
I had same issue in ubuntu. But when I used sudo bash command and executed ng serve. It resolve the issue
I had the same problem, it seems like there is a lot of ways to trigger the problem. I recommend trying to verify the .component, .module and the app.module declarations. Mine was triggered because I've declared the .component in app.module instead of the .module.
This happened to me in VSCode with another module after installing it with npm install. This is most likely related to how the Angular language service extension works and the quickest way to solve it was to restart the IDE.
this problem caused by angular extension and snippets in vscode
be careful not to install obsolete extensions like Angular Extension Pack and Angular Language Service
enter image description here
I upgraded my app from react-native 0.15 to 0.16 but after that I'm getting an error and I don't know how to solve it.
TypeError:undefined is not an object (evaluating 'GLOBAL.Text={
get defaultProps(){
throw getInvalidGlobalUseError('Text')}}')
In Chrome Debugger:
Uncaught Error: Uncaught TypeError: Cannot set property 'Text' of undefined
Thanks
OBS: I'm running on Android.
I notice that changing app name solves the problem, I'm using Evently as app name today. I tried to recreate my virtual machine but didn't solve it.
In my case, I was able to narrow the cause down to one item in my .babelrc file:
{
"presets": ["es2015"]
}
As soon as I removed that and restarted the packager (making sure to also use the --reset-cache flag), I stopped getting the error.
Update 2:
It looks like React Native is making some changes to their .babelrc in version 0.20.0. So, if you are using that version or newer, you should follow the instructions at: https://github.com/facebook/react-native/tree/master/babel-preset in order to specify your .babelrc settings.
Update:
I've narrowed this down further to transform-es2015-modules-commonjs, which React-Native sets some options on, specifically {"strict": false, "allowTopLevelThis": true}. The es2015 preset does not set this option, and it seems that the React-Native .babelrc does not override it. If you want to use es6 modules and transform them to commonjs, you'll need to put the following in your .babelrc:
{
"plugins": [
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}]
]
}
Note, Babel 6, which I updated to along with react-native 0.16.0, no longer contains any transforms by default. What I didn't initially realize is that the React-Native packager provides most of the transforms you might ever need (listed in their docs at: https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers), and I'm thinking that the "es2015" plugin interferes with some of those transformers.
I also tried using "babel-preset-react" (http://babeljs.io/docs/plugins/preset-react/), and that plugin did not seem to cause any errors.
I solve the problem. I think it was because permissions in project folder. I ran chown in my folder to correct the permissions problems and now all are working.
Thanks
In my case the problem was a rogue .babelrc two folders up (my root code folder); I had initiated a yeoman generator to scaffold out a new project using babel-6...accidentally running yeoman from the root code folder. Apparently babel traversed upwards from my project folders until it hit this .babelrc which borked the react-native babel configs...
^ this was originally an edit to my initial answer, which was deleted WHILE I WAS UPDATING IT
I have React js installed via NPM and using browserify to manage components in react. When an exception occurs in React, the console shows as
"Uncaught Error: Minified exception occurred; use the non-minified dev
environment for the full error message and additional helpful
warnings."
How do I enable full error messages ?
Setting NODE_ENV to development as Benjamin Gruenbaum pointed out in the comment resolved the issues.
set NODE_ENV=development
If you are encountering this issue with Karma + Webpack, the following Webpack configuration fixed the issue for me when running tests:
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
]
I FINALLY SOLVED THIS.
If you're like me and ran that command to set NODE_ENV and it's literally never worked, check if you're linking to react.min.js instead of the full versions of the files.
Link to the full versions and it should work like a charm. :D
If you are using jspm to bundle your code, note that version 0.16.24 imports the minified "production" version of React, which throws this error. My temporary solution was to downgrade jspm to 0.16.23.
edit Future versions of jspm will allow you to declare production vs. development versions (see jspm beta documentation)
I had this issue, and for me I didn't need to disable minification or use react source. My script was just loading before the root element. So I just moved the script out of the head and below the div in the index file source code and that fixed it.
Changed my index.jade from this:
html
head
title Super coo site
script(src="bundle.js")
body
div#root
To this:
html
head
title Super coo site
body
div#root
script(src="bundle.js")
I got this error when my render method returned undefined eg
render() {
let view;
// Not paying attention and slip a case where view won't get assigned a value
if(this.props.foo == 'hello') {
view = <HelloView />
}
else if(this.props.foo == 'bye') {
view = <ByeView />
}
return view;
}
This will trigger the error when this.props.foo is 'hi'
Have you check the DOM element that you are trying render ? I had this error before due to a silly mistake. The worst part is bundle was minified. The element id is not same
Index.html
<div id="ds-app"></div>
app.jsx
React.DOM.render(<App/>, document.getElementById('app'))
As of version 15.2, production React error messages (NODE_ENV=production) now include a URL that you can visit where you can see the original, unobfuscated error.
https://twitter.com/dan_abramov/status/748969886433546240
You should consider upgrading to React 15.2 in order to get access to these error messages. Additionally, some production crash reporting tools automatically unminify these errors for you.
use the min.js files in production or bundle your application code with process.env.NODE_ENV === 'production' and you should be good to go!
If your package.json scripts has dll， try exec npm run dll or yarn run dll.
I am developing my first Shopify app and using heroku to host it. Nothing worked for me until I discovered this topic and one other. Here is my vite.config.js:
import react from "#vitejs/plugin-react";
import "dotenv/config";
/**
* #type {import('vite').UserConfig}
*/
export default {
define: {
"process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
},
//plugins: [react()],
plugins: [
process.env.NODE_ENV !== `production` ? react({
jsxRuntime: `classic`,
}) : react(),
],
};
NODE_ENV=development
I hope this helps someone
In my case, it was because of package-lock.json. Delete and redeploy