I'm not quite sure what's going on here, but I have a React Native app that was ejected from Expo, with a babel.config.js defined, on Babel 7.9.0. I've thrown a console log in there to see if the config ever gets loaded, i.e.
module.exports = function (api) {
console.log('loading babel config!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
But the console log only ever seems to print out once, and never again until I reboot my computer, even if I change the file, clear my yarn cache, or node_modules.
Actually, just figured it out: looks like I needed to clear the React Native cache itself before the config gets reloaded: yarn react-native start --reset-cache
Related
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.
I created new vue project using vue create and added ionic & capacitor based on the following tutorial vue ionic capacitor Tutorial
yarn add #capacitor/core #capacitor/cli
yarn cap init
yarn cap add android/ios and electron
update capacitor.config.json as follow
{
"appId": "xxxx.xxx.xxxx.vuecapacitordemo2",
"appName": "vuecapacitordemo2",
"bundledWebRuntime": true,
"npmClient": "yarn",
"webDir": "dist"
}
I have a problem when running electron, yarn run electron:start ,
I get net::ERR_FILE_NOT_FOUND .Googling for answers found couple of answers all lead to adding link_1 link_2 link_3 vue.config.js file with the following content. with different values for publicPath
module.exports={
publicPath: '/',
runtimeCompiler: true
}
That causes the application not to proceed beyond splash screen. Any hint/idea how to fix this ?
Thanks in Advance
I was able to get my electron app to run without errors by making two changes.
First I added (projectRoot)/vue.config.js
module.exports = {
publicPath: './',
}
I also added <base href="./"> within the <head> tag inside (projectRoot)/public/index.html
After making this change make sure to build "npm run build" and then "npx cap copy" to sync all your asset files and then test "cd electron & npm run electron:start"
For reference, I was getting errors similar to GET file:///js/chunk-de72da5c.95253596.js net::ERR_FILE_NOT_FOUND. After adding the changes to vue.config.js I noticed that links to my assets have the full path of the directory of my app.
The issues seems to be with how electron handles relative paths so you have to explicitly change how webpack compiles the paths by default. Hope this helps.
What are the steps of the bundling/packaging process? I know there are expo-cli, babel, metro... but do not get how they call each other to produce the final javascript bundle.
Any ideas or direction?
P/S: in a specific case, I want to ignore some files from being bundled, but do not know where to config this.
Just for anyone who may need this...
The flow is expo-cli call the react-native's local-cli at (node_modules\react-native\local-cli), which will transform the code with babel and package them with metro. expo-cli also pass packager options likes packagerOpts to react-native.
Also this article is helpful to understand babel: https://kleopetrov.me/2016/03/18/everything-about-babel/
In my specific case, I modify app.json like this:
...
"packagerOpts": {
"assetExts": ["ttf", "tkon"]
},
"assetBundlePatterns": ["./app/config/*.tkon"]
...
which tells the packager that all files with .tkon extension is asset. They will be exclude from the final JS bundle, and can be required as asset.
Later I load this asset with:
let asset = Asset.fromModule(require('../../config/products.tkon'));
await asset.downloadAsync();
let data = await FileSystem.readAsStringAsync(asset.localUri);
data = JSON.parse(data);
That's it
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.
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