Develop Reference

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',
}]
},
],
},
},
};

React component failed to compile - may need appropriate loader

I've created a component that was working perfectly, until I published it to npm and installed into my App. I cannot figure out what the problem is, the error is:
../node_modules/heatmap-calendar-react/heatMapGraph.js
Module parse failed: Unexpected token (249:23)
You may need an appropriate loader to handle this file type.
| var _onClick = this.props.onClick || function doNothing() {};
|
| return <div
| key={i}
| onMouseOver={(e) => this.selectGroup(e, day)}
This is the repository https://github.com/willfretwell/heatmap-calendar-react.
To install npm i heatmap-calendar-react.
Any help is very much appreciated.

Its definitely an issue in your Webpack configuration this is a basic Webpack configuration file for React
module.exports = {
entry: [
'./src/index.js'
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
Its also very important that you include a .babelrc file in the root of your project so that it knows to transform your react code. Your .babelrc file can look something like this
{
"presets": [
"env",
"react",
"stage-2"
]
}
Lastly make sure you install all the dependencies required
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-preset-react
Hope this helps!

It might be the issue with webpack file. Please provide appropriate loader in webpack.config.js file for all the files that you have included in the component.
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=src/images/[name].[ext]"
}
]

react-redux-firebase, "You may need an appropriate loader to handle this file type."

I am working on a project that integrates react, redux, and firebase. react-redux-firebase seems to be a convenient tool. However, the code is not being complied successfully. Below is the error, webpack.config.js, .babelrc, and index.js. Thanks for help in advance.
Error message:
ERROR in ./~/react-redux-firebase/src/connect.js
Module parse failed:
/Users/xiqianglin/ucsdflyers/node_modules/react-redux-firebase/src/connect.js
Unexpected token (43:24) You may need an appropriate loader to handle this file type.
| }
|
| static contextTypes = {
| store: PropTypes.object.isRequired
| };
# ./~/react-redux-firebase/src/index.js 1:0-31 # ./src/index.js # multi ./src/index.js
/****And there are other similar errors, all "...appropriate loader..." ***/
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./src/index.js'
],
module: {
loaders: [
{test: /\.js$/,
exclude: /node_modules/,
loader:'babel-loader'}
]
},
resolve: {
extensions: [".js", ".jsx", ".es6"]
},
output: {
filename: "index_bundle.js",
path: __dirname + '/dist'
},
plugins: [HTMLWebpackPluginConfig]
};
.babelrc
{
"presets": ["react", "es2015"]
}
index.js
/*Other Imports...*/
import { firebaseStateReducer } from 'react-redux-firebase'; //This is the line causing error
ReactDOM.render(
<Provider>
<App/>
</Provider>,
documeng.getElementById('app')
)

Duble check that you npm install-ed all your dependencies.
Then if that doesn't work, try this:
npm install babel-preset-es2015
and add the a query for es2015 after your exclude
{
test: /\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
query: {
presets: ['es2015']
}
}
If you need to include a specific node module, try including your source directory and that specific node module folder to be parsed by babel-loader.
So instead of the exclude: /node_modules/, try
include: [
path.resolve(__dirname, "src"),
path.resolve(__dirname, "node_modules/react-redux-firebase")
]

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']
}
}]