docusaurus fails to find images after build - build

I have a Docusauris site that works fine when in development mode, served using npm run start. My docs pages (e.g. docs/GettingStarted.md) include images such as:
<img src="/images/Buttons.png" width="400"/>
which are displayed properly when using the development server.
However, if I now run npm run build and npm run serve, the images are not found. The build process should have changed the URL to, e.g. assets/images/Buttons.png, but it didn't; it remains unchanged as /images/Buttons.png.
It is possible that this arises from a bad docusaurus.config.js. The docusaurus directory is at http://localhost/prsm/doc/help and I am looking at the served pages at http://localhost:3000/prsm/doc/help/
The docusaurus.config.js config has the lines:
const config = {
title: 'PRSM',
tagline: 'Participatory System Mapper',
url: 'http://localhost',
baseUrl: '/prsm/doc/help/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: '/images/favicon.ico',
...
What am I doing wrong?

What I should have done is read the documentation even more closely. The correct syntax for what I was trying to achieve is:
<img src={require("/static/images/Buttons.png").default} width="400"/>

Related

Updating old RMarkdown hugo website running into errors

It's been a few year's since updating my personal website: https://statsbylopez.netlify.com/
That site was built with what now appears to be an outdated Hugo theme (hugo-academic).
On a new computer, I've downloaded the same repo and went to make changes, but when trying to render the site, ran into errors.
blogdown:::serve_site()
Renders the following error
Launching the server via the command:
C:/Users/michael.lopez/AppData/Roaming/Hugo/0.101.0/hugo.exe server --bind 127.0.0.1 -p 4321 --themesDir themes -t hugo-academic -D -F --navigateToChanged
Error: Error building site: failed to render pages: render of "page" failed: "C:\Users\michael.lopez\Documents\GitHub\mlopez\themes\hugo-academic\layouts\_default\single.html:1:3": execute of template failed: template: _default/single.html:1:3: executing "_default/single.html" at <partial "header.html" .>: error calling partial: "C:\Users\michael.lopez\Documents\GitHub\mlopez\themes\hugo-academic\layouts\partials\header.html:9:10": execute of template failed: template: partials/header.html:9:10: executing "partials/header.html" at <.Hugo.Generator>: can't evaluate field Hugo in type *hugolib.pageState
It appears the original Hugo themes are outdated (wowchemy), but I also know changing themes is not recommended (see here).
Any advice?
This is the same problem as the one reported in the blogdown Github repo. I'm just copying the answer here:
If you have an old site with the wowchemy/academic theme that used to work, it shouldn't be too hard to make it continue to work. The only thing you need to figure out is which Hugo version you were using at that time. Then pin the Hugo version in .Rprofile (follow the tips of blogdown::check_site()). If you don't remember the version now, you may
either view the HTML source of the old site and see if the Hugo version was written there (of the form <meta name="generator" content="Hugo X.Y[.Z]" />
or browse the Hugo releases: https://github.com/gohugoio/hugo/releases and guess the version released at about the same time as when your old site was created.
Then install that version of Hugo with blogdown::install_hugo("THAT_VERSION").
Read the docs. Or at least search them for "hugo.generator"
Understand you don't need Hugo.Generator.
Delete it.
See if it builds.

Vue CLI plugin to add Jest test runner doesn't transpile .js files

Just a quick disclaimer, I cannot reproduce this on another project, which is why I'm here instead of making an issue on the Github.
Issue
So a quick demo project I made to show a co-worker how to use the Vue test utils, went off the wagon. It doesn't get picked up in the transform part of the jest.config.js.
I made the project with the Vue CLI, using vue create demo-project choosing ESlint and Babel, then running vue add #vue/cli-plugin-unit-jest. Everything went fine, I committed, ran the test command and everything went fine.
So we started testing snapshots, and everything was fine. Next day, come back to the project to keep going, and this is the error I get.
> vue-jest#0.1.0 test:unit .../demo-projects/vue-jest
> vue-cli-service test:unit
FAIL tests/unit/example.spec.js
● Test suite failed to run
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:
.../demo-projects/vue-jest/tests/unit/example.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.163s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
Just running the normal npm run test:unit results in the example.spec.js that comes with the test utils is not babel'ed, and fails in the Node test environment.
Attempted Solutions
Did not work
Deleting node_modules and reinstalling
Deleting package-lock.json, in addition to the above step ( separately done )
Reverting back to the commit when it was working
Checking out to a different branch, deleting all the files that vue add #vue/cli-plugin-unit-jest added, then running the command again to re-create all the files
jest.config.js
tests/ - and all it's files
Worked
Pretty clear what's happening, so in the jest.config.js file, I added the .js file under the transform field.
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.(js|jsx)?$': 'babel-jest' // added .js
},
This solution solves the problem, and properly transforms the example.spec.js
Attempted Recreation
I tried to see if this was a bug by creating another project, running the same steps and it worked just fine. I even copied and pasted all the files from the broken one to the new one, looking for differences in git. It was exactly the same. Which is why I thought it might be node_modules, but it still didn't work.
Uhh
Hopefully this isn't a waste of time for anyone reading since it's not truly a problem. I mainly wanted to have it for anyone who might have the same issue to see that adding the .js extension would solve the problem without having to start over, but also curious if anyone has insight on why this might be happening?

Load Angular2 Bootstrap template ng2-admin on Go server : download fail

I am new to this forum and a newbie in Angular2 and Golang.
My issue is that I would like to try out a template on a Go server.
So, I created a main.go file containing this main() function :
func main() {
r := mux.NewRouter()
p := http.StripPrefix("/", http.FileServer(http.Dir("./src/")))
n := http.StripPrefix("/config", http.FileServer(http.Dir("./config/")))
r.PathPrefix("/config/").Handler(n)
r.PathPrefix("/").Handler(p)
fmt.Printf("Starting server on :33166 \n")
http.ListenAndServe(":33166", r)
}
and run go run main.go on the project directory, but its fails in this request
GET http://127.0.0.1:33166/webpack-dev-server.js
It might be very simple, but I couldnot figure it out. So, any idea to how I'm able run the project on server would be appreciated. Thanks.
According to the ng2-admin installation guidelines, if you want to use ng2-admin with another backend (golang in your case), you need a release build using the following command:
npm run prebuild:prod && npm run build:prod
From installation guidelines:
This will clear up your dist folder (where release files are located), generate release build (...). Now you can copy the sources from a dist folder and use it with any backend framework or simply put it under some web server.
EDIT:
Thanks to #PatrickWalker for his comments.

Can no longer run my ember app locally in Windows 7

I did my first development in a Win7 machine, then switched to a Mac when I got that, which was great due to the speed of building with ember server running. I've been keeping everything in a Git repo. Everything works fine running ember server from my Mac.
Now, when I do a fresh clone from the repo on my Win7 computer, then do npm install and bower install (both of which complete fine), when I run ember server next, I get a bunch of errors saying ENOTEMPTY, directory not empty (path, blah blah blah).
It's complaining about some folder in the tmp directory, which the server command is creating and putting stuff into all by itself, so I don't know what it's complaining about.
I've been finagling with this about 5 different times now, but without success.
Ember CLI version is 0.1.1
Ember version is 1.6
Here's an example of one of the errors, but they're all similar (and similarly unhelpful):
ENOTEMPTY, directory not empty 'c:\Dev\star\tmp\remover-tmp_dest_dir-sRc08q1q.tm
p\templates'
Error: ENOTEMPTY, directory not empty 'c:\Dev\star\tmp\remover-tmp_dest_dir-sRc0
8q1q.tmp\templates'
at Object.fs.rmdirSync (fs.js:623:18)
at rmkidsSync (c:\Dev\star\node_modules\ember-cli\node_modules\rimraf\rimraf
.js:247:11)
at rmdirSync (c:\Dev\star\node_modules\ember-cli\node_modules\rimraf\rimraf.
js:237:7)
at fixWinEPERMSync (c:\Dev\star\node_modules\ember-cli\node_modules\rimraf\r
imraf.js:150:5)
at Function.rimrafSync [as sync] (c:\Dev\star\node_modules\ember-cli\node_mo
dules\rimraf\rimraf.js:216:26)
at Remover._remove (c:\Dev\star\node_modules\ember-cli\node_modules\broccoli
-file-remover\index.js:46:10)
at c:\Dev\star\node_modules\ember-cli\node_modules\broccoli-file-remover\ind
ex.js:60:14
at Array.forEach (native)
at c:\Dev\star\node_modules\ember-cli\node_modules\broccoli-file-remover\ind
ex.js:59:12
at $$$internal$$tryCatch (c:\Dev\star\node_modules\ember-cli\node_modules\rs
vp\dist\rsvp.js:470:16)
file added bootstrap.min.js
file added favicon.ico
file added sb-admin-2.js
Okay, I managed to do something that worked. I had forgotten I needed to disable Windows Indexing on my tmp folder at least (I did it for the whole cloned project):
Windows Key, type "Indexing Options"
Click the drive, then Modify
Uncheck places you don't want indexed (like the tmp folder)
If you use Sublime, go to Perferences --> Settings - User and add the following:
"folder_exclude_patterns":
[
"tmp/*",
],
Finally, I just had to keep doing ember server, stopping it, and doing it again until it build successfully (took around 5 tries).

Why does sencha build app fail?

I'm allways running into this exception when I try to build my app with the sencha commandline tools. However, other apps seem to work fine. What am I missing?
UPDATE
I figured out it has something to do with the fact that I want my buildPath to be outside of the app directory. My section in the app.json looks like this:
"buildPaths": {
"production": "../deploy/frontenddemo/production",
"testing": "../deploy/frontenddemo/testing",
"package": "../deploy/frontenddemo/package",
"native": "../deploy/frontenddemo/native"
},
If I change it to:
"buildPaths": {
"production": "build/production",
...
},
Everything works as expected. I don't know why. It should be possible to have the builds outside the app directory I guess.
Ok, after a lot of try and error. I found the root cause of this issue.
My app.json looked like this:
"archivePath": "../deploy/frontenddemo/archive/",
"buildPaths": {
"testing": "../deploy/frontenddemo/testing",
"production": "../deploy/frontenddemo/production",
"package": "../deploy/frontenddemo/package",
"native": "../deploy/frontenddemo/native"
},
The problem with this structure is that both archive and builds produce a directory "sencha" outside of the configured path. Meaning they both create ../deploy/frontenddemo/sencha
with different contents. I wonder if that is documented somewhere?
The fix was easy. I just changed the paths to this:
"archivePath": "../deploy/frontenddemo/archive/",
"buildPaths": {
"testing": "../deploy/frontenddemo/builds/testing",
"production": "../deploy/frontenddemo/builds/production",
"package": "../deploy/frontenddemo/builds/package",
"native": "../deploy/frontenddemo/builds/native"
},
I've had previous issues deploying directly to a web server such as MAMP, or even Mac's default web server, in ~/Sites/
Have you tried changing your deployment directory to something other then MAMP, and then manually copy/paste it over?
Also, what exact version of the SDK are you using? 2.1 beta 3 was released a bit ago, as well as a new Sencha Cmd 3.0.0.122 (used to be called Sencha SDK Tools).
Forum Announcement: Sencha Touch 2.1.0 Beta 3 is available