NativeScript 7 build error: "export 'Style' (reexported as 'StyleBase') was not found in './map-view'

[aquinn637]

I have upgraded from NS6 to NS7.

When I run ns build android I get this warning:

WARNING in ../node_modules/nativescript-google-maps-sdk/map-view-common.js 72:0-30
"export 'Style' (reexported as 'StyleBase') was not found in './map-view'
 @ ../node_modules/nativescript-google-maps-sdk/map-view.js
 @ ./app/authenticated/home-page/components/geo-clocking-button/modals/google-maps-modal/google-maps-modal.component.ts
 @ ./app/authenticated/authenticated.module.ts
 @ ./app/main/app.module.ts
 @ ./main.ts

[VanderSP]

Im also getting this warning! :D

[Heena-Vora]

@aquinn637 @VanderSP
It's similar to issue, It doesn't work with Nativescript 7 on iOS!
I am also getting this warning, then my app crashed, when I tried to access page which has map on it.

WARNING in ../node_modules/nativescript-google-maps-sdk/map-view-common.js 72:0-30
"export 'Style' (reexported as 'StyleBase') was not found in './map-view'
@ ../node_modules/nativescript-google-maps-sdk/map-view.js
@ ./app/app.module.ts
@ ./main.ts

and then, after build

Restarting application on device 89E97691-1479-4B58-894C-F78169AEBCA6...
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught ReferenceError: NativeClass is not defined
at
../node_modules/nativescript-google-maps-sdk/map-view.js(file: node_modules/nativescript-google-maps-sdk/map-view.ios.js:49:0)
at webpack_require(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at ./app/app.module.ts(file: src/app/app.module.ts:1:0)
at webpack_require(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at (file:///app/bundle.js:6071:73)
at ./main.ts(file:///app/bundle.js:6122:30)

Let me know guys if anyone has a solution to it

[Heena-Vora]

Try this, temp fix, it works for me on ns7 / angular 11

[mxignas]

What if im getting one on android? what i should change in map-view-common.js?

[mxignas]

I have upgraded from NS6 to NS7.

When I run ns build android I get this warning:

WARNING in ../node_modules/nativescript-google-maps-sdk/map-view-common.js 72:0-30
"export 'Style' (reexported as 'StyleBase') was not found in './map-view'
 @ ../node_modules/nativescript-google-maps-sdk/map-view.js
 @ ./app/authenticated/home-page/components/geo-clocking-button/modals/google-maps-modal/google-maps-modal.component.ts
 @ ./app/authenticated/authenticated.module.ts
 @ ./app/main/app.module.ts
 @ ./main.ts

did you find any solutions?

[jitendraP-ashutec]

Based on @kefahB suggested I have created custom local package so each time we didn't need to change in node_modules/nativescript-google-maps-sdk/map-view.ios.js.

you can download package here: https://github.com/jitendraP-ashutec/nativescript-googlemap-sdk-package/blob/main/nativescript-google-maps-sdk-4.0.0.tgz

and place this file into root folder in your project and run below command to install this package into locally:

npm install nativescript-google-maps-sdk-4.0.0.tgz

I have tested it on Nativescript 7.0.10 and Angular 10.1.5.

[alexmeia]

Based on @kefahB suggested I have created custom local package so each time we didn't need to change in node_modules/nativescript-google-maps-sdk/map-view.ios.js.

you can download package here: https://github.com/jitendraP-ashutec/nativescript-googlemap-sdk-package/blob/main/nativescript-google-maps-sdk-4.0.0.tgz

and place this file into root folder in your project and run below command to install this package into locally:

npm install nativescript-google-maps-sdk-4.0.0.tgz

I have tested it on Nativescript 7.0.10 and Angular 10.1.5.

@jitendraP-ashutec thanks, very useful for now.

[DavidMares22]

What if im getting one on android? what i should change in map-view-common.js?

same here, any news?

[leocrawf]

As reported by @alexmeia it does work. I tried it on android.

[DavidMares22]

@leocrawf on an android emulator or a device ? for me it works on my phone but not on my emulator

[leocrawf]

@DavidMares22 to be specific it worked on my android device, but not on the emulator.

[leocrawf]

@DavidMares22 it is now working on my android emulator. I am using an android 10 emulator.

[DavidMares22]

@leocrawf Great!. I'll try android 10 then, which version were you using before?

[leocrawf]

There is an issue when I try to do a build. This fix will only work with tns run [platform] but not tns build android ....... THis is my error:

ERROR in chunk vendor [initial]
vendor.js
/home/leo/Dev/Nativescript/MY PRODUCTS/mobileapp/appv7/node_modules/@nativescript/webpack/hmr/hot-loader.js!/home/leo/Dev/Nativescript/MY PRODUCTS/mobileapp/appv7/node_modules/nativescript-google-maps-sdk/map-view.js cc2715304aae9456372a50f12e5c36f0
Circular reexports "../node_modules/nativescript-google-maps-sdk/map-view.js".Style --> "../node_modules/nativescript-google-maps-sdk/map-view-common.js".StyleBase -(circular)-> "../node_modules/nativescript-google-maps-sdk/map-view.js".Style
Executing webpack failed with exit code 2.

[OPADA-Eng]

@leocrawf I have managed to resolve that error by removing

export { StyleBase as Style };

from the file map-view.android.js
and the add it to the file map-view-common.js

[anaclaudiar]

I also have this same problem, but I didn't want to change files inside node_modules, did anyone solve it differently?

[MattCCC]

As a solution to this problem you can simply add

    alias['./map-view'] = resolve(projectRoot, 'node_modules/@nativescript/core');

in your webpack.config.js file. As long as your project doesn't have map-view file without any extension, you can sleep well. Hope it helps.

[Przemase]

Proper webpack.config.js

const webpack = require("@nativescript/webpack");
const { resolve } = require('path');

module.exports = (env) => {
webpack.init(env);

// Learn how to customize:
// https://docs.nativescript.org/webpack

webpack.chainWebpack(config => {
	config.resolve.alias.set('./map-view', resolve(__dirname, 'node_modules/@nativescript/core'));
})

return webpack.resolveConfig();

};

[alexmeia]

@MattCCC @Przemase thanks for the solution.

[SingleMalted]

I'm still having this issue... I'm on webpack<5 😞. Can someone please take a look at my config and let me know if you see anything that can be causing this issue. Thanks in advance.

CONFIG  {
  mode: 'production',
  context: '/Users/myproj/app',
  externals: [ /^~\/package.json((\/.*)|$)/, /^package.json((\/.*)|$)/ ],
  watchOptions: {
    ignored: [
      '/Users/myproj/app/App_Resources',
      '**/.*'
    ]
  },
  target: [Function: nativescriptTarget],
  entry: { bundle: './app.ts' },
  output: {
    pathinfo: false,
    path: '/Users/myproj/platforms/android/app/src/main/assets/app',
    sourceMapFilename: '[file].map',
    libraryTarget: 'commonjs2',
    filename: '[name].js',
    globalObject: 'global',
    hashSalt: '1647539132598'
  },
  resolve: {
    extensions: [ '.ts', '.js', '.scss', '.css' ],
    modules: [ 'node_modules/@nativescript/core', 'node_modules' ],
    alias: {
      './map-view': '/Users/myproj/node_modules/@nativescript/core',
      '~/package.json': '/Users/myproj/package.json',
      '~': '/Users/myproj/app',
      'tns-core-modules': '@nativescript/core'
    },
    symlinks: true
  },
  resolveLoader: { symlinks: false },
  node: {
    http: false,
    timers: false,
    setImmediate: false,
    fs: 'empty',
    __dirname: false
  },
  devtool: 'none',
  optimization: {
    runtimeChunk: 'single',
    noEmitOnErrors: true,
    splitChunks: { cacheGroups: [Object] },
    minimize: false,
    minimizer: [ [TerserPlugin] ]
  },
  module: {
    rules: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
  },
  plugins: [
    DefinePlugin { definitions: [Object] },
    CleanWebpackPlugin {
      dangerouslyAllowCleanPatternsOutsideProject: false,
      dry: false,
      verbose: false,
      cleanStaleWebpackAssets: true,
      protectWebpackAssets: true,
      cleanAfterEveryBuildPatterns: [],
      cleanOnceBeforeBuildPatterns: [Array],
      currentAssets: [],
      initialClean: false,
      outputPath: '',
      apply: [Function: bound apply],
      handleInitial: [Function: bound handleInitial],
      handleDone: [Function: bound handleDone],
      removeFiles: [Function: bound removeFiles]
    },
    { apply: [Function: apply] },
    GenerateNativeScriptEntryPointsPlugin {
      appEntryName: 'bundle',
      files: {}
    },
    NativeScriptWorkerPlugin {
      options: {},
      [Symbol(NATIVESCRIPT_WORKER_PLUGIN_SYMBOL)]: true
    },
    PlatformFSPlugin {
      platform: 'android',
      platforms: [Array],
      ignore: []
    },
    WatchStateLoggerPlugin {},
    WebpackObfuscatorPlugin { options: [Object], excludes: [Array] },
    ForkTsCheckerWebpackPlugin { options: [Object] }
  ]
}