Develop Reference

Cannot resolve module in sibling directory

Good day all!
I am trying to setup a javascript workspace including the posibility to run test script using npm, webpack (and mocha for tests).
So my project structure looks someting like (npm generated files are omitted):
root
|- src
| |- main.js
| |- MyClass.js
|- test
| |- test.js
|- package.json
|- webpack.config.js
The main.js script is building and debugging fine. But the test script is giving me problems.
In short, I import classes from the project (from the src directory) for testing. But it cannot resolve it (eventhough intellisense of vscode is having no issues at all). So if my test-script looked something like:
import { MyClass } from 'MyClass'
/* testing stuff */
Intellisense is perfectly capable of resolving the location (as configured in the jsconfig.json), but eventhough I set the src directory as include-rule or as alias, webpack is not able to resolve it and tries to search in the /test directory instead (and in recursive order all its parent-directories, failing in the same manner).
So the question is how to let webpack resolve for 'nephew' directories?
(If there is an easier way to use mocha than with the current combined scripts, it would suffice in this case as well. So feedback on that is also welcome, but I defenitly would love to find the answer to the original question)
Here is the webpack.config.js content
const path = require('path');
{
name: "myProject_test",
mode: "development",
entry: path.resolve(__dirname, "./test/test.js"),
devtool: 'source-map' : '',
output:
{
clean: { dry: true },
path: path.resolve(__dirname, root, source.outputDir),
filename: "[id]/[name].js",
},
module:
{
rules:
[
{
test: /.jsx?$/,
include: [path.resolve(__dirname, "./test"), path.resolve(__dirname, "./src")],
exclude: [path.resolve(__dirname, "./dist"), path.resolve(__dirname, "./test/test-dist"), path.resolve(__dirname, "./node_modules")],
loader: 'loader-type',
options: { /* All loader types follow this pattern; so the rest is omited for brevety, but basically this includes all the loaders required for correct compiling */ }
}
],
},
resolve:
{
alias:
{
"*": [path.resolve(__dirname, "./src/*"), path.resolve(__dirname, "./test/*")],
},
extensions: ['.json', '.js', '.jsx', '.scss', '.sass', '.html', '.htm']
},
devServer:
{
contentBase: [path.resolve(__dirname, "./test"), path.resolve(__dirname, "./test/test-dist")],
/* Other server properties to make this work with server utility */
}
}
And here the package.json file content
{
"name": "MyProject",
"version": "0.0.1",
"description": "some description",
"dependencies": {},
"scripts": {
"test": "webpack && mocha test/test-dist --require source-map-support/register --reporter spec --check-leaks --recursive && rm -rf test/test-dist",
"debug": "webpack serve",
"start": "webpack --watch",
"build": "webpack"
},
"devDependencies": {
"#babel/core": ">=7.x",
"#babel/preset-env": ">=7.x",
"babel-loader": ">=8.x",
"cross-env": ">=7.x",
"css-loader": ">=6.x",
"html-loader": ">=2.x",
"resolve-url-loader": ">=4.x",
"style-loader": ">=3.x",
"sass-loader": ">=12.x",
"sass": ">=1.x",
"mini-css-extract-plugin": ">=2.x",
"extract-loader": ">=5.x",
"webpack": ">=5.x",
"webpack-cli": ">=4.x",
"webpack-dev-server": ">=3.x",
"worker-loader": ">=3.x",
"source-map-support": ">=0.x",
"mocha": ">=8.x",
"should": ">=13.x"
}
}

react, wepack, babel, node, npm start error

ERROR in ./main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/preset-es2015' from 'F:\reactapp'
at Function.module.exports [as sync] (F:\reactapp\node_modules\resolve\lib\sync.js:43:15)
at resolveStandardizedName (F:\reactapp\node_modules#babel\core\lib\config\files\plugins.js:101:31)
at resolvePreset (F:\reactapp\node_modules#babel\core\lib\config\files\plugins.js:58:10)
at loadPreset (F:\reactapp\node_modules#babel\core\lib\config\files\plugins.js:77:20)
at createDescriptor (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:154:9)
at items.map (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:109:50)
at Array.map ()
at createDescriptors (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:109:29)
at createPresetDescriptors (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:101:10)
at passPerPreset (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:58:96)
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./main.js main[2]
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 448 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ?wdm?: Failed to compile.
Terminate batch job (Y/N)?
package.json file:
package json file is as follows. I followed https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
{
"name": "reactapp",
"version": "1.0.0",
"description": "demo project",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [
"[]"
],
"author": "manjunathan g",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/preset-react": "^7.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.2.3",
"#babel/preset-env": "^7.2.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
babel config:
Babel config file is as below; followed as per https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
{
"presets":["env", "react"]
}
webpack config
webpack config is as follows:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/react', '#babel/es2015'],
plugins: ['#babel/proposal-class-properties']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}

The #babel/preset-es2015 package has been deprecated and you can no longer install it from NPM.
The recommendation now is to use #babel/preset-env instead.

There are a lot of mistakes in your file configuration. Let me try to solve it:
.babelrc
You don't need the following devDependencies: babel-core, babel-preset-env, babel-preset-react and babel-preset-es2015. They are deprecated since Babel 7 was realeased. Substitute your code to this:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
webpack.config.js
Since webpack 4 was released, you don't need to inform the entry and output fields (You can do it for custom configurations). By default, webpack will look for index.js file located in the src/ directory (this directory must be in the root of your project). Webpack will create the module dependency graph from this file and output the bundled file to the dist/ directory. Try to configure your webpack.config.js like this:
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: { loader: "babel-loader" }
},
{
test: /\.html$/,
use: { loader: "html-loader" } //Install it: 'npm i -D html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html" // Put the index.html in the src/ directory
})
]
}
I'm not an expert in configuring webpack and I don't know if I could help you. I wrote an article on medium setting the environment to work with react, babel and webpack, but it is in portuguese. If you want to check: https://medium.com/#brunonakayabu/react-webpack-e-babel-configurando-o-ambiente-de-desenvolvimento-c7ee8a994222

Webpack css-loader: "Module not found: Error: Can't resolve 'main.css' in ..."

I am trying to include my css in the server hosted by webpack-dev-server. For that to happen, I apparently have to use style-loader and css-loader together, in order to bundle the css into the JavaScript.
I can't get it to work.
I follow the instructions here, yet I get the following error:
ERROR in ./src/index2.js
Module not found: Error: Can't resolve 'main.css' in C:\Users\magnusga\Downloads\Programming\TestPrograms\test\src'
# ./src/index2.js 1:0-27
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index2.js
I know for certain that main.css is in the same folder as index2.js
My Settings
index2.js
import css from 'main.css';
// ...much more code
webpack.config.js
module.exports = {
entry: {
app: './src/index2.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development',
template: 'src/index.html',
inject: 'head'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index2.js",
"dependencies": {
"rxjs": "^5.5.6"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.1.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"buildb": "babel src --watch --out-dir built --copy-files",
"watch": "webpack --watch",
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
One Fix
One fix is to use import css from './main.css'; instead of import css from 'main.css'; (note the ./ infront of the file name).
That does not feel right though, because the css-loader site shows that it should be the latter, not the former.
Is it a typo in the docs?
Thank you.

It is not really a typo. If you import it like this:
import css from 'main.css';
Webpack thinks, that you want to import a module, and searches for this file under node_modules. This is necessary, when you for example installed the bootstrap package and want to import its css. So when your css file comes from a dependency, you import that dependency like this. But when you want to import a lokal file, always use relative paths.
So it must be: import css from './main.css';
Further Reading:
https://webpack.js.org/concepts/module-resolution/#module-paths
https://webpack.js.org/configuration/resolve/#resolve-modules

Simple Webpack + React + ES6 + babel example doesn't work. Unexpected token error

am getting a parsing error while running webpack to compile the jsx syntax. Would appreciate if someone could point me to the error. I see a similar question asked Webpack, React, JSX, Babel - Unexpected token < but the solution suggested there doesn't work for me.
This is how my config files look like:
package.json
{
"name": "dropdowns",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1"
},
"devDependencies": {
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"author": "",
"license": "ISC"
}
my webpack.config.js file is
module.exports = {
context: __dirname + "/app",
entry: "./main.js",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
In a local app folder I have main.js and IdMappingOptions.js as follows:
// in IdMappingOptions.js
import React from 'react';
class IdMappingOptions extends React.Component {
render () {
return <span>Hello!</span>
}
}
export default IdMappingOptions;
// in main.js
import React from 'react';
import { render } from 'react-dom';
import IdMappingOptions from './IdMappingOptions';
render(
<IdMappingOptions/>, document.body
);
when running node_modules/.bin/webpack I get the following error trace:
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 37ms
[0] ./main.js 0 bytes [built] [failed]
ERROR in ./main.js
Module parse failed: /scratch/parallel/repository/dropdowns/app/main.js Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:4)
at Parser.pp.raise (/scratch/parallel/repository/dropdowns/node_module/acorn/dist/acorn.js:923:13)
Edit:
as per the comments below fixed the test pattern and added babel-core in the webpack.config.js. Here is my

Your test seems faulty:
test: "/.js$"
Try this:
test: /\.js$/

You need babel-core to use babel in your project. (https://github.com/babel/babel-loader#installation).
npm install --save-dev babel-core

use LESS in webpack and es6

I'm following a lecture on Angular With Webpack.
I am trying to add the less loader and keep getting an error.
ERROR in ./src/app.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.less in D:\projects\dev\webpack-angular-demo/src
# ./src/app.js 3:0-24
My webpack.config.js is :
module.exports = {
context: __dirname + '/src',
entry:'./app.js',
module:{
loaders:[
{
//create working environment for es6 need to npm i babel-loader babel-core babel-preset-es2015 -D
//https://github.com/babel/babel-loader
test:/\.js$/,
exclude:'/node_modules',
loader:'babel',
query: {
presets: ['es2015']
}
},
{
//take less convert to css and inject to style tag need to: npm i css-loader less-loader less style-loader -D
//https://github.com/webpack/less-loader
test:/\.less$/,
exclude:'/node_modules',
loader:"style!css!less"
}
]
}
};
My app.js is:
import '../style.less';
class Log{
constructor(){
console.log("sdfsdf");
}
}
new Log();
Inside the src directory i have the app.js , index.html and style.less files.
finally , this is my package.json file:
{
"name": "webpack-angular-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"css-loader": "^0.23.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
any idea why i'm getting this error ?
Thanks

i had the exact same problem like you. i managed to solve that with tiny change.
path.join(__dirname, 'src')
instead of using:
__dirname + '/src/
now, make sure that your webpack.config.js look like:
var path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
...
and when I import the style.less i used like above
import './style.less';

If all files are in the same directory (src), the first line in app.js should be:
import './style.less';