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
When i try to run react-native project via expo I get this error
E:/reacrNative23april/firestoreTester26April/node_modules/react-native/Libraries/StyleSheet/processColor.js
Module not found: Can't resolve '../Utilities/Platform' in 'E:\reacrNative23april\firestoreTester26April\node_modules\react-native\Libraries\StyleSheet'
This seems to be a common issue (as apparent through a google search), but appears to be unsolved.
There is some buzz on this link https://github.com/expo/web-examples/issues/73, but the solution is not clear.
Has anyone experienced and resolved this?
More data-
Mine is a bare workflow project, with some native modules, not sure if they can be the issue
I have tried deleteing the node_modules folder and running npm install, but no luck
There is no non-native (i.e. web) version of Utilities/Platform in react-native.
You can create a webpack.config.js (expo has a helper for this) and add an alias for the relative reference to Utilities/Platform used from within various rn libraries to the one provided by react-native-web:
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
// Resolve relative reference ../Utilities/Platform using react-native-web
config.resolve.alias['../Utilities/Platform'] = 'react-native-web/dist/exports/Platform';
return config;
};
I need some guidance. I am experiencing an issue where webpack throws an error that it can not find a module . I was trying to add a require statement of a package(included as dependency). I got it working in another project where I don't need webpack. The code looks basically as follows:
context.subscriptions.push(
vscode.commands.registerCommand("vstodo.helloWorld", () => {
vscode.window.showInformationMessage(
"test"
);
const sfdx = require('sfdx-node');
sfdx.auth.web.login({
setdefaultdevhubusername: true,
setalias: 'HubOrg'
})
.then(() => {
// Display confirmation of source push
console.log('Source pushed to scratch org');
});
}));
My webpack config can be found here
I uploaded a simplified version of the repository here Repository
containing all the configuration files for rollup and webpack.
If I leave out the part starting at the require statement everything works again.
Any help on how to tackle this would be much appreciated, thanks
The vscode extension page has a short troubleshooting guide about this: https://code.visualstudio.com/api/working-with-extensions/bundling-extension#webpack-critical-dependencies.
They suggest the following solutions:
Try to make the dependency static so that it can be bundled.
Exclude that dependency via the externals configuration. Also make sure that those JavaScript files aren't excluded from the packaged extension, using a negated glob pattern in .vscodeignore, for example !node_modules/mySpecialModule.
This is driving me insane, so I'm hoping someone might see something that I'm missing. Thank you for your help in advance.
I have a gulp file and I have installed via npm, babel-core, babel-preset-es2015, babel-preset-react. From researching online and in high hopes even though this might not be right, I have renamed the gulp file to be gulpfile.babel.js and I have created a .babelrc file with
{
"presets": ["es2015"]
}
I am using browsersync and when I launch the gulp task the html file loads, but the index.js I have includes 'import React....'. This files causing the error in the JS console that says 'Uncaught SyntaxError: Unexpected token import'.
I thought the es2015 npm packages I have should be taking care of that ES6 syntax?
In the gulp file the task that I thought was suppose to take care of that is;
// convert jsx to JS
gulp.task('babelFiles', function() {
return gulp.src('js/*.(jsx|js)')
.pipe(babel({
compact: false
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
The gulp task that is responsible for launching this is:
// Default task
gulp.task('default', ['babelFiles', 'browserSync']);
I am puzzled as to what could be wrong here?
Any ideas would be much much appreciated!
There are two problems:
Gulp seems like doesn't support you syntax for file extension mask:
gulp.src('js/*.(jsx|js)') // not working
gulp.src('js/*.{js,jsx}') // working
You piping from js directory to js directory but since there are no matches because of the problem (1) it makes you believe the babel is not working
Update
Gulp uses glob syntaxt to match files - according to glob syntax the qualifier for amount of items should be included before ( | ) - in our case following syntax would be valid
gulp.src('js/*.#(js|jsx)')
where # means match exactly one occurrence of pattern after #.
In your case there was no qualifier presented
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