Docusaurus error during building the project - docusaurus

First of all let me say that I'm new of Docusaurus and I'm using version 2.
I was building my documentation project and I have got the following error:
Docusaurus Node/SSR could not render static page with path=/docs/My_MDX_Page because of error: useBaseUrl is not defined
I'm using a MDX page to get the baseURL to retrieve static contents.
The MDX page:
---
title: title
hide_title: true
sidebar_label: item
---
import useBaseUrl from '#docusaurus/useBaseUrl';
## Section
| Name | image |
| :--- | :--- |
| YL_GN3 | <img src={useBaseUrl('img/YL_GN3.png')} /> |
I think I'm doing something wrong even if executing without building it works (by npm start).

npm install was executed.
Here is the directory structure of project:
+ .docusaurus
+ build
+ docs
+ node_modules
+ src
+ static
+ versioned_docs
+ versioned_sidebars
babel.config.js
docusaurus.config.js
package-lock.json
package.json
README.md
sidebars.js
versions.json
UPDATE
For reasons that I don't know, it has started working. I have changed docusaurs config, adding the baseUrl different from '/' and 'index.js' in order to have the docs as landing page

Related

Vue cannot use the <script import>?

I was making a website in VueJS but it isn't working. App.vue at the top has
<script setup>
import Page from './components/Page.vue';
import Top from './components/Top.vue';
</script>
When I try to run dev mode: vite dev (npm run dev) or try to build it: vite (npm run build) it dosent like the last > at </script>
Note: I'm using JS instead of TS
It will not compile or even run the dev server.
ERROR:
Failed to parse source for import analysis because the content contains invalid JS syntax. Install #vitejs/plugin-vue to handle .vue files.
11:07:43 am [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install #vitejs/plugin-vue to handle .vue files.
Plugin: vite:import-analysis
File: D:/Developing/denhamrocknet/home/denhamrockjs/src/App.vue
1 | <script setup>
2 | import Page from '.Page.vue';
3 | import Top from '.Top.vue';
4 | </script>
| ^
5 |
6 |
at formatError (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:40862:46)
at TransformContext.error (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:40858:19)
at TransformContext.transform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:37530:22)
at async Object.transform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:41111:30)
at async loadAndTransform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:37373:29)
Failed to parse source for import analysis because the content contains invalid JS syntax. Install #vitejs/plugin-vue to handle .vue files.
11:08:30 am [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install #vitejs/plugin-vue to handle .vue files.
Plugin: vite:import-analysis
File: D:/Developing/denhamrocknet/home/denhamrockjs/src/App.vue
1 | <script setup>
2 | import Top from './components/Top.vue';
3 | import Page from './components/Page.vue';
4 | </script>
| ^
5 |
6 |
at formatError (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:40862:46)
at TransformContext.error (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:40858:19)
at TransformContext.transform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:37530:22)
at async Object.transform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:41111:30)
at async loadAndTransform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:37373:29)
END
I have no idea why. Ive found out that setting: module.exports = { publicPath: '' } otherwise it is just a blank page although when I do I get this error and a white page.
PS: Anything helps! Ill try anything. I'm desperate for it to work.
Fixed Issue!
I FOUND A FIX!
I just removed: module.exports = { publicPath: '' } from my config and now it works! I must have made an error, added the code, fixed the error, and now removed the bad code.
Hope this helps anyone who has the same issue!

Using Vue CLI 3 on XAMPP

A little background..
As mentioned before in https://forum.vuejs.org/t/how-to-make-webpack-vue-work-on-xampp/33808. And it works when I put my Vue project directly in htdocs like this.
htdocs/
| - css/
| - js/
| etc..
However I'm using it differently, here's my current file structure in the htdocs.
htdocs/
| - project1/
| | - css/
| | - some other stuff for project1
| - project2/
| | - css/
| | - some other stuff for project2
| - vue-project/ (Where I wanted my Vue went to)
| | - css/
| | - stuff..
The error I get when I put dist/ of my vue project directly to htdocs/vue-project is 404, because they directly went back to the root file (root is htdocs/), in which it doesn't find the required file to launch Vue Project!
What I wanted
Anything that can launch the project in htdocs/vue-project/. Would accept any answer configuring either settings in the Vue/Webpack OR from XAMPP itself. If you need additional information please do ask in the comment section.
And if it turns out there are no other way, then I would accept answers involving XAMPP configuration on how to start a server in a different directories. Like start a server in htdocs, and other-file would be great as well.
For Vue CLI before 3.x
Try changing assetsPublicPath under build object in config/index.js. Then append your folder name there. Similiar issue that might help https://forum.vuejs.org/t/vue-js-webpack-deployment-for-xaamp-testing/28970
And if vue-router used then add ROUTER_BASE.
https://router.vuejs.org/en/api/options.html#base
For Vue CLI 3
Create vue.config.js inside your vue-projects
Inside it simply add the following
module.exports = {
publicPath: "/{path-to-your-vue-project}"
}
For more information please refer to this docs https://cli.vuejs.org/config/#publicpath

React-native jest test giving unexpected token

Getting an unexpected token from the component class. Looking for advice on how I can proceed.
The failure:
● Test suite failed to run
C:/../react-native/jest/mockComponent.js: Unexpected token (20:23)
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
18 |
19 | const Component = class extends SuperClass {
> 20 | static displayName = 'Component';
| ^
21 |
22 | render() {
23 | const name =
This worked for me https://github.com/expo/expo/issues/2595#issuecomment-440966998
I think the problem was having jest and jest-expo installed
For me, this worked:
"transformIgnorePatterns": [
"/node_modules/(?!sentry|react-native).+\\.js$",
],
Notice that you must list there all your node_modules
/Users/guillermo/alibrate/alibrate-mobile/node_modules/react-native/jest/mockComponent.js:20
static displayName = 'Component';

How to use pdfjs with aurelia-cli

Has anyone got pdfjs (https://github.com/mozilla/pdf.js) working with the Aurelia cli?
I'm getting nowhere fast with getting it up and running.
I followed the docs here (http://aurelia.io/docs/build-systems/aurelia-cli#adding-client-libraries-to-your-project) and guessed that main needed to be set to webpack, but the paths in that file seem to be interpreted incorrectly.
------- File not found or not accessible ------
| Location: /home/ubuntu/workspace/public/pdfjs-dist/build/pdf.js
| Requested by: /home/ubuntu/workspace/public/src/modules/admin/admin.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
------- File not found or not accessible ------
| Location: /home/ubuntu/workspace/public/src/worker-loader.js
| Requested by: /home/ubuntu/workspace/public/src/modules/admin/admin.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package

React native pure js module with flow

I'm trying to publish my first react native pure js module which uses flow. I'm having a hard time.
My repo is here - https://github.com/Noitidart/react-native-buttonex
Source is in ./src/index.js. I use flow there. So I have done in my repo npm i flow-bin#0.57.3 --save-dev.
I then simply did a npm publish. Is there anything else I need to do?
It is not able to be used in Expo.
Doing:
import Button from 'react-native-buttonex' // ERROR. The Expo team has been notified.
Adds that "Error: expo team has been notified". And trying to run it shows red box with "Failed to download module".
I thought to stip the flowtypes so I added .babelrc with:
{
"presets": ["flow"]
}
But when I run babel I get error:
SyntaxError: src/index.js: Unexpected token (29:10)
27 |
28 | class Button extends Component<Props, State> {
> 29 | state = {
| ^
30 | activeAnim: new Animated.Value(0)
31 | }
It seems like its not liking the ES2017 stuff which is normal for react-native.
May you please guide m on how to properly publish this?