Search code examples
angularwebpack-2

System.import is deprecated in webpack2 in favor of import. But, import raises error

I am working on a project in Angular 4 with Webpack 2.

According to this: https://webpack.js.org/guides/code-splitting-async/#system-import-is-deprecated System.import is deprecated in webpack2 and will be removed in a future version.

But, in the following code:

if (filteredItems[0].jQuery == true)
{
    // Load jQuery and jQuery.Validate
    System.import(/* webpackChunkName: "jquery" */ '../../node_modules/jquery/dist/jquery.js');
    System.import(/* webpackChunkName: "jquery.validate" */ '../../node_modules/jquery-validation/dist/jquery.validate.js');
    System.import(/* webpackChunkName: "additional-methods" */ '../../node_modules/jquery-validation/dist/additional-methods.js');
 }

If I try to change System.import to import, the following error is raised in VS Code and at build time.

Declaration or statement expected.

From my package.json I see I am running the most current version: "webpack": "^2.4.1",

How do I resolve this?

Solution

  • import() is not yet implemented in TypeScript.

    https://github.com/Microsoft/TypeScript/issues/12364

    TypeScript does not ignore it but transpile it to something else which breaks the code. So to use the import() you can use loader that will be executed AFTER the typescript transpilation process.