Avoid System.import?

[papandreou]

Hi, I've run into an interop problem between systemjs-builder and webpack running concurrently in the same process. In short, loader-runner picks up on the System global installed by systemjs due to this code path.

I don't know if it's really loader-runner's fault, but I ended up solving my problem by forking it and cutting out that part. And now that webpack 2 went with import(...) instead of System.import(...), is it still needed?

[mitchellmorris]

Just wanted to piggy back off this issue and provide some details around what sounds like a related experience running webpack within a gulp task. I've also posted at https://stackoverflow.com/questions/45491396/issue-with-ts-loaderawesome-typescript-loader-as-well-when-running-webpack-3-4

Given the following config(in file webpack.config.js) using either ts-loader or awesome-typescript-loader:

const path = require('path');
let _root = path.resolve(__dirname);
var fromRoot = function (...args) {
    args = Array.prototype.slice.call(args, 0);
    return path.join.apply(path, [_root].concat(args));
};
module.exports = {
    context: fromRoot( "src" ),
    devtool: "cheap-module-eval-source-map",
    entry: {
        "app/polyfills": "./app/polyfills.ts",
        "app/vendor": "./app/vendor.ts"
    },
    resolve: {
        modules: [
            fromRoot( "src", "node_modules" ),
            fromRoot( "node_modules" )
        ],
        extensions: ["*", ".js", ".ts"],
        alias: {
            build: fromRoot( "build", "src", "public" ),
            jquery: fromRoot( "src", "node_modules", "jquery", "src", "jquery" )
        }
    },
    module: {
        rules: [{
                test: /\.ts$/,
                use: [
                    {
                        loader: "ts-loader",
                        options: {
                            configFileName: fromRoot( "src", "tsconfig.json" ),
                            compilerOptions: {
                                rootDir: fromRoot( "src" ),
                                outDir: fromRoot( "build", "src", "public" )
                            }
                        }
                    }
                ]
            }
        ]
    },
    output: {
        path: fromRoot("build", "src", "public"),
        publicPath: "/",
        filename: "[name].js",
        chunkFilename: "[id].chunk.js"
    }
};

export = webpackMerge(commonConfig, {
    devtool: "cheap-module-eval-source-map",
    output: {
        path: fromRoot("build", "src", "public"),
        publicPath: "/",
        filename: "[name].js",
        chunkFilename: "[id].chunk.js"
    }
    
}, webpackDevConfig);

Running webpack works.

Given the following file, test.js:

var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");

var compiler = webpack(webpackConfig, (err, stats) => {	
    if (err) {
        console.error(err);
    };
});

Running node ./test.js works.

But given the following gulp task:

var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
var starting = true;
gulp.task("ugh", function(cb) {
    var compiler = webpack(webpackConfig, (err, stats) => {	
        if (err) {
            console.error(err);
        };
        if (starting) {
            starting = false;
            cb();
        }
    });
});

Running gulp ugh yields these errors:

Unhandled Rejection at: Promise Promise {
<rejected> TypeError: Cannot read property 'default' of undefined
at /Users/mitchellmorris/Sites/projects/sandbox/node_modules/loader-runner/lib/loadLoader.js:4:66
} reason: TypeError: Cannot read property 'default' of undefined
at /Users/mitchellmorris/Sites/projects/sandbox/node_modules/loader-runner/lib/loadLoader.js:4:66

Unhandled Rejection at: Promise Promise {
<rejected> TypeError: Cannot read property 'default' of undefined
at /Users/mitchellmorris/Sites/projects/sandbox/node_modules/loader-runner/lib/loadLoader.js:4:66
} reason: TypeError: Cannot read property 'default' of undefined
at /Users/mitchellmorris/Sites/projects/sandbox/node_modules/loader-runner/lib/loadLoader.js:4:66

From what I can tell given the following block that System(in node_modules/loader-runner/lib/loadLoader.js) only defined when leveraging gulp and emitting an undefined result(i.e. module).

module.exports = function loadLoader(loader, callback) {
    if(typeof System === "object" && typeof System.import === "function") {
        console.log("This only happens using gulp.");
        System.import(loader.path).catch(callback).then(function(module) {
            console.log("further more module is undefined!");
            loader.normal = typeof module === "function" ? module : module.default;
            // ...
        });
    } else {
        console.log("This only happens using node ./test.js or webpack and is successfull.");
        // ...
    }
}

Can anyone help please?

[sokra]

System.import was removed in v3