When I run
react-scripts build
I get the following message :
The following changes are being made to your tsconfig.json file:
- compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)
However I do not have React 17. It is not installed, or in my package.json file.
The only thing I did was upgrade to React 17 a few days ago to play around with it, but then I reverted. Everything is back to 16.
Why does react-scripts think it should update my JSX?
I just realised what the problem was.
I had a package.json file one level up from my actual project. It was there by accident. Inside the "parent" package.json I had React 17 defined.
package.json
|
|----- package.json
It seems like npm or CRA is behaving like Maven and trying to recursivley process build scripts up the folder tree.
I'm trying to host my webpages into Github pages but for some reason it seems to only show my Readme file.
GitHub repo: https://github.com/InquisitiveDev2016/InquisitiveDev2016.github.io
Website:
https://inquisitivedev2016.github.io/
GitHub Pages is doing what it is designed to do: hosting the contents of that repository.
The root of the question asker's repository only contained a single file (README.md). So there isn't an easy way to navigate to the other pages, e.g. repo/website/webpage.html.
Consider moving your web content into the root of your repository and renaming your default page to index.md or index.html, depending what type of file it is. (By convention the default page of most websites is called index.html, and this is what GitHub Pages will show by default if it exists.)
Github gives you multiple choices where it takes it sources from. By default its the root of the master branch, which will use the README.md in case there is no index.html.
But you can also switch to the docs/ folder in your repository settings. With that you can put the index.html under the docs/ folder.
See
In my case, I had to choose the branch gh-pages/root in Pages settings on GitHub.
I had a similar situation when deploying a static React app from create-react-app (so index.html was in /public instead of root) with gh-pages npm package.
I had to select a gh-pages as a branch and /docs as a folder at GitHub Project -> Settings -> Pages -> Folder/Branch dropdowns. It wasn't intuitive since I didn't have /docs anywhere in my project files, but I'm glad that it eventually worked!
Create an index.html in the root and insert the line
<meta http-equiv="Refresh" content="2; url=public/index.html">
Or so it worked for me with a Vue CLI project I had this trouble with.
if you want to access to index.html,
try to write
https://your-github-deploy-address/index.html
so just add '/index.html' at the end of the address!
(this is how I solved my case)
The simplest solution to overcome this is put the index.html file in the outermost folder along with the readme.md
Please change the HTML file to index.html. This simple thing had me struggling for 6 hours to find this.
My HTML name before was base.html; this shows the read me file only.
After changing to index.html the file opened without any problems.
The steps to resolve this issue is from best practice is to go the your project folder. You should change what ever you named your root or initial page to index.html as mentioned above. Then open your project in git bash on your system, perform your normal git steps like,
git add
git commit -m " change to index.html"
git push origin master {depending on what you named your root branch}
Then go to settings and there you go (wow wow)
after one or two refresh, your site will be live
For me, the problem was the docs folder was moved to .gitignore automatically. You have to delete docs from .gitignore, commit and push.
Change the GitHub Pages source to gh-pages with folder as /(root)
For me, this solution solves the issue:https://github.com/gitname/react-gh-pages
Open the package.json file, add two properties as below:
Add a homepage property in this format*: https://{username}.github.io/{repo-name}
For a project site, that's the format. For a user site, the format is: https://{username}.github.io. You can read more about the homepage property in the "GitHub Pages" section of the create-react-app documentation.
{
"name": "my-app",
"version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
"private": true,
Add a predeploy property and a deploy property to the scripts object in :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
To summer up, if your repository does not have an Index.html it will show the ReadMe file.
Thus in order to correct it all you need to do is add an index.html or index.md file to your folder and use that as main.
From there all the others will be access through a link on this page. Similarly to a webpage.
Whenever I was creating a new Nuxt project, there were directories like: components, pages, static, store, .nuxt, node_modules but there are no layouts and other directories as of right now.
How can I fix that?
You are probably referring to this question: Some of the directories are missing when I'm trying to create a new Nuxt js project
My answer is in there!
Also, .nuxt is a cache directory that you should not touch to, same goes for node_modules so far. node_modules will be available if you yarn normally.
PS: this is based on the assumption that you are doing npx create-nuxt-app <project-name>.
I want to use Snowpack for my Vue 3 app. Currently, I've initialized the Vue 3 app using the following command:
npx create-snowpack-app my-app --template #snowpack/app-template-vue
By default, Snowpack creates a directory structure like this:
public/
src/
App.vue
index.js
package.json
README.md
snowpack.config.js
I need to restructure things slightly. The reason why is I'm moving an existing app to Snowpack. My challenge is I need to move to a structure like this:
public/
pages/
App.vue
index.js
package.json
README.md
snowpack.config.js
In short: 1) rename src to pages and 2) move index.js up to the same level as package.json. When I make this change, Snowpack throws a warning that says "mounted directory does not exist". It prints out the files it's looking for, which, Snowpack is clearly still looking in the src directory. My thinking was to review the snowpack.config.js file.
I looked at the mount property in the snowpack.config.js file. I changed mount.src.url to /pages. However, that didn't work. I also tried changing the property to just /, which also didn't work.
What do I need to change to tell Snowpack to look in the current directory instead of the src directory for the index.js file?
That directory layout is possible with a mount config that specifies . as the mount point:
// snowpack.config.js
module.exports = {
mount: {
'.': {url: '/dist'}
},
}
Then the root index could import the SFC from <projectRoot>/pages/:
// <projectRoot>/index.js
import App from './pages/App.vue'
...
I've created an npm module which is hosted on npmjs.com.
Due to the structure of the module, I've split the documentation into a general readme.md and then more specific files which are linked to from the main readme.md:
.
├──documentation
│ ├── doc1.md
│ └── doc2.md
└── readme.md
The links in readme.md look like this: [some text](documentation/doc1.md). They work perfectly fine locally and in their CodeCommit repo (and I suspect it would be fine in github as well).
However after publishing it to npm, the links become https://www.npmjs.com/package/documentation/doc1.md, which of course is an invalid URL and leads to a 404 error.
I've tried to figure out how to get a valid url to the file in question so I can create links that lead to it, but I can't even find out how to get a direct link to the file in the package. It may also be worth noting that the package itself is a private organisation package, but I've tried the same thing on a test public package and had the same issue there, so I don't think it's relevant.
Does anyone know how to link from the root readme.md file to another file in the same package, in a way that works in npmjs?
I've found the issue at npm community they say that it's solved, so I tried for my self to see what went wrong?
And they were right, I've missed some points so I'll write all the required steps:
Make sure your repository at github/gitlab is public
Make sure in your package.json file you have the proper repository configuration that point at your repo correctly
Example:
{
...
"repository": {
"url": "https://github.com/lalosh/js-library-boilerplate",
"type": "git"
}
...
}
When doing the relative linking you need to include the relative path from your repo root, including the .md suffix.
Example:
We can [link](documentation/sub-doc.md) to an inner relative file