I'm trying to debug my android app with react native v0.66.1 and react native tools v1.8.1 in vsCode. But after running the app and attach to packager, or launch in debug mode,
I got this error com.facebook.react.commot.JavascriptException: Invalid or unexpected token.
update babel.config.js of your project : (assume your metro-react-native-babel-preset is 0.58.0)
from:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
to:
module.exports = {
presets: [['module:metro-react-native-babel-preset', {
unstable_disableES6Transforms: true
}]],
};
finally run yarn start --reset-cache to restart app.
Related
I am using an esbuild API build to bundle a basic React app . But it keeps bringing up the following error Uncaught ReferenceError: require is not defined at bundle.js.Below is my build.js code.
const esbuild = require('esbuild');
async function build() {
await esbuild.build({
entryPoints: ['index.js'],
outfile: './build/bundle.js',
format: 'cjs',
loader: { '.js': 'jsx' },
});
}
build();
What I tried:
Clearing terminal history.
Deleting bundle.js and regenerating it again
Restarting vs-code.
Try to change the scope of require to the scope where you are trying to use it.
I replaced const esbuild = require('esbuild'); with import esbuild from 'esbuild'; and changed the format to iife. And it worked.
I'v already migrated from webpack to vite and used vite pwa plugin to register a service worker.
My problem is that when I try to use a custom path for service worker, Vite will work fine in production, but in development cause 404 error.
here is my VitePwa vite.config.js:
VitePWA({
srcDir: 'src',
filename: 'sw.js',
devOptions: {
enabled: true,
},
strategies: 'injectManifest',
injectManifest: {
injectionPoint: undefined
}
}),
I already got that, in the development environment, vite pwa plugin is looking for sw.js in the public directory but I want it to get it from src
I got the solution
First, setting type as module is needed in vitePwaPlugin config in devOptions:
devOptions: {
enabled: true,
type: 'module',
},
and vitePwaPlugin will try to install dev-sw.js?dev-sw file as service worker
Second, for handling registeration I used registerSW from virtual:pwa-register
import { registerSW } from 'virtual:pwa-register';
if ('serviceWorker' in navigator) {
registerSW();
}
Module not found: Error: Can't resolve 'process/browser' in '/Users/nigelng/oxpay-merchant-portal-fe/node_modules/xlsx'
Did you mean 'browser.js'?
I have installed xlsx 0.18.5 npm package to export xlsx files, I found out that's a webpack issue (https://github.com/SheetJS/sheetjs/issues/2527), but the solutions didn't work for me.
do anyone experience the same error?
The way I fixed this was by using the package #craco/craco so you can manually change the webpack config file without ejecting create-react-app (since that is permanent). Once craco is installed create a file in the root directory named craco.config.js and then copy and paste this configuration, should fix your problem:
const webpack = require("webpack");
module.exports = {
webpack: {
configure: {
module: {
rules: [
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
}
}
};
Make sure to change your start script to "craco start" and you should be off to the races.
Unable to resolve module #env from D:\react\weatho\weatho-app\App.js: #env could not be found within the project
10:import {REACT_APP_WEATHER_API_KEY} from "#env";
my env file looks like this:
REACT_APP_WEATHER_API_KEY=2607fb610e6f9fecd16c84408d0b42a2
and my Babel file looks like this:
module.exports = function(api) {
api.cache(true);
return {
plugin: ['babel-preset-expo','module:react-native-dotenv'],
}
}
and my env file is in root folder along with Appjson and few other files
You should add a plugin like this(.env file must be in the root directory)
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module:react-native-dotenv",
{
moduleName: "#env",
path: ".env",
},
],
],
};
};
And don't forget to restart the expo start and ios/android restart the app.
If you are still getting the same issue then it can be a cache issue.
You can easily clear the babel cache by running the following command :
rm -rf node_modules/.cache/babel-loader/*
or
yarn start --reset-cache
or
expo r -c
Your babel config has 'plugin' which should be 'plugins'
yarn start --reset-cache
npm start -- --reset-cache
expo start -c
I had a CSR app and now implemented Server-Side Rendering (SSR) with React, and get this error
Error: Couldn't find a style target
We used reactDOMserver, react-app-wire, with webpack-override file
See webpack configs below:
const { resolve } = require("path");
require("ignore-styles");
module.exports = {
webpack: function (config) {
config.entry = resolve(dirname, "../client/src/ssr");
config.optimization = undefined;
config.output = {
filename: "ssr.js",
globalObject: 'this',
libraryTarget: "commonjs",
path: resolve(dirname, "../client/build"),
};
return config;
},
};
from server
app.get("^/$", (req, res) => {
Object.assign(global, {
navigation: {},
window: ssr.getWindow(),
navigator: {
userAgent: req.headers["user-agent"],
},
global: {},
document:ssr.ssrDocument
});
const App = require("./build/ssr");
const context = {};
let app = App.default(req.url, context);
then res,render app
AND SSR JS FILE
ssr.js file :
import { renderToString } from "react-dom/server";
for renderToString(
....
<App/>
....
)
And received Error: Couldn't find a style target
I had a CSR app and now implemented Server-Side Rendering (SSR) with React, and get this error
Error: Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid
Get this error when I run the server and try to access the page.
We also tried other approaches with these loaders:
css-loader, sass loader and style-loader and even with isomorphic-style-loader
They led to the error with No PostCSS config and after fixing this by adding to the project postcss.config.js file AND AFTER we received same error about style target and additional error with antd
Error: No PostCSS Config found in: D:_PROJECT....\client\node_modules\antd\dist
Tech sack in use: nodejs, reactjs, antdesign, babel and webpack.
I already tried a lot of solutions from StackOverflow and other sources, nothing helped!
Please, help me to solve it.
Thank you!
I think you cannot use style-loader server side.
Find the loader like this: https://github.com/codebandits/react-app-rewire-css-modules/blob/master/index.js just use style-loader instead, and remove it.. or switch to razzle