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.
Related
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();
}
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.
Error: Webpack Compilation Error ./client/src/containers/Login.jsx
Module not found: Error: Can't resolve 'Src/api' in
'/Users/user/Documents/product-bots/client/src/containers' resolve
'Src/api' in
'/Users/sathish/Documents/product-bots/client/src/containers' Parsed
request is a module using description file:
/Users/sathish/Documents/product-bots/client/package.json (relative
path: ./src/containers)
I am trying to set up and run cypress inside a react.js app. There is an import statement in the app that says import api from 'Src/api. Cypress fails at this point and throws the above error.
Can anyone please help me to resolve this issue?
Below is the test code
import Login from '../../../client/src/containers/Login'
describe('Login', () => {
it('Tries login', () => {
mount(<Login />)
cy.get('.login-form').should('exist')
})
})
The above code calls login.jsx which has the 'Src/api' import.
jsconfig.js:
"paths": {"Src/*": ["src/*"] }
webpack.config.js:
alias: { Src: path.resolve(Paths.srcDir)
I need to know about the configuration file. Why we use it to react project.
with next.js, you can write your environment variables in ".env.local" but those environment variables will be for server-side. if you want to add environment variables for your client, you add it to next.config.js
If you want to add a new webpack plugin
If you want to convert your app to progresive web app
module.exports = {
webpack: (config) => {
// adding a webpack pugin
config.plugins.push(new MonacoWebpackPlugin());
return config;
},
// this will pass the env variable to the client side
env: {
AUTH0_NAMESPACE: process.env.AUTH0_NAMESPACE,
BASE_URL: process.env.BASE_URL,
EMAILJS_SERVICE_ID: process.env.EMAILJS_SERVICE_ID,
EMAILJS_TEMPLATE_ID: process.env.EMAILJS_TEMPLATE_ID,
EMAILJS_USER_ID: process.env.EMAILJS_USER_ID,
BASE_URL: process.env.BASE_URL,
},
// set up for progressive app
pwa: {
dest: "public",
// runtimeCaching,
swSrc: "service-worker.js",
},
};
You need to add configuration file in next js project for custom advanced behavior of Next.js. The file next.config.js is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build
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