[Bug] imports do not work with sass-loader and stdin template

• I’d be willing to submit the fix

Describe the bug

I got the following webpack config for the sass-loader:

              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": true,
                  "outputStyle": "expanded",
                  "implementation": {
                    "info": "dart-sass\t1.22.10\t(Sass Compiler)\t[Dart]\ndart2js\t2.4.1\t(Dart Compiler)\t[Dart]",
                    "types": {}
                  },
                  "data": "@import \"~assets/scss/_replacements/vuetify-main.scss\""
                }
              }

Error in ./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.sass

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Can’t find stylesheet to import. ╷ 2 │ @import ‘vuetify-variables’; │ ^^^^^^^^^^^^^^^^^^^ ╵ app/assets/scss/_replacements/vuetify-main.scss 2:9 @import stdin 1:9 root stylesheet in about:/app/assets/scss/_replacements/vuetify-main.scss (line 2, column 9) at /app/node_modules/webpack/lib/NormalModule.js:316:20 at /app/node_modules/loader-runner/lib/LoaderRunner.js:367:11 at /app/node_modules/loader-runner/lib/LoaderRunner.js:233:18 at /app/node_modules/sass-loader/dist/index.js:89:7

I can try all variations of the import, but the sub-import in the imported file cannot be resolved.

**To Reproduce**

add an import in the stdin template for sass-loader (see above)

**Environment if relevant (please complete the following information):**

 - OS: Linux on Docker
 - Node version v12.14.1
 - Mochapack version 2.0.0
 - Webpack version 4.43.0

Thanks for giving me an idea. Is it the ~ in the import patH?

[josephlavin]

@larixer: Thank you for the detailed explanation. It appears as if all my troubles were caused by using --require instead of --include.

In case anyone else encounters a similar issue here are a few more details:

You are requiring jsdom-global in setup.js which is invoked BEFORE the compilation and it makes many tools you use “think” that they are running in the browser environment, this interferes with the compilation process and you see the error.

Thank you again!

[larixer]

@josephlavin

I can not get any of those configurations under the With CSS-Modules to work. I am now thinking this is a Webpack 4 vs 5 issue. Mainly that I can not figure out the Webpack 5 equivalent of those configurations.

The compilation is not mochapack issue at all. This can easily be seen if you update your webpack.mix.js like this:

// webpack.mix.js

const nodeExternals = require('webpack-node-externals');
let mix = require('laravel-mix');

mix.js('src/app.js', 'dist').vue().setPublicPath('dist');

if (process.env.TEST) {
  mix.webpackConfig({target: 'node', externals: nodeExternals()});
}

add webpack-node-externals into your project via: npm install --save-dev webpack-node-externals you should also add canvas, as it will be required by jsdom-global later: npm install --save-dev canvas

and update your test script to:

    "test": "TEST=true mochapack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --include=src/setup.js src/**/*.spec.js"

Note you should use --include flag here, not --require, require is invoked BEFORE webpack compilation and used to load mocha plugins, and --include makes your setup.js be a part of tests.