I have a react application that uses the unlayer email editor. I also have some custom tools which I include in the editor like this:
import EmailEditor from 'react-email-editor';
<EmailEditor projectId={1071} options={{customJS: ['https://cdn.jsdelivr.net/gh/maxt41/unlayer-tools#d874675d04fcf4942f7eef264119af8afc362f1d/LinkCaptureTool.js', 'https://cdn.jsdelivr.net/gh/maxt41/unlayer-tools#d874675d04fcf4942f7eef264119af8afc362f1d/UnsubscribeTool.js']}} ref={emailEditorRef} />
That line alone generates the entire email editor and the customJS: ... references my custom tools.
This is the Email editor in React development mode:
This is the Email editor in React build mode:
Obviously the custom tools are "hosted" elsewhere so I am unsure why when building the app they aren't showing. I have tried making them within the app but I can't figure out how to reference them as customJS tools and I'm unsure if that would fix the issue.
I have tried rebuilding and recreating the Jsdelivr links to no avail. The tools themselves also work perfectly in development. There is no error messages in console or with react dev tools.
Related
I'm currently implementing the Monaco Editor from Microsoft (https://github.com/microsoft/monaco-editor), with a plugin for yaml validation, autocompletion, etc. . (https://github.com/remcohaszing/monaco-yaml) in our react js APP.
Maybe it is also important to tell you, that our authentication process gets managed via Keycloak.
When I'm running my code in development (React-scripts start) everything is working as expected.
I can create the editor, the schema gets implemented correctly and autocompletion is also working.
BUT as soon as I try to use the editor in PRODUCTION Build it seems that it cant load my workers correctly, following the editor is not working as it should.
I always get these errors in production:
I tried to use monaco-editor-webpack-plugin with React Rewired but it didnt have an positive effect either.
I also tried to use the worker loader to load the workers, but it also didnt help
Any more Ideas how I can fix this ? Has this to do something with CORS ? Because it tries to load files in a url? Or am I missing something ?
Thanks in advance
What I tried: Monaco Webpack Plugin, plain webpack, worker-loader
Expected Behaviour: Monaco Editor with Monaco Yaml working in production build.
Current behaviour: Working fine in development build, cannot load workers in production.
The problem was, that my keycloak (on a different port) rejected to load the working scripts. After handling this problems, the editor is working fine.
Background
I often use "React Developer Tools" to understand the component structure of various website that I like and take inspiration from. Though, lot of websites have random names for the components, few websites have distinguishable names which can be helpful for aspiring React Developers or hobbyists. One such website is https://www.joshwcomeau.com. Below is a screenshot from one of the pages in his website. The name of few of the components explains itself what it is going to render. And since this is his blog, where he talks about various tips and tricks for React Development, it becomes helpful to have a look at this.
Question
Now when I develop a website using create-react-app(CRA), all my component names are minified to a couple of random letters by Webpack. How can I control this behavior?
Note: My main question is - How to control this behavior in any React application (not just CRA). I know that Josh uses Next.js for his blog, so does any framework like Gatsby, Next etc... provide control over this?.
Note:
I'm aware that the component names are visible in development mode, but I would like it to be visible in production too (for the reason explained above in "Background").
I'm aware that webpack can generate "sourcemap" but doing that would expose my entire code structure. So I prefer not to use sourcemaps
Screenshot of Josh's Website
Screenshot of My Website
You can achieve this with a third party library:
From webpack-react-component-name documentation:
Normally React component names are minified during compilation. This plugin makes these component names available in production bundles by hooking into Webpack's compilation process, traversing the AST looking for React component definitions and updating the emitted source code to populate the displayName property. This is the property that, when populated, is used by the React Dev Tools extension to determine the name of a component.
So you can install this webpack plugin with:
npm install webpack-react-component-name -save-dev
once it is installed, add the plugin to the plugins list in webpack configs:
plugins: [
new WebpackReactComponentNamePlugin()
],
I've created a basic Create React App with TypeScript template
npx create-react-app cra-test --template typescript
I added just a simple MyButton component and passed a on click handler to it.
When I'm profiling it with Chrome DevTools links to the source in the profiler are incorrect and not working as if there where no source maps.
When I run console.trace in my onClick handler stack trace looks good.
How can I get correct links to source files in the profiler tab working?
Thanks!
In order to get this working you need to change webpack's setting
devtool: 'eval-source-map'
You can set it using config-overrides.js (react-app-rewired).
Probably there are some other source map types that will work but that one gives you the most detailed information.
More on source map types here
https://webpack.js.org/configuration/devtool/
You can read about devtool setting here.
https://webpack.js.org/guides/development/#using-source-maps
I have added 'React Developer Tools' as Chrome extension in my browser which shows me which all sites are using ReactJS. While writing a post today, I noticed that the extension shows my WordPress editor is using the production build of React.
Extension shows the editor is made in React
I quickly visited my WordPress site but the extension doesn't trigger there.
Actual WordPress site
So what is happening here? Is this just a bug in the extension? I know that you can use WordPress as a headless CMS in React but that is certainly not the case here.
I suppose your wordpress editor just uses a component written with react that is not required on the website (maybe the editor itself?).
It's not uncommon practice. For example, if you add "Facebook comment plugin" on your website, it will add react on the background. If you have the react extension enabled, it will tell you that react has been found, even if it's used just for a little part of the website.
Moreover, I presume your readers are not meant to use the editor, so it make sense that they do not have to download it since is not required for them.
To confirm that's the case, you can open chrome dev tools and use the "network" - it would tell you exactly what resources have been requested by the current page.
React is included at the core of WordPress and obviously, it embeds the production build.
The following is not the cleanest solution but is useful for theme development. It works by replacing the production build for the development one at enqueuing time. You may check for React version that your WordPress installation is using.
add_filter( 'script_loader_tag', function ( $tag, $handle, $src ) {
$replace = [
'react' => 'https://unpkg.com/react#16.9.0/umd/react.development.js',
'react-dom' => 'https://unpkg.com/react-dom#16.9.0/umd/react-dom.development.js'
];
if (!array_key_exists($handle, $replace)) return $tag;
$newTag = str_replace($src, $replace[$handle], $tag);
$newTag = str_replace('><', ' crossorigin><', $tag);
return wp_get_environment_type() === 'development'
? $newTag
: $tag;
}, 10, 3 );
Make sure you have set the environment to 'development' in wp-config.php.
define( 'WP_ENVIRONMENT_TYPE', 'development' );
When i customize vscode source code, i found it hard to add a page.
I know there are many ways to do so, such as Part/Widget/Browserwindow, but only if i new a Browserwindow can i explicitly load html and js files like in chrome browser and it's friendly.
If i use a Part or a Widget, i need to use native js api to do dom manipulation, and it's so inefficient,
~~so i want to know how did vscode team decide to use no ui framework during the development? Is there some trade-off?~~
i tried to import react and react-dom directly in my own contrib file /vs/workbench/contrib/dialog/browser/dialog.ts, and then get successful compilation and the react component shows up, but i don't know how to add babel with the compilation procedure, so i use react without jsx.
so i want to know how to import react framework into vscode source code project to create ui component? Is there some practices?