Cannot resolve module in sibling directory

Question

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"
  }
}

Cannot resolve module in sibling directory

0 Answers