We Keep Coding

Installing and Using React from React repo

I have a very basic question: I'm required to install and use react through the artifact files here. I downloaded the two files as seen in my directory. I'm using babel as my transpiler. I'm aware there are better ways to go about install react via npm, script file locations, etc but I have to do it this way. Here's a picture of my directory -
I feel like I have the relevant scripts and imports everywhere but I'm getting these errors -
app.js:1 GET http://localhost:3000/public/react.development.js net::ERR_ABORTED 404 (Not Found)
app.js:2 GET http://localhost:3000/public/react-dom.development.js net::ERR_ABORTED 404 (Not Found)
I seem to have an error from actually reading the two .js files I downloaded from the repo itself as well as the location of those files when calling them in my app.jsx. I've included the script files to run in my index.html file
<script src='react-dom.development.js'></script>
<script src='react.development.js'></script>
In my app.jsx I have these import statements
import React from '../public/react.development.js';
import ReactDOM from '../public/react-dom.development.js';
Obviously, I'm doing something wrong here. I'm not sure why I'm getting a 404 finding the files even though the given path is correct but it's still wrong somehow?

JS Cannot load web worker module unless the worker.js is under public/

I would like put my worker.js under the same src/ directory as main.js, which loads the worker. (src/ is parallel to public/) However I got the following error if worker.js is under src/.
//in main.js
let worker = new Worker('./worker.js', {type:"module"});
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
However if I put worker.js under public/ (index.html is under public/), or any directory under public/, everything works fine. Seems like it can only load from public/ aka. http://<my domain>/worker.js , if it is under any directory parallel to public/, then it cannot find it, aka. http://<my domain>/../src/worker.js doesn't work. Am I right on this?
Plus, in worker.js, I cannot import any thing in node_modules/ like what I do for other js files in src/.
I assume these two questions are related. Could you please let me know the solutions?
(I am using worker-plugin, npm, react.)
thank you.

Based on your entry file, webpack tries to create a dependency tree. So it looks trough all the files that are being imported through a import/require statement, and then it tries to bundle your files into a single bundle. However, it does not happen with the worker constructor. Thus, webpack does not see your worker file as a dependency of your single bundle, and, therefore, it does not bundle it. So, to make this work, you can use a loader in you webpack configuration such as worker-loader (https://v4.webpack.js.org/loaders/worker-loader/), adding a rule in your webpack config file.

Webpack path resolution

I have a SFCC project with multiple sites in one repository. Here is a brief overview of the structure of the codebase:
core
cartridge
js
something
dialog.js
modal.js
app.js
shirt.js
site_1
cartridge
js
page
file1.js
app1.js
site_2
cartridge
js
page
file2.js
app2.js
site_3
cartridge
js
page
file3.js
app3.js
build
site1.js
site2.js
site3.js
My webpack entry points are the site1, site2, and site3 js files. In each of those files, I am importing the respective app.js file. Each of these app.js files has their own files that they require for that particular site. When I run webpack I get the Module not found error.
In the app.js files, I am requiring outside dependencies like so:
require('./dialog.js')
The error for this example would be something like this:
ERROR in ../[site]/cartridge/js/app.js
Module not found: Error: Can't resolve './dialog' in '/path/to/repository/[site]/cartridge/js'
Any idea how I can concatenate the correct path to to these files?

Create an alias to core directory. Then require/import using [alias]/js/something/dialog.js

Angular Include Script From Node Modules Folder Using Angular CLI

I want to include a module which requires d3 and nvd3 dependencies. In my node_modules folder I installed a package which contains d3.min.js.
So in my index.html I tried to include this script like this:
<script src="./node_modules/ng2-nvd3/node_modules/d3/d3.min.js"></script>
But I'm getting a 404 File not found error:
Failed to load resource: the server responded with a status of 404 (Not Found)
I want to get this working: https://github.com/krispo/ng2-nvd3
And in my app.module.ts I got this import statement: import { NvD3Component } from 'ng2-nvd3'; and added it to the #NgModule decleration array.
What is the proper way to include this script? And how can I get it working?

How to correct NodeJS Cannot find installed package?

Just went through the Tour of Heroes tutorial for Angular2 and was really enjoying the NPM system then I went to add my first package.
I added "eveonlinejs": "^2.0.0" to my package.json and ran "npm install"
The package installed and the folder is present in node_modules.
Running my server however results in.
app/eveapi.service.ts(2,29): error TS2307: Cannot find module 'eveonlinejs'.
The line in question is
import { eveonlinejs } from 'eveonlinejs';
From my research I believe that the import should hit the package.json in the "node_modules/eveonlinejs" directory and see the "main" property which is set.
I have tried deleting clearing the NPM cache and reinstalling the node_modules folder.
I have also tried using a require statement to point into the directory but then I get a missing module for "sax" which is installed inside the "eveonlinejs" directory.
Update:
Thanks to #nem035 I've gotten a bit futher and have stopped using import however found I was getting a 404 error when using require.
I was able to get a step further by adding this code:
systemjs.config.js
'eveonlinejs': 'npm:eveonlinejs/lib/eveonline.js'
Which got me back to having errors with "sax." I found that Sax has, for some reason, moved out of the eveonlinejs folder up to the root node_modules folder.
'sax': 'npm:sax/lib/sax.js'
This corrected the Sax issue however gave me all this!
zone.js:1382 GET http://localhost:3000/node_modules/eveonlinejs/lib/client 404 (Not Found)
dashboard:17 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/eveonlinejs/lib/client
zone.js:1382 GET http://localhost:3000/node_modules/eveonlinejs/lib/cache/cache 404 (Not Found)
zone.js:1382 GET http://localhost:3000/node_modules/eveonlinejs/lib/cache/file 404 (Not Found)
zone.js:1382 GET http://localhost:3000/node_modules/eveonlinejs/lib/cache/memory 404 (Not Found)
zone.js:1382 GET http://localhost:3000/stream 404 (Not Found)
zone.js:1382 GET http://localhost:3000/string_decoder 404 (Not Found)
Everyone of these I fix reveals another‽ If this is what NodeJS is like then I'm out. Haha!

First thing you should do is remove the {} around your import.
import { eveonlinejs } from 'eveonlinejs';
// ----^-------------^-------------------- Remove the curly braces
You probably want this
import eveonlinejs from 'eveonlinejs';
The reason is because wrapping {} around the import tries to extract a named export from the file, but you want the whole library.
// import { eveonlinejs } from 'eveonlinejs' expects export code as
export {
eveonlinejs
}
When you leave out the braces, the import tries to extract the default export.
// import eveonlinejs from 'eveonlinejs' expects import as
export default eveonlinejs
Now, if you're using the version of eveonlinejs that's is currently on github, this might not work depending on how you're transpiling your modules (and how this process deals with module.exports).
The safe way would be to just use require:
var eveonlinejs = require('eveonlinejs');