I have so far been unable to import the code required to utilize pdf.js into my script. At first including
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
was enough to get it to run, and I could access a variable called "pdfjsLib" for everything I needed. Now that I uploaded the code to GitHub pages, it doesn't recognize the variable even though all files are present. I think I need a way to import it, but every option I have come across has failed.
import pdfjsLib from "/node_modules/pdfjs-dist/build/pdf.js";
Fails
var pdfjsLib = window['node_modules/pdfjs-dist/build/pdf.js'];
Fails
Here is the link to the repository, but I don't think that it is required to solve this seemingly simple problem. https://github.com/SlayerOfWhales/CurseOfAether
Related
I need to load a custom JS function I wrote at the beginning of the page load in a Docusaurus documentation site.
What have I tried so far?
Attempt #1: Appending the script to the index.js file (.\src\components\HomepageFeatures\index.js)
This attempt worked well during testing but then yarn was not able to build the project anymore. The error was as follows:
[ERROR] Docusaurus server-side rendering could not render static page
with path /. [INFO] It looks like you are using code that should run
on the client-side only. To get around it, try using <BrowserOnly>
(https://docusaurus.io/docs/docusaurus-core/#browseronly) or
ExecutionEnvironment
(https://docusaurus.io/docs/docusaurus-core/#executionenvironment). It
might also require to wrap your client code in useEffect hook and/or
import a third-party library dynamically (if any).
Attempt #2: To counter the issue presented during my first attempt, I created a separate (.js) file in (./src/js/myfunction.js) and then tried to load that file. To keep this question short, I will add a sample script below to showcase the issue:
import BrowserOnly from '#docusaurus/BrowserOnly';
<BrowserOnly>
window.onload = function() {
alert("Welcome!");
}
</BrowserOnly>
Then I went to the Docusaurus config file and added the following:
scripts: [
{
src: './src/js/myfunction.js',
async: false,
},
],
The site was built successfully this time, but the function was not getting loaded. I tried to call the function as well but still, I was getting nothing. I think I don't understand how the <BrowserOnly> feature works or I am missing something else.
Your help will be much appreciated!
I solved the issue eventually by adjusting the custom-made JS file as follows:
import ExecutionEnvironment from '#docusaurus/ExecutionEnvironment';
if (ExecutionEnvironment.canUseDOM) {
// My own custom JS code.
}
Thereafter, I loaded that custom JS file from the config file (docusaurus.config.js) by adding the following:
clientModules: [
require.resolve('./path-to-custom-code/custom-code.js'),
],
This has been mentioned briefly in the documentation but it wasn't clear at all. The documentation of Docusaurus requires more elaboration and examples.
You can view it here though:
https://docusaurus.io/docs/advanced/client#client-modules
If anyone has a better approach, please add it to this post. Thanks!
I am pretty new to coding and I am currently trying to solve a challenge from frontendmentor.io where my task is to build an ip-address-tracker.
To make this task a little bit more difficult for me, I am trying to build this app with the React framework via create-react-app.
My problem is, that my Javascript file, script.js, somehow isn't working. I am trying to implement it via the script-tag in my index.html.
<script src="../src/script.js"></script>
You can also check out the directory structure, I just updated the project on GitHub.https://github.com/bryanhain97/ip-address-tracker
Thanks a lot.
If you want to include a script in your index.html file in react you'll have to put it into the public folder and specify the path by using %PUBLIC_URL%/path-to-script-relative-to-public-dir
EDIT:
I just looked at your project and what you should do instead of embedding your script in index.html is to import it into index.js. You should probably export the initMap function and call it from index.js
OK. there are a couple of things you did wrong! First of all, React outputs some useful information in the console that is not negligible in case of failure. Please look at the following image.
It is clear that React is complaining about a missing React import. This is because you need to
import React from 'react'
even in a function component. I found this mistake in two places.
The URL you're using in your script.js file is wrong. Please see the git diff over my working directory below.
I don't know how you want to implement all this but I think this is not done THE REACT WAY! React is a component oriented library so, Please check some other alternatives like instead of doing all this in flat functions using direct connections to your DOM element. ReactDOM has some super power to be leveraged here.
I managed to get the application work on my own IP address and Google's (see the screen captures below), though I think you didn't implement it in the REACT WAY. So, keep digging!
[React Error Output][1]
[Git diff of my work space with the fixes][2]
[Working App on my IP Address][3]
[Working App on Google's IP Address][4]
[1]: https://i.stack.imgur.com/gZB72.png
[2]: https://i.stack.imgur.com/xHqfU.png
[3]: https://i.stack.imgur.com/8BEzI.png
[4]: https://i.stack.imgur.com/xZENI.jpg
What is eslintcache
Why it is always auto generating on the react app.
eslintcache
eslint goes over your code and reports stylistic errors. Usually going over the whole code is unneccessary, because you only changed a few files since the last run. To be able to track which files changed, and which errors occured in the files which were not changed, eslint is writing a cache (into the file you found).
Usually that file is supposed to be in /node_modules/.cache/, so you usually won't notice it. That it resides in your working directory is a bug.
I've used <img src={require('./somRelativePath/image.jpg)} in React many times. However, this time it seems not to be working. There are no errors whatsoever (such as that the image was not found etc.) but the broken image on website.
After inspecting the element I was somewhat confused by the transpiled result in browser:
<img src="[object Module]" style="width: 5rem;">
It appears as if it loads the image as a component not the acutual file. I've created the app with npx create-react-app and haven't ejected it so far. So there is no error in babel or webpack configuration as it is currently handled by react under the hood.
Importing it with import statement works just fine:
import calendarPic from '../assets/pictures/calendar.svg';
Unfortunately that's not the solution because I have the local images saved in json and it would be definitely quite repetitive and ineffective as well to load all 50 images.
With the same npx create-react-app I've made a handful of mini-projects before but have never come across such a perplexing, yet so basic error. I'd be so thankful for any response as I've skimmed every possible solution throughout the internet.
Thank you again and have a lovely day!
use this one, it's work for me
<img src={require('./somRelativePath/image.jpg').default}
Explanation :
Value from let image1require('./somRelativePath/image.jpg') is different with
import calendarPic from './somRelativePath/image.jpg';
If you console them, value from calendarPic is a path, but if you use require, the value is an object like here.
I guess the problem is the location of the image. When you use create-react-app the app will be bundle into the public folder. Then the require statement would start to fetch the image - in this case in relative to the public folder and not to the src folder.
What I suggest you to do is try to move the image into the public folder and try using the src with URL relative to the public folder. Demo here
None of the answers above worked for me. Instead I used require(path) outside the img tag and assigned it into a variable, then used the variable inside the img tag src. It works that way.
const F = {
name: "Weiß",
image: require('./images/0453-Eastbourne-F961-F01.png')
}
Inside the image tag:
src = { F.image }
I am struggling to figure out how references work with for example :
import { PolymerElement } from '#polymer/polymer/polymer-element.js';
when I want to use third party web components I often find references like this.
And I could not get this to work unless I change the reference to
import { PolymerElement } from '../../#polymer/polymer/polymer-element.js';
relative to where I placed polymer folder inside my project.
I understand I should not need to do this. and if I want to import more third party tools this would be tedious to change all the references.
So how does the reference actually supposed to work and how am I supposed to "Correctly" do the import and get this to work?
I searched up, maybe I am search with terrible key works or something, but I don't see anyone explaining this.
Can someone explain how this works and how am I actually supposed to get these references to work instead of changing all the path to relative path?
Thanks
I found out why.
Seem like projects automatically look for directory called node_modules as long I put my folders under that it automatically find those references