We Keep Coding

SCSS not working within a REACT app specifically

I'm pretty sure its my folders filepath for my compile Sass script, but I've been at this one a few hours now, so I'm hoping you can help... (maybe there's a setup setting IDK about?...
Two similar projects - 1 Vanilla, 1 React.
1. On both I have node, NPM and node-sass installed; via: npm i --save-dev node-sass
2. I've got livesass compiler going. On vanilla it works as expected. On the React project live-sass-compiler keeps on crashing (it is working long enough for me to test it though) and when i run in the terminal: npm run compile:sass the terminal turns into a node, never compiles, and also seems to get stuck in this state.
Please help!
NOW FOR THE DIFFERENCES:
==========Filepaths==========
(Filepath is indicated by "./", multiple files indicated by array syntax.
Vanilla (root):
index.html (stylesheet href="./STYLES/SCSS/index.css")
index.js
./STYLES/ [index.css, index.css.map, index.scss]
package.json (script: "compile:sass": "node-sass STYLES/SCSS/index.scss STYLES/output.css -w")
Works great!
REACT (root):
./public/index.html (stylesheet href="../src/STYLES/CSS/index.css")
./src/index.js
.src/STYLES/ [index.scss, (desired css output)]
package.json (script: "compile:sass": "node-sass src/STYLES/index.scss src/STYLES/CSS/index.css -w")
in both of them, inside the node-modules folder, I have installed:
"devDependencies": {"node-sass": "^7.0.1"}

Hey, I figured it out! - I got rid of live-sass-compiler (it's depreciated). - I also removed the "script: "compile:sass": "node-s..."" as it's no longer required. Compilation will happen natively every time you save the file.
TO USE WITH REACT:
Terminal:
npm install -D sass
sass —watch scss:css
1. add an .env file to the root. Inside type: “SASS_PATH=src/STYLES/SCSS”
(this allowed relative paths to be ignored on previous versions. I haven't gotten this to work but everything else seems to work. It may be depreciated... IDK.)
2. include the filepath import to the JS page you’d like the CSS to live under:
(example (for APP-WIDE Changes): index.js: import './STYLES/index.scss’ //imports to the app component
3. to import another file from index.scss:
Within the index.scss file:
#use './SCSS/_unorganized.scss'; // ("#import" will soon be depreciated, instead use #use)
Hope this saves someone else some time!

Parcel.js says to add the type="module" attribute to the <script> tag but I've already added it

I'm getting an error that is telling me to add the type="module" attribute to the <script> tag when I run Parcel but I already have. I am trying to follow this tutorial but using my own code which has exports in it. See below:
I'm new to Parcel so I'm unsure if this is a bug with Parcel or if I'm doing something wrong and the error message is misleading. I'm simply trying to use parcel to package this code but I'm getting the below error. I'm using the default configuration.
When I run npx parcel test2.html --no-hmr (I have hmr off because it just does not seem to work and causes issues.) I'm expecting it to build but instead I get:
#parcel/transformer-js: Browser scripts cannot have imports or exports.
I was under the impression that Parcel was supposed to repackage these files so they would work in a browser. That seems like the whole point. Am I missing something?
Here is the rest of the output:
C:\wamp64\www\wp-content\plugins\application\js\Person.js:4:12
3 | exports.PersonType = exports.Person = void 0;
> 4 | const _1 = require("./");
> | ^^^^^^^^^^^^^
5 | const uuid_1 = require("uuid");
6 | class Person {
C:\wamp64\www\wp-content\plugins\application\js\ts\tests\test2.html:6:5
5 | <title>Test 2</title>
> 6 | <script type="module" src="../../Address.js"></script>
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The environment was originally created here
7 | <script type="module" src="../../Application.js"></script>
8 | <script type="module" src="../../ApplicationForm.js"></script>
ℹ Add the type="module" attribute to the <script> tag.
ℹ Learn more: https://parceljs.org/languages/javascript/#classic-scripts
As you can see it recommends to: Add the type="module" attribute to the <script> tag.
But if you look at the line it is referencing as the problem it already has type="module"
My environment:
Parcel: 2.4.0
Node: 16.14.2
Windows 10
If I remove the script tags from my html file it builds fine but obviously that is not a real solution. It does isolate the problem to the script tags, the files being imported, or Parcel itself.
It doesn't seem to matter what modules I try to import with the script tag. Some files export more than one module so I thought that could be the issue. It, however, give the same results when I try to bring in a file with only one module.
After searching the internet it seems like the recommendation to add type="module" to the script tags is working for everyone else but continues to fail for me. I suspect that I either have something misconfigured or this is a bug with Parcel.

There are two ways you can resolve this error
1st -
just add the type attribute in script tag module
<script type="module" src="./index.js"></script>
and make sure the package.json
"scripts": {
"start": "parcel src/index.html"
}
and now run the npm run start it will run
if this not work then try 2nd method
2nd -
Recreate the project like this,
Make a project folder
now run npm init -y to create package.json
now create your files or copy and paste them into this folder. (Example all your code in a src folder then copy paste src folder in this project folder)
Now run this command to install parcel npm install -g parcel-bundler
it took some time to install
Now open package.json and change the script
"scripts": {
"start": "parcel serve src/index.html"
},
save it
Now run this command npm run start
And Boom it will work.

Well it seems to be working and I believe it was one of two things that did it:
I tried using babel to transpile and then decided to go back to using the default built into Parcel.
During this process I reinstalled my dependencies including Parcel.
If anyone knows why this fixed the problem please comment below for future visitors.

Its something in Parcel 2 and in this version because of Differential bundling which you can read from here and its automatically using the module/nomodule pattern base on the browsers which you declared in the "browserslist" key in your package.json file. the only thing you need to do while working with parcel 2 is Just use a **<script type="module"tag> **in your HTML file, pointing to your source code, and Parcel will automatically generate a nomodule version as well if needed and if its not needed then its mean your browser support and you are good to go

cannot use import statement outside a module on built exe with electron-forge

I am creating an app with Electron and Vue (using js not ts).
When I run the app using npm run electron:serve the app runs fine.
I now want to build a Windows exe so I can distribute my app. I have tried using electron-builder, electron-packager and electron-forge. Whenever I can get the build to finish, running the exe throws the cannot use import statement outside a module error (referring to the first import statement it finds, i.e. import { app, protocol, BrowserWindow } from 'electron').
I've tried adding "type":"module" to my package.json but (due a bug in Vue, according to this question), that throws Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]
I've also tried changing all my import statements to require but this doesn't work because some of the node modules I'm using use import and the error just throws for those instead.
I'm tearing my hair out over this. Where do I go from here?
UPDATE:
I have found a workaround for the Vue bug and posted my findings on the linked question. I can now add "type":"module" to my package.json.
However, I now get an error thrown when I run npm run electron:serve and from my built exe:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: <my_project_root>\dist_electron\index.js
require() of ES modules is not supported.
require() of <my_project_root>\dist_electron\index.js from <my_project_root>\node_modules\electron\dist\resources\default_app.asar\main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
To be clear, I'm not using require in any of my source code, but the compiled(?) version does?
What's going on here?
UPDATE 2:
As requested, here is a minimal reproducible example that maintains original folder structure, configs and package.json

Vue JS Module not found (datepicker)

I am pretty new to vue.js - I only started using it today and naturally I have run into an error I cannot seem to resolve.
I am using the v-md-date-range-picker module:
(https://ly525.github.io/material-vue-daterange-picker/#quick-start.
The instructions tell me to do the following:
1
npm install --save v-md-date-range-picker
2
<template>
<v-md-date-range-picker></v-md-date-range-picker>
</template>
3
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";
Vue.use(VMdDateRangePicker);
</script>
So, I ran the command in terminal in my project folder, added the 2 bit of code to my HelloWorld.vue page and then added the code from step 3 into the main.js.
When I have a look in my package.json file, I see:
"dependencies": {
"core-js": "^2.6.5",
"v-md-date-range-picker": "^2.6.0",
"vue": "^2.6.10"
},
However, I get the error:
Module not found: Error: Can't resolve 'v-md-date-range-picker/dist/v-md-date-range-picker.css' in '/Users/James/Documents/projects/vue-test/src'
am I missing something blatantly obvious here?
Edit:
I tried the response in the comments below which did not work.
On the main page of the module, I followed the instructions. However, going through the pages I found the same instructions with some extra text:
I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).
I am going to go out on a limb here and say I do not have a working bundler. I went into the node_modules folder, found that module and looked inside. There was no dist folder. Just .scss files etc..
So, I assume that I somehow need to build this project first.
How do I do that?
I thought running it in the browser would have done this on the fly but it clearly has not.
Edit 2:
After some googling around I found the command:
$ npm run build.
Which gives me this error:
This dependency is not found, To install it, you can run: npm install --save v-md-date-range-picker/dist/v-md-date-range-picker.css
So, I run that command and then I get the error:
Could not install from "v-md-date-range-picker/dist/v-md-date-range-picker.css" as it does not contain a package.json file.

Check if you can find this in the webpack.base.conf.js inside the build folder. If not add it.
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'], // Note that the order is very important
},
Run npm install style-loader css-loader --save before adding it to the file if it isn't there.
To Address your question
Run the command: npm install sass-loader --save
Then add an import for every SCSS file in the module.
This is not the most optimal solution, but that package looks broken to me and this is merely a workaround.
I will take time to try out the library myself and try to provide a fix for it.

Create v-md-date-range-picker.css in v-md-date-range-picker/dist/ and copy css from
md-date-range-picker.min.css
and refresh your page. For some reason css file is not being created when we install md-date-range-picker.min

In Typescript how do I use a Javascript module when importing from Typeings

Using mgechev's angular2-seed, I'm trying to get to grips with Angular2 and
Typescript for a new project, but have run into this problem.
I want to use Numeral in a component, so I:
Installed Numeral using npm install numeral
Installed the typing for Numeral using typings install dt~numeraljs --global --save
In my component added import { numeral } from '/typings/globals/numeraljs';
Added the line of code: let num:Number = new Number(numeral().unformat(text));
So far, so good. Everything seems to transpile ok. Until I get to the browser, where I get in the console:
Error: XHR error (404 Not Found) loading http://localhost:5555/typings/globals/numeraljs.js(…)
What am I doing wrong here? Have I missed a step out to tell Typescript where the actual code is?

Typically what you want to do is, if the package is not a native Typescript module:
import * as numeral from 'numeral';
The typings folder is just for telling Typescript what the type definitions are, so it will use it for code highlighting and linting. The actual module you want to import sits in the node_modules folder and can be imported with its name.
If it's still complaining about not finding the numeral module you could add
/// <reference path="typings/globals/numeraljs/numeraljs.d.ts"/>
or wherever the Typescript definition file is stored.

you need also to add a reference link to actual numeraljs.js file. in your index.html page
say that you have index.html page as your main page, add the numeraljs.js to head
<head>
<script src="myScriptLib/numeral/numeraljs.js"></script>
</head>
also you can use system.js to load all needed scripts