I'm using the #remote-ui/react library to render my React code in a web worker. I'm using Vite for my project, but whenever I try to use JSX in my worker script, I see the following error:
Uncaught Error: #vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
I've created a minimal reproduction here.
Disabling React Fast Refresh seems to do the trick:
// vite config
{
plugins: [react({ fastRefresh: false })],
worker: {
plugins: [react()],
},
}
If by chance, anyone encountered the same error using Laravel Vite, one might forget to add #viteReactRefresh before the #vite blade directive as per the documentation.
Related
I have a ReactJS project and created one using create-react-app. I am trying to use aliases to avoid having too many '../../..'. I amended my tsconfig.json like so.
{
...
baseUrl: ".",
paths: {
"#src/*": ["src/*"]
}
...
}
I have a simple constants.ts file at /src/constants.ts
I am importing a constant in this file from /src/pages/landing/sign-in.tsx like so
import { CONST_VAL } from '#src/constants';
Typescript was able to detect my constants without issue. But when I try to run it, There was error saying "Unable to resolve module". Any idea why?
Tried this same technique in nextJS project and worked fine. But seems to have issue in a pure ReactJS app.
I've inherited a React app (it's custom react app using version react 17.0.2, not based off CRA), and when an error occurs the whole screen displays the error as shown. Is there a way to stop this? I have tried adding an ErrorBoundary, but while they seem to be executed the error is still displayed.
This looks like the error overlay from Webpack's dev server, try to change your webpack configuration as follows:
module.exports = {
//...
devServer: {
client: {
overlay: false,
},
},
};
(https://webpack.js.org/configuration/dev-server/)
But why do you want to disable it? It is pretty useful and it is only present in development. You should of course also have error boundaries for production.
So I'm trying to install and use react-wavesurfer in Meteor which is a react component wrapper for an existing js library (wavesurfer.js). It requires that the wavesurfer.js file (which has to be installed separately) is made available as a global variable.
The suggestion is to use webpack for this as below :
// provide WaveSurfer as a globally accessible variable
plugins: [
new webpack.ProvidePlugin({
WaveSurfer: 'wavesurfer.js'
})
],
// Alias `wavesurfer` to the correct wavesurfer package.
// (wavesurfer.js has some non-standard naming convention)
resolve: {
alias: {
wavesurfer: require.resolve('wavesurfer.js')
}
},
I've never used Webpack (not entirely sure what it does) and I'm a Meteor / React newbie.
So I installed :
meteor add webpack:webpack
And now I'm getting the following error in the console :
While determining active plugins:
error: conflict: two packages included in the app (webpack:webpack and ecmascript) are both trying to handle *.js
error: conflict: two packages included in the app (webpack:webpack and ecmascript) are both trying to handle *.jsx
From the error I assume that ecmascript (again something I know nothing about) is doing a similar job to webpack already which is causing the clash?
So, my question... How do I set this up using ecmascript instead? I literally have no idea!
Try to use new package that I still maintain
https://github.com/ardatan/meteor-webpack
I am using react-treelist component and inside that i am using office-ui-fabric callout(its like a tooltip) component to have a tooltip on elements in tree structure when i am running this program it runs correctly but when i am bundling and using the bundle file in my project as a module it gives error:-
Exception in Layer.componentDidUpdate(): Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded
I have tried many solutions from diff forum but none of them worked.I am sure problem is of multiple copies of react.
Details of what i did
I cloned react-treelist from github then i installed office-ui-fabric module then i changed some code to make callout component work with react-treelist, i did npm start it worked fine the i did npm run dist and copied the bundle file to my project directory inside a folder named react-treelist and then imported that file as module in my code and ran the code it gave me the above error.
Can anybody suggest me how to accomplish the above task without having multiple copies of react in my application
If you use webpack to build your application, you can use the resolve.alias configuration option to make sure that all modules refer to the same react library:
resolve: {
alias: {
'react': fs.realpathSync('node_modules/react'),
'react-dom': fs.realpathSync('node_modules/react-dom')
}
}
If you use web pack then you can fix it by adding the following to Webpack config
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
How do I prevent webpack from bundling react?
Currently I am writing a library that causes a You've loaded two copies of React on the page. error after distribution. I suspect that webpack starts bundling all dependencies, including devDependencies.
Is there any way around that?
In my case it should be possible for the library to get React out of node_modules.
So what I basicly want is, instead of webpack resolving the require('React), it should just leave require('React) untouched.
You can use webpack externals.
externals: {
// Use external version of React
"react": "React"
}
UPD Detailed docs on the resulting code generated for externals.
To make webpack "leave require('React) untouched" you need the following config
{
output: { libraryTarget: 'commonjs' },
externals: { react: true }
...
}
Moelalez, just like Yury Tarabanko stated, externals option allows you import an existing API into applications. For context, say you want to use React from a CDN via a separate tag and still declare it as a dependency via require("react") in your application, you would use externals option to specify that.