Develop Reference

angular shows error : webpack CLI failed to load

I am trying to create my react application from scratch but my webpack.config.js is giving me errors saying [webpack CLI ] failed to load
Below is the webpack.config.js code
const HtmlWebPackPlugin = require(“html-webpack-plugin”);
const htmlPlugin = new HtmlWebPackPlugin({
template: “./src/index.html”,
filename: “./index.html”
});
module.exports = {
mode: ‘development’,
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”
}
},
{
test: /\.css$/,
use: [“style-loader”, “css-loader”]
}
]},
plugins: [htmlPlugin]
};
Above is the code giving me errors in the webpack.config.js

Adding style guide to next.js (react) returns Error: ENOENT: no such file or directory,

I just started learning next.js and I wanted to add some documentation using https://react-styleguidist.js.org/
I created my project using npx create-next-app
After installing it, and adding some configuration
[styleguide.config.js]
const path = require('path')
module.exports = {
components: './**/*.js',
webpackConfig: {
entry: 'next/lib/app.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['#babel/react' ],
plugins: ['#babel/plugin-proposal-class-properties']
}
}
},
{
test: /\.scss$/,
loader: 'sass-loader'
}
]
}
}
};
I'm getting the following error when trying to run it using the following command:
npx styleguidist server
./node_modules/react-styleguidist/lib/client/index.js (./node_modules/react-styleguidist/lib/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/client/index.js)
Error: ENOENT: no such file or directory, scandir '${projectPath}\node_modules\ally.md\amd'
at Array.map (<anonymous>)
at Array.map (<anonymous>)
# ./node_modules/react-styleguidist/lib/client/index.js 36:19-71 46:2-49:4 46:65-49:3
# multi ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js
(Note that I have replaced the project path for "${projectPath}")
And I'm at a loss on how to fix it.
For further details, you can find my package.json here https://pastebin.com/H7RfxxKZ.
My folder structure shown in below image:
All my components are under src/components, some include component.module.css files
My context components are under src/context
All my global scss can be found under "styles/"
Any guidance on why this can happen and how to solve it would be appreciated, my knowledge on how the configuration files work is limited, and any reference to any related article would be appreciated.
Thanks for your help. have a nice rest of the day and stay safe.

After doing some further testing, I found out that my main problem was the "components: './**/*.js'" and the fact that I was missing some alias for my components! I will post here what worked for me.
module.exports = {
components: "./src/**/*.js",
skipComponentsWithoutExample: true, //You don't need this one
moduleAliases: { //Map it to your folder structure
'components': path.resolve(__dirname, 'src','components'),
'_db': path.resolve(__dirname, 'src','_db'),
'context': path.resolve(__dirname, 'src','context'),
'styles': path.resolve(__dirname, 'src','styles'),
},
webpackConfig: {
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{ //This code prevents errors with font-awesome
test: /\.(ttf|eot|svg|gif|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'file-loader',
}]
},
],
},
},
};

No such file or directory error in Webpack + highlight module

I'm working on an Electron app which requires the code highlighting feature. I installed highlight module as a node dependency and use webpack to bundle all the code into the app.bundle.js.
However, when I launch the Electron app, I notice an error from the highlight module complaining
Uncaught Error: ENOENT: no such file or directory, scandir '//vendor/highlight.js/languages/'
Inside app.bundle.js, the highlight module still uses the vendor/highlight.js/languages/ to search for its utilities files which I thought should be included into app.bundle.js with their paths updated.
var Highlight = module.exports
, fs = __webpack_require__(336)
, hljs = __webpack_require__(408).hljs
, langRelPath = "vendor/highlight.js/languages/"
, langPath = __dirname + "/" + langRelPath
, reEndsWithJs = /\.js$/i
, loadedMap = {}
, availableMap = {}
;
It's my first time to use webpack, so it might be caused by some webpack misconfigurations. I paste the webpack.config.js for your convenience.
'use strict'
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
'./app/app.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
include: [path.resolve(__dirname, 'app')],
exclude: /node_modules/,
loaders: ['babel?presets[]=es2015,presets[]=react']
}, {
test: /\.(scss|css)$/,
loaders: ['style', 'css', 'sass']
}, {
test: /\.json/,
loader: 'json'
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader'
}, {
test: /\.html$/,
loader: 'html'
}, {
test: /\.txt$/,
loader: 'text'
}]
},
target: 'electron'
};
Does anyone have some idea for this?
（Everything works fine when not bundle by webpack.）
Thank you in advance:)

Webpack module not found: Error: Cannot resolve module 'imagesLoaded'

I am trying to include sequence.js in my index.js file and I get the following error:
ERROR in ./src/js/sequence.js Module not found: Error: Cannot resolve
module 'imagesLoaded' in /home/jdellaria/Desktop/Musicpack/src/js #
./src/js/sequence.js 1144:95-143
ERROR in ./src/js/sequence.js Module not found: Error: Cannot resolve
module 'Hammer' in /home/jdellaria/Desktop/Musicpack/src/js #
./src/js/sequence.js 1144:95-143 Here is my Configuration
webpack.config.js
// var webpack = require('webpack');
var path = require('path');
// webpack.config.js
var config = {
entry: './src',
resolve: {
root: path.resolve('./src'),
extenstions: ['', '.js'],
moduleDirectories: ['node_modules']
},
output: {
path: './dist',
filename: 'my-app.js'
},
externals:[
require('webpack-require-http')
],
module:
{
loaders:
[
{ test: /\.css$/, loaders: ['style', 'css'] }, // Note that the order is important here, it means that 'style-loader' will be applied to the ouput of 'css-loader'
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015']}},
// { test: /\.js$/, loaders: ['babel'] }, // note that specifying 'babel' or 'babel-loader' is equivalent for Webpack
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(jpe?g|png|gif|svg)$/, loader: 'url-loader?limit=10000&name=[path][name].[ext]'},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
}
}
module.exports = config;
index.js
require("!style!css!./css/styley.css");
require("./js/sequence.js");
console.log('Hello Webpack!');
document.write("It works.");
var greet = require('./greet'); // Import the greet function
greet('Webpack Jon');
index.html
<html>
<head>
<script type="text/javascript" src="./dist/my-app.js"></script>
</head>
<body>
</body>
</html>

Sequence.js uses AMD modules, and its looking to resolve those in the node_modules directory. Instead of referencing script directly in the /js folder, install it as a node module:
npm install sequencejs
Then require it like this in your index.js
require("sequencejs");

Webpack won't resolve modules without .jsx extension despite resolve being set

If I add .jsx to require('./StringOption') it works but I thought the resolve section of my webpack.config.js is supposed to allow me to require with no extension. What am I doing wrong?
Also why do I need ./ infront when it resides in the same directory as index.jsx?
Error message after running webpack:
ERROR in ./src/index.jsx
Module not found: Error: Cannot resolve module 'StringOption' in /Users/Mike/packages/chrome-extension-options/src
# ./src/index.jsx 5:19-42
index.js:
'use strict'
var React = require('react')
var ReactDOM = require('react-dom')
var StringOption = require('./StringOption');
ReactDOM.render(<StringOption id="test" name="Test" />, document.getElementById('content'))
webpack.config.js file:
var path = require("path");
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve(__dirname, "dist"),
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'jsx-loader',
exclude: /node_modules/
}
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
resolve: {
extensions: ['', '*.js', '*.jsx']
}
};
Directory structure:
- src/
- index.jsx
- StringOption.jsx
- dist/
- index.js
- react.js
- react-dom.js

First of all ./StringOption says that it should search in the same directory. Unlike other places we need to specify from where we need to import a file in react jsx.
Secondly,
In resolve you need not use resolve explicitly, just use babel-loader or else use resolve as
resolve: {
extensions: ['', '.js', '.jsx']
}
or
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}

include the following in your webpack.config.js so that you need not to worry about js and jsx extension.
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
// include: __dirname + '/src',
include: path.join(__dirname, '/src'),
loader: 'babel-loader',
query: {
presets: ['react','es2015']
}
}]