Loader not works for imported scripts

[Aleksandr Shestakov]

I have two files

dependency.js

export default function test() {
    // #if BROWSER=='chrome'
    console.log('chrome');
   // #endif
}

index.js

import test from './dependency.js';

// #if BROWSER=='chrome'
console.log('chrome');
// #endif
test();

loader sees conditional directive and processes her in index.js but conditional directive in 'dependency.js' stays not processed

how can I handle this case?

[nino-porcino]

before all, check double and triple slashes in the above code, and also use double equal == and not assignment in if condition.

That said, for some reason, webpack is not processing your dependencies. I suggest to enable "ifdef-verbose": true, in configuration so that you can debug whether dependencies are processed or not.

If that fails, show your webpack config so I can have a look at it.

[Aleksandr Shestakov]

Sorry for typos, I had edited comment.

Looks like loader doesn't work as expected when using option "ifdef-triple-slash": false
Conditional directive in dependency.js stays untouched
You can test issue using the same code as in the first comment

[nino-porcino]

I just checked the double slash option (I added a new test in v2.0.2) and it seems to work as expected.

Can you share your webpack config?

[Aleksandr Shestakov]

command: webpack --env.browser=firefox

webpack.config.js

const path = require('path');

module.exports = env => {
    return {
        entry: {
            main: './index.js'
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [
                {
                    test: /.js$/,
                    use: [
                        {
                            loader: "ifdef-loader",
                            options: {
                                BROWSER: env.browser,
                                "ifdef-verbose": true,
                                "ifdef-triple-slash": false
                            }
                        }
                    ]
                }
            ]
        }
    }
}

and webpack produces this bundle (I remove webpack bootstrapper function):

/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__dependency_js__ = __webpack_require__(1);


////////////////////////
//////////////////////
/////////
Object(__WEBPACK_IMPORTED_MODULE_0__dependency_js__["a" /* default */])();

/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = test;
function test() {
// #if BROWSER=='chrome'
console.log('chrome');
// #endif
}

/***/ })
/******/ ]);

As you can see, plugin had replaced conditional directive in index.js but had not replaced conditional directive in dependency.js

[nino-porcino]

I suspect the loader is not being triggered on .js files, for some reason.

To debug that, you can use another loader called echo-loader, it's very simple to use:

npm install --save-dev echo-loader

then modify your webpack config adding the following line:

use: [
  { loader: "echo-loader" },   // <-- add this line
  { loader: "ifdef-loader", ...

The echo-loader will print to the console the files being processed by the loader, e.g.:

echo: src/my-app.js

and this will tell you the loader is being triggered.

[Aleksandr Shestakov]

@nippur72

C:\Temp\experiment>webpack --env.browser=firefox
not matched condition #if BROWSER=='chrome' => excluding lines [3-5]
echo: : index.js
echo: : options.js
echo: : dependency.js
Hash: 59b6749bb9dfc69760e0
Version: webpack 3.6.0
Time: 109ms
            Asset     Size  Chunks             Chunk Names
   main.bundle.js  3.08 kB       0  [emitted]  main
options.bundle.js  2.53 kB       1  [emitted]  options
   [0] ./index.js 107 bytes {0} [built]
   [1] ./dependency.js 96 bytes {0} [built]
   [2] ./options.js 53 bytes {1} [built]

[nino-porcino]

Ok, there was an error, thank you for helping me spot it.

You can npm install the new patched version (v2.0.3).