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!

generated-stories-entry.js error for rule 'import/no-unresolved'

I have added storybook to my Vue project with vue add storybook.
This has added several dependencies to my project, e.g. in my package.json I find this among others:
"vue": "~2.6.14",
"#storybook/vue": "6.4.19",
"vue-cli-plugin-storybook": "~2.1.0",
"eslint": "~6.8.0",
Now I am trying to run the storybook server with npm run storybook:serve but I get an error:
I have been trying different things, like configuring the 'import/no-unresolved' rule to be off, emitError: false on the eslist-loader inside .eslintrc, skipping the linter plugin in the webpack configuration, etc. Nothing worked and each attempt just produced new errors.
Currently I have no explicit es-linter nor webpack configuration at all. But if I comment a line inside node_modules/eslint-loader/index.js like this:
// emitter(new ESLintError(messages));
then it all works.
I don't want to be commenting out lines inside a library, I would like to have a proper solution and understand what is happening.

I found the answer myself. I had to add the eslint-plugin-import package:
npm install eslint-plugin-import
And add the plugin to the eslint configuration:
"plugins": [
"import"
]

For me the suggested answer didn’t work, what fix it in the end was to ignore those files in eslint configuration:
"ignorePatterns": [
"generated-stories-entry.js",
"storybook-init-framework-entry.js"
],

How to add a custom plugin to a CKEditor 5 build?

Tools used:
Visual Code Studio (1.39.2)
Node JS (13.0.1)
NPM (6.12.0)
CKEditor 5 (15.0.0)
Mozilla Firefox (69.0.3 32-bits)
Intro
I am learning how to use CKEditor 5 and how to add and create plugins. I have been successful in adding a existing and oficial plugin by following this tutorial:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build
It is said there are two ways to add plugins in CKEditor 5. Basically, you can use a ready-made builds and add plugins to them, or you can change the editor creation settings.
The advantage of modify a build is that you no longer need to configure anything whenever a CKEditor instance is created, since everything has already been built with the desired settings. Also, the client app does not need to do a new distribution with, for instance, Webpack, importing code.
How I did the process
I do not use Git/GitHub in my development process, so I downloaded the ckeditor5-build-classic zip file from this Git repository, and I moved the inside contents to a desired folder. Using visual studio code, I opened the folder as a project, and started to manipulate it following the same procedures described in the mentioned tutorial:
npm install
Then:
npm install --save-dev #ckeditor/ckeditor5-alignment
I made the same modifications to the src/ckeditor.js source code, and finally created the build with the following command:
npm run build
With the build created, I put all 3 resulting files (ckeditor.js, ckeditor.js.map and translations folder) together with a index.html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="ckeditor.js"></script>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="editor-container">
<div id="editor">CKEditor content.</div>
</div>
</body>
</html>
My directory structure:
Test App+
|---index.html
|---app.js
|---jquery-3.4.1.min.js
|---ckeditor.js
|---ckeditor.js.map
|---translations (folder)
|---styles.css
Here is my app.js:
$( document ).ready(function() {
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
console.log('CKEditor is ready.');
})
.catch(error => {
console.error('Error: ' + error);
});
});
When I open index.html, CKEditor 5 works wonderfully and includes the added plugin.
Creating my own plugin (the problem)
Installing a plugin this way is very easy and practical, so I tried to create my own plugin and perform the same process to install it. To do this, I've been following directions from:
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-a-block-widget.html
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html
https://github.com/ckeditor/ckeditor5-alignment
My project meets this structure:
MyPlugin+
|---package.json
|---package-lock.json
|---src+
|---|---myplugin.js
|---|---myplugin_ui.js
|---|---myplugin_editing.js
|---node_modules+
|---|---lodash-es (folder)
|---|---ckeditor5 (folder)
|---|---#ckeditor (folder)
package.json:
{
"name": "myplugin",
"version": "1.0.0",
"description": "My first CKEditor 5 plugin project.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "RDS",
"license": "ISC",
"dependencies": {
"#ckeditor/ckeditor5-core": "^15.0.0",
"#ckeditor/ckeditor5-ui": "^15.0.0"
}
}
myplugin.js:
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
import MyPlugin_ui from './myplugin_ui';
import MyPlugin_editing from './myplugin_editing';
export default class MyPlugin extends Plugin
{
static get requires()
{
return [MyPlugin_editing , MyPlugin_ui];
}
}
myplugin_ui.js:
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
export default class MyPlugin_ui extends Plugin
{
init()
{
console.log('MyPlugin_ui#init() has been called.');
}
}
myplugin_editing.js:
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
export default class MyPlugin_editing extends Plugin
{
init()
{
console.log('MyPlugin_editing#init() has been called.');
}
}
When I install the plugin in the CKEditor 5 project the build is successfully created. However, when testing the editor the browser shows the following problem:
ckeditor-duplicated-modules
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
In the link shown it is said:
Therefore, you must never add plugins to an existing build unless your
plugin has no dependencies.
But at the same time, the opposite seems to be taught on the tutorial page:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build
I don't have much experience using Node JS or npm. I'm sure I have some misconfiguration in my project, but I don't know where. I believe it could be in my package.json file.
What I have tried
Delete node_modules and package-lock.json files from plugin project.
Consequences:
When building the CKEditor build with installed plugin, Webpack says:
ERROR in ../MyPlugin/src/myplugin.js
Module not found: Error: Can't resolve '#ckeditor/ckeditor5-core/src/plugin' in 'C:\Users\RDS\Desktop\CKEditor\MyPlugin\src'
# ../MyPlugin/src/myplugin.js 1:0-57 5:38-44
# ./src/ckeditor.js
ERROR in ../MyPlugin/src/myplugin_editing.js
Module not found: Error: Can't resolve '#ckeditor/ckeditor5-core/src/plugin' in 'C:\Users\RDS\Desktop\CKEditor\MyPlugin\src'
# ../MyPlugin/src/myplugin_editing.js 1:0-57 3:46-52
# ../MyPlugin/src/myplugin.js
# ./src/ckeditor.js
ERROR in ../MyPlugin/src/myplugin_ui.js
Module not found: Error: Can't resolve '#ckeditor/ckeditor5-core/src/plugin' in 'C:\Users\RDS\Desktop\CKEditor\MyPlugin\src'
# ../MyPlugin/src/myplugin_ui.js 1:0-57 3:41-47
# ../MyPlugin/src/myplugin.js
# ./src/ckeditor.js
ERROR in chunk main [entry]
ckeditor.js
C:\Users\RDS\Desktop\CKEditor\ckeditor5-build-classic-master\src\ckeditor.js 15684830ec81692702e020bf47ce4f65
Unexpected token (4:26)
|
|
| class MyPlugin_ui extends !(function webpackMissingModule() { var e = new Error("Cannot find module '#ckeditor/ckeditor5-core/src/plugin'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())
| {
| init()
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! #ckeditor/ckeditor5-build-classic#15.0.0 build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the #ckeditor/ckeditor5-build-classic#15.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\RDS\AppData\Roaming\npm-cache\_logs\2019-11-01T12_40_26_177Z-debug.log
Change the dependencies between the dependencies and devDependencies properties set within package.json.
Consequences: The same things happen.
All CKEditor 5 project dependencies are set on devDependencies in package.json. The installation of my plugin in the CKEditor 5 project has already been done by two existing modes:
npm link
package.json file as dependency
And again the same problems are shown. Ah! Also, something strange happened. I have already said that I properly performed the installation of the CKeditor 5 alignment plugin. I have even shown how this was done. After all this problem, I tried to install the alignment plugin locally. I downloaded it from repository, and I did the same installation via link and also file. With this approach, the plugin mysteriously gave me ckeditor-duplicated-modules problem, as previously mentioned.
I don't know exactly how it would be the right way to install this plugin from CKEditor 5 itself locally without having to download it from the internet (with npm install <module name> from npm repository). I am well aware that I am doing something wrong, but I cannot identify what it is. I would appreciate if anyone could give me tips, alternatives, and of course, maybe a solution. I've been trying for a few days now, and I don't know what I can and can't do anymore. I would be really grateful if someone could help me.

Having been unsuccessful in finding a solution here, I learned that I could ask for help in the ckeditor git repository. Please follow the following address for a resolution:
https://github.com/ckeditor/ckeditor5/issues/5699

Maybe it is just wording, but you shouldn't have to "install" your custom plugin. Simply add your plugin info to the \src\ckeditor.js file (the import, the builtinPlugins[], the toolbar [] etc). Then do npm run build and it will include it in the \build\ckeditor.js
You would do follow the same steps in changing the \src\ckeditor.js as you did for the alignment plugin except you reference your local plugin. Just make sure the names of your custom plugin match.
Since you have no UI toolbar code I think all you would need is the import and an entry in the ClassicEditor.builtInPlugins = [..., MyPlugin]
That should be enough to test init

How to use node_modules on a "traditional website"?

I have used node to manage dependencies on React apps and the like, in those you use package.json to keep track of libs and use them in your scripts using ES6 import module syntax.
But now I'm working on a legacy code base that uses a bunch of jQuery plugins (downloaded manually and placed in a "libs" folder) and links them directly in the markup using script tags.
I want to use npm to manage these dependencies. Is my only option:
run npm init
install all plugins through npm and have them in package.json
link to the scripts in the node_modules folder directly from the markup:
<script src="./node_modules/lodash/lodash.js"></script>
or is there a better way?

Check out this tutorial for going from using script tags to bundling with Webpack. You will want to do the following: (Do steps 1 and 2 as you mentioned in your question then your step 3 will change to the following 3 steps)
Download webpack with npm: npm install webpack --save-dev
Create a webpack.config.js file specifying your entry file and output file. Your entry file will contain any custom JS components your app is using. You will also need to specify to include your node_modules within your generated Javascript bundle. Your output file will be the resulting Javascript bundle that Webpack will create for you and it will contain all the necessary Javascript your app needs to run. A simple example webpack.config.js would be the following:
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
resolve: {
alias: {
'node_modules': path.join(__dirname, 'node_modules'),
}
}
};
Lastly, add a <script> tag within your main HTML page pointing to your newly generated Javascript bundle:
<script src="dist/my-first-webpack.bundle.js"></script>
Now your web application should work the same as before your refactoring journey.
Cheers

I recommend Parcel js.
Then you only need:
Run npm init
Install dependency, for example npm install jquery
Import with ES6 syntax: import $ from "jquery";
And run with parcel

Polyfill for ie

I'm trying to add a polyfill to my vue.js 2.0/Laravel5.3 application because in internet explorer 11 I receive an error:
vuex requires a Promise polyfill in this browser.
So I've followed the docs I'm using ecm 6 so I did:
npm install --save-dev babel-polyfill
And added this at the top in my bootstrap.js:
import "babel-polyfill";
But still the same error in Internet explorer. What should I do or what am I doing wrong here?

If you are using Webpack, find your webpack.base.conf.js file (mine was in the build folder), or the equivalent webpack configuration file, then modify the app entry variable to include babel-polyfill at the start so it looks something like this:
entry: {
app: ['babel-polyfill', ...]
},
.
.
.

#doulmi
Add this to your package.json file:
"babel-polyfill": "^6.20.0"
After that npm install.
Add this at the top of you main js file:
import "babel-polyfill";
Compile everything. That should work.