I have a website built using Docusaurus 2.
Now, I want to embed a Monaco Editor to one page, and I will register a language to that Monaco Editor. I can achieve this with react-monaco-editor, monaco-languageclient and vscode-languageserver in a new React website, but I don't know how to add this to Docusaurus.
First, I added those packages to package.json of my Docusaurus website, then I tried to make a component App, so that I can add <App /> to a Docusaurus page.
In one file for the component, I have:
import MonacoEditor from 'react-monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
In another file for the component, I have:
import { MonacoToProtocolConverter, ProtocolToMonacoConverter } from 'monaco-languageclient/lib/monaco-converter';
import * as monaco from 'monaco-editor';
import { TextDocument } from "vscode-languageserver";
Then I got
./node_modules/monaco-editor/esm/vs/base/browser/ui/codiconLabel/codicon/codicon.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
And
./node_modules/vscode-languageserver/lib/files.js
Module not found: Can't resolve 'child_process' in '/Users/chengtie/Startup/PRODSERVER/10StudioWebsite/newWebsite/node_modules/vscode-languageserver/lib'
Does anyone know what to do make it work?
Seems like the issue here is regarding the CSS being unable to loaded by webpack. You will need to add in CSS loaders for webpack via plugins.
You can try referring to this Pull Request on the Hermes website which adds the Monaco editor to the website and you can try the editor by clicking on "Playground".
Using monaco-editor-webpack-plugin might be better here because it helps you add the necessary loaders, such as the CSS loader you are missing in your current setup.
Related
I am using the react-datapicker inside of SSR project written in Nest.js and Admin.js. I need to add some React components so I need to import import 'react-datepicker/dist/react-datepicker.css' into the project so that should work properly with proper design. The error is says [Nest] 93478 - 02/12/2022, 12:47:22 PM ERROR [ExceptionsHandler] Unexpected character '#' (Note that you need plugins to import files that are not JavaScript). I could not find any solution specific to my problem. Is there anyone can help me to solve this issue?
I faced same issue today i copied the all css in react-date-picker and pasted into local css file.
assets: {
styles: ['/styles/index.css', '/styles/react-date-picker.css'],
scripts: ['/scripts/index.js'],
},
I'm using Laravel 8 with Laravel-mix so that my JS assets are compiled with webpack.
I have imported gojs successfully by doing this:
npm i gojs
Then adding this to my bootstrap.js:
import * as go from 'gojs';
Then compiling using:
npm run dev
So far so good my app.js now includes the gojs code and I can run basic gojs samples on my pages.
However I cannot figure out how to include any gojs extensions.
I've tried adding an extension to my boostrap.js in all these different ways (separately not all at once):
import DataInspector from 'gojs/extensions/DataInspector.js';
import * as Inspector from 'gojs/extensions/DataInspector.js';
import { DataInspector } from 'gojs/extensionsTS/DataInspector';
require('gojs/extensions/DataInspector.js');
require('../../node_modules/gojs/extensions/DataInspector.js');
Most compile without error and when I check my app.js compiled javascript the DataInspector code appears to be included.
However when I add a sample script to my page that uses the Inspect I get error:
Uncaught ReferenceError: Inspector is not defined
So it appears the DataInspector extension has not been included. The only way I can get it to work is to directly add a script tag to the DataInspector.js file in my HTML. However I'd like to figure out how to properly import it with all my other assets.
It's best to copy extension files into your own directory to use them. They are provided as examples of how to extend the library, and should not be imported directly.
If you look at extension code, you'll see it carries this warning:
/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/
Here is my folder structure
when i tried to run my react app it give me this error
Failed to compile.
./src/css/owl.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I tried google it and it says i need to create manual loader to load my html file. It is regarding to webpack but I don't know how and where I configure loader to load the owl.html file.
Short answer:
No, you can not simply convert your HTML/CSS/JS in to React JS through a plugin.
There is no need of webpack her, as it is already provided and packed by create-react-app, you can simple create a component of your page template provided.
Long Answer:
React project architecture says, One has to create a React JS component for every UI page/segment/section/widget. So for creating a page in react from the html file provided you simple has to crate a component file called Owl.js in the components folder.
In the Owl.js write the following:
import React from 'react';
export default () => {
return (
<React.Fragment>enter code here
// paste the code from your owl.html file. (everything that is written under <body>)
</React.Fragment>
)
}
Use this newly created component in the App.js you have by importing it into.
Also use the css by importing it simply in the Owl.js file, like this:
import '~you-path~/owl.css';
And finally to make all the JS written in owl.js you have to carefully integrate the functions, listeners and data you are using in the newly created component out of the return statement.
I hope this clears the confusion here.
I want to add some functionality to my existing website with React.
I followed this tutorial. I came to a point where I wanted to separate classes from single js file to one for each class.
Then I used
import InputField from './InputField';
Which gave me this error:
Uncaught SyntaxError: Unexpected token import
When I imported my classes the same way in an example which was created via this tutorial, it worked perfectly.
I also tried with require(), but that gave me an error message saying that require() is not defined.
So how to divide classes from single file to multiple files on an existing website that has React as an addition? Am I forced to write all code in one file, if I just add React to website? I suspect, that it does not compile as it somehow should. (I am just starting with React)
You either have to use native ES modules or use a bundler like webpack or Rollup
I am trying to import a local pdf file in my vue project (bootstrapped using vue-cli#latest, using default config) but vue tries to parse it and gives this error:
./src/assets/myFile.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
I just want to make the file available for download from a button click so I don't need to parse it but I need it to go through webpack so that the filename will get hashes, hence I want to avoid putting it in public folder and use env.BASE_URL.
Here the my .vue file for the component.
<template>
<div class="root">
<a
v-bind:href="MyPdf"
download='Something.pdf'
>
Download as pdf
</a>
</div>
</template>
<script>
import MyPdf from '../assets/my.pdf';
export default {
name: "PdfDownload",
data: function () {
return { MyPdf }
}
}
</script>
<style scoped>
...
</style>
I found similar questions on SO, but none of the answers solve the problem. I only solution I found was on vue docs to use public folder but I don't want that because I want hashes in filename. I am new to vue, I come from React, and in React you can simply import a pdf, word etc. file in js and use it in href of a and users can view/download it.
You don't have to import it. Just create a <a> tag with correct URL to your pdf file.
You can check if the path is correct downloading directly in the browser before.
Edit:
In case you are facing the same problem and you are using webpack, you have to make sure you are using a loader for the pdf extension. In this case, the user was using vue-cli, and the way to change webpack config is on vue.config.js. I created a gist to show how add it.