Webpack configuration


#1

I’ve got the error when I wanted to build release version using webpack, how fix it?

  "nativescript": {
    "id": "org.nativescript.QualityCorner",
    "tns-android": {
      "version": "4.1.3"
    }
  },
  "dependencies": {
    "@angular/animations": "~6.0.6",
    "@angular/common": "~6.0.6",
    "@angular/compiler": "~6.0.6",
    "@angular/core": "~6.0.6",
    "@angular/forms": "~6.0.6",
    "@angular/http": "~6.0.6",
    "@angular/platform-browser": "~6.0.6",
    "@angular/platform-browser-dynamic": "~6.0.6",
    "@angular/router": "~6.0.6",
    "nativescript-angular": "^6.0.6",
    "nativescript-audio": "^4.3.2",
    "nativescript-background-http": "^3.1.0",
    "nativescript-drop-down": "^3.2.0",
    "nativescript-fresco": "^3.0.6",
    "nativescript-ng-shadow": "^2.1.0",
    "nativescript-ngx-fonticon": "^4.0.0",
    "nativescript-open-app": "^0.2.0",
    "nativescript-pro-ui": "^3.4.1",
    "nativescript-ripple": "^2.0.0",
    "nativescript-theme-core": "1.0.4",
    "nativescript-toolbox": "3.0.1",
    "nativescript-urlhandler": "^1.2.2",
    "nativescript-youtubeplayer": "^2.2.5",
    "reflect-metadata": "0.1.10",
    "rxjs": "~6.0.0 || >=6.1.0",
    "rxjs-compat": "^6.2.2",
    "tns-core-modules": "^4.1.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "5.2.0",
    "@ngtools/webpack": "~1.9.4",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.6.0",
    "nativescript-dev-webpack": "^0.14.4",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "tns-platform-declarations": "^3.4.0",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
  },

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

  • configuration has an unknown property ‘optimization’. These properties are valid:
    object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
    For typos: please correct them.
    For loader options: webpack 2 no longer allows custom properties in configuration.
    Loaders should be updated to allow passing options via loader options in module.rules.
    Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
    plugins: [
    new webpack.LoaderOptionsPlugin({
    // test: /.xxx$/, // may apply this only for some modules
    options: {
    optimization: …
    }
    })
    ]
  • configuration.output has an unknown property ‘globalObject’. These properties are valid:
    object { auxiliaryComment?, chunkFilename?, crossOriginLoading?, chunkLoadTimeout?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, library?, libraryTarget?, libraryExport?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
    -> Options affecting the output of the compilation. output options tell webpack how to write the compiled files to disk.
    Executing webpack failed with exit code 1.

#2

Angular 6 requires webpack 4 and compiler-cli 6, you seem to be using older versions.


#3

Hi,

thx for your answer. I updated my packages

{
  "nativescript": {
    "id": "org.nativescript.QualityCorner",
    "tns-android": {
      "version": "4.1.3"
    }
  },
  "dependencies": {
    "@angular/animations": "~6.0.6",
    "@angular/common": "~6.0.6",
    "@angular/compiler": "~6.0.6",
    "@angular/compiler-cli": "^6.0.9",
    "@angular/core": "~6.0.6",
    "@angular/forms": "~6.0.6",
    "@angular/http": "~6.0.6",
    "@angular/platform-browser": "~6.0.6",
    "@angular/platform-browser-dynamic": "~6.0.6",
    "@angular/router": "~6.0.6",
    "ajv": "^6.5.2",
    "nativescript-angular": "^6.0.6",
    "nativescript-audio": "^4.3.2",
    "nativescript-background-http": "^3.1.0",
    "nativescript-drop-down": "^3.2.0",
    "nativescript-fresco": "^3.0.6",
    "nativescript-ng-shadow": "^2.1.0",
    "nativescript-ngx-fonticon": "^4.0.0",
    "nativescript-open-app": "^0.2.0",
    "nativescript-pro-ui": "^3.4.1",
    "nativescript-ripple": "^2.1.0",
    "nativescript-theme-core": "1.0.4",
    "nativescript-toolbox": "^3.0.1",
    "nativescript-urlhandler": "^1.2.2",
    "nativescript-youtubeplayer": "^2.2.5",
    "reflect-metadata": "0.1.10",
    "rxjs": "~6.0.0 || >=6.1.0",
    "rxjs-compat": "^6.2.2",
    "tns-core-modules": "^4.1.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@ngtools/webpack": "^6.0.8",
    "babel-traverse": "^6.26.0",
    "babel-types": "^6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "lazy": "^1.0.11",
    "nativescript-dev-typescript": "^0.7.2",
    "nativescript-dev-webpack": "^0.14.4",
    "nativescript-worker-loader": "^0.9.1",
    "raw-loader": "^0.5.1",
    "resolve-url-loader": "^2.3.0",
    "tns-platform-declarations": "^3.4.0",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.16.1",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.1.0"
  },
}

but when I run build command with webpack I got the error(s) like below

ERROR in ./feedback/feedback.component.ts
Module not found: Error: Can’t resolve ‘ui/page’ in ‘/home/hs/workspace/proj/app1/app/feedback’
@ ./feedback/feedback.component.ts 15:0-31 415:12-16
@ ./feedback/feedback.module.ts
@ …/$$_lazy_route_resource lazy namespace object
@ …/node_modules/@angular/core/fesm5/core.js
@ ./app.module.ts
@ ./main.ts

My tsconfig

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "lib": [
            "es6",
            "dom",
            "es2015.iterable"
        ],
        "baseUrl": ".",
        "paths": {
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/tns-platform-declarations/*",
                "./node_modules/*"
            ],
            "~/*": [
                "app/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "platforms",
        "**/*.aot.ts"
    ]
}


#4

Did you add the new tsconfig.esm.json?

Example: https://github.com/NativeScript/sample-Groceries/blob/master/tsconfig.esm.json


#5

Yes I did, when I do not use webpack application is builded correctly but with webpack paths are incorrect.

{
    "extends": "./tsconfig",
    "compilerOptions": {
        "module": "es2015",
        "moduleResolution": "node"
    }
}


#6

What exactly you have in feedback component and module?

Does it complie if you comment out that particular module?


#7

I’ve got errors for each component where I import some package, bellow part of it

ERROR in …/node_modules/nativescript-fresco/angular/nativescript-fresco.module.js
Module not found: Error: Can’t resolve ‘…/’ in ‘/home/hs/workspace/proj/proj1/node_modules/nativescript-fresco/angular’
@ …/node_modules/nativescript-fresco/angular/nativescript-fresco.module.js 6:9-23
@ …/node_modules/nativescript-fresco/angular/index.js
@ ./app.module.ts
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/builder/component-builder/component-builder.js
Module not found: Error: Can’t resolve ‘…/…/…/platform’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/builder/component-builder’
@ …/node_modules/tns-core-modules/ui/builder/component-builder/component-builder.js 7:15-43
@ …/node_modules/tns-core-modules/ui/builder/builder.js
@ …/node_modules/tns-core-modules/ui/repeater/repeater.js
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/core/bindable/bindable.js
Module not found: Error: Can’t resolve ‘…/…/…/utils/utils’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/core/bindable’
@ …/node_modules/tns-core-modules/ui/core/bindable/bindable.js 8:14-45
@ …/node_modules/tns-core-modules/ui/builder/component-builder/component-builder.js
@ …/node_modules/tns-core-modules/ui/builder/builder.js
@ …/node_modules/tns-core-modules/ui/repeater/repeater.js
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/styling/linear-gradient.js
Module not found: Error: Can’t resolve ‘…/…/color’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/styling’
@ …/node_modules/tns-core-modules/ui/styling/linear-gradient.js 2:14-36
@ …/node_modules/tns-core-modules/ui/styling/style-properties.js
@ …/node_modules/tns-core-modules/ui/styling/css-animation-parser.js
@ …/node_modules/tns-core-modules/ui/styling/style-scope.js
@ …/node_modules/nativescript-dev-webpack/load-application-css.js
@ …/node_modules/nativescript-dev-webpack/load-application-css-angular.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/styling/style-properties.js
Module not found: Error: Can’t resolve ‘…/…/color’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/styling’
@ …/node_modules/tns-core-modules/ui/styling/style-properties.js 3:14-36
@ …/node_modules/tns-core-modules/ui/styling/css-animation-parser.js
@ …/node_modules/tns-core-modules/ui/styling/style-scope.js
@ …/node_modules/nativescript-dev-webpack/load-application-css.js
@ …/node_modules/nativescript-dev-webpack/load-application-css-angular.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/file-system/file-name-resolver/file-name-resolver.js
Module not found: Error: Can’t resolve ‘…/…/platform’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/file-system/file-name-resolver’
@ …/node_modules/tns-core-modules/file-system/file-name-resolver/file-name-resolver.js 2:17-42
@ …/node_modules/tns-core-modules/ui/builder/builder.js
@ …/node_modules/tns-core-modules/ui/repeater/repeater.js
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/builder/builder.js
Module not found: Error: Can’t resolve ‘…/…/platform’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/builder’
@ …/node_modules/tns-core-modules/ui/builder/builder.js 7:17-42
@ …/node_modules/tns-core-modules/ui/repeater/repeater.js
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/styling/style-properties.js
Module not found: Error: Can’t resolve ‘…/…/platform’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/styling’
@ …/node_modules/tns-core-modules/ui/styling/style-properties.js 7:17-42
@ …/node_modules/tns-core-modules/ui/styling/css-animation-parser.js
@ …/node_modules/tns-core-modules/ui/styling/style-scope.js
@ …/node_modules/nativescript-dev-webpack/load-application-css.js
@ …/node_modules/nativescript-dev-webpack/load-application-css-angular.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/styling/style-properties.js
Module not found: Error: Can’t resolve ‘…/…/ui/styling/background’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/styling’
@ …/node_modules/tns-core-modules/ui/styling/style-properties.js 6:19-57
@ …/node_modules/tns-core-modules/ui/styling/css-animation-parser.js
@ …/node_modules/tns-core-modules/ui/styling/style-scope.js
@ …/node_modules/nativescript-dev-webpack/load-application-css.js
@ …/node_modules/nativescript-dev-webpack/load-application-css-angular.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/styling/style-properties.js
Module not found: Error: Can’t resolve ‘…/…/ui/styling/font’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/styling’
@ …/node_modules/tns-core-modules/ui/styling/style-properties.js 4:13-45
@ …/node_modules/tns-core-modules/ui/styling/css-animation-parser.js
@ …/node_modules/tns-core-modules/ui/styling/style-scope.js
@ …/node_modules/nativescript-dev-webpack/load-application-css.js
@ …/node_modules/nativescript-dev-webpack/load-application-css-angular.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/styling/style-properties.js
Module not found: Error: Can’t resolve ‘…/…/utils/utils’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/styling’
@ …/node_modules/tns-core-modules/ui/styling/style-properties.js 5:14-42
@ …/node_modules/tns-core-modules/ui/styling/css-animation-parser.js
@ …/node_modules/tns-core-modules/ui/styling/style-scope.js
@ …/node_modules/nativescript-dev-webpack/load-application-css.js
@ …/node_modules/nativescript-dev-webpack/load-application-css-angular.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/content-view/content-view.js
Module not found: Error: Can’t resolve ‘…/core/view’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/content-view’
@ …/node_modules/tns-core-modules/ui/content-view/content-view.js 5:13-36 6:9-32
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/placeholder/placeholder.js
Module not found: Error: Can’t resolve ‘…/core/view’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/placeholder’
@ …/node_modules/tns-core-modules/ui/placeholder/placeholder.js 2:13-36
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

ERROR in …/node_modules/nativescript-drop-down/angular/index.js
Module not found: Error: Can’t resolve ‘…/drop-down’ in ‘/home/hs/workspace/proj/proj1/node_modules/nativescript-drop-down/angular’
@ …/node_modules/nativescript-drop-down/angular/index.js 7:68-91
@ ./event/event.module.ts
@ …/$$_lazy_route_resource lazy namespace object
@ …/node_modules/@angular/core/fesm5/core.js
@ ./app.module.ts
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/repeater/repeater.js
Module not found: Error: Can’t resolve ‘…/label’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/repeater’
@ …/node_modules/tns-core-modules/ui/repeater/repeater.js 5:14-33
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/proxy-view-container/proxy-view-container.js
Module not found: Error: Can’t resolve ‘…/layouts/layout-base’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/proxy-view-container’
@ …/node_modules/tns-core-modules/ui/proxy-view-container/proxy-view-container.js 2:20-53
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/repeater/repeater.js
Module not found: Error: Can’t resolve ‘…/layouts/layout-base’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/repeater’
@ …/node_modules/tns-core-modules/ui/repeater/repeater.js 6:20-53 12:9-42
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

ERROR in …/node_modules/tns-core-modules/ui/repeater/repeater.js
Module not found: Error: Can’t resolve ‘…/layouts/stack-layout’ in ‘/home/hs/workspace/proj/proj1/node_modules/tns-core-modules/ui/repeater’
@ …/node_modules/tns-core-modules/ui/repeater/repeater.js 7:21-55
@ …/node_modules/tns-core-modules/bundle-entry-points.js
@ ./main.ts

Why webpack use so odd path with ‘…/’ ?


#8

I resolved my issue with slack community help. My issue was the incorrect dependency between packages after I upgraded each package to the latest version of the Nativescript (3.4.1 => 4.1.3). Below my package.json I hope it will help someone.

"dependencies": {
    "@angular/animations": "^6.0.7",
    "@angular/common": "^6.0.7",
    "@angular/compiler": "^6.0.7",
    "@angular/core": "^6.0.7",
    "@angular/forms": "^6.0.7",
    "@angular/http": "^6.0.7",
    "@angular/platform-browser": "^6.0.7",
    "@angular/platform-browser-dynamic": "^6.0.7",
    "@angular/router": "^6.0.7",
    "nativescript-angular": "^6.0.6",
    "nativescript-audio": "^4.3.2",
    "nativescript-background-http": "^3.2.7",
    "nativescript-drop-down": "^4.0.1",
    "nativescript-fresco": "^4.0.0",
    "nativescript-ng-shadow": "^2.1.0",
    "nativescript-ngx-fonticon": "^4.2.0",
    "nativescript-open-app": "^0.2.0",
    "nativescript-pro-ui": "^3.4.1",
    "nativescript-ripple": "^2.1.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toolbox": "^3.0.1",
    "nativescript-urlhandler": "^1.2.2",
    "nativescript-youtubeplayer": "^2.2.5",
    "reflect-metadata": "^0.1.12",
    "rxjs": "~6.0.0 || >=6.1.0",
    "rxjs-compat": "^6.2.2",
    "tns-core-modules": "^4.2.0-2018-07-13-03",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.7",
    "@ngtools/webpack": "~6.1.0-beta.1",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "~0.1.19",
    "codelyzer": "~4.0.2",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^1.6.0",
    "nativescript-dev-typescript": "^0.7.2",
    "nativescript-dev-webpack": "^0.13.0",
    "nativescript-worker-loader": "^0.9.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.3.0",
    "sass-loader": "~7.0.1",
    "tns-platform-declarations": "^4.1.0",
    "tslint": "^5.11.0",
    "tslint-config-prettier": "^1.13.0",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.16.1",
    "webpack-bundle-analyzer": "~2.13.0",
    "webpack-cli": "~2.1.3",
    "webpack-sources": "~1.1.0",
    "@angular-devkit/core": "~0.7.0-beta.1"
  },