Nativescript-dev-webpack 0.9.0 build error with default generated project


#1

NativeScript: 3.4.0
nativescript-dev-webpack: 0.9.0

Command used to create project
tns create my-app-name --template tns-template-tab-navigation-ng

Followed the instruction and installed web pack
npm install --save-dev nativescript-dev-webpack

Then build the project without change anything
tns build android --bundle

Error
Module not found: Error: Can’t resolve ‘./tabs.component.css’ in ‘D:\Dev\Workspace\Local\NativeScript\my-app\app\tabs’

I checked the generated project, there is no tabs.component.css but the css file is referenced in the tabs.component.ts.

  • Do I have to add the tabs.component.css and manually import the platform specific css/scss file by myself? If so how I can import the platform specific files?
  • Or I have to change the webpack.config.js file to use the platform specific css/scss file directly? This is what I did with version 0.8.0 and it worked great.

Any help would be appreciated.


#2

@GhostFox I had faced similar issues earlier with webpack, the workaround was to run without --bundle option once so the TS / SASS complier generates all required JS / CSS files properly.

Also the template still uses Angular 4.x, hope you updated that along with webpack.


#3

Thanks manojdcoder.

I think we still need to publish the app via bundle build.

With nativescript-dev-webpack: 0.8.0, I found the solution from stackoverflow, updated the webpack.config.js to use the platform specific files.

But it did not work for 0.9.0 since the webpack.config.js has different structure.

Thanks anyway.


#4

@GhostFox I understand you have to publish with bundle. I just meant you have to run the app once without bundle, so when the next time you run with bundle it can use the platform specific files generated in previous run.


#5

@manojdcoder, really? I must have a try.

BTW, the app.css is also missing. The can fix this issue, too?


#6

Yes, that should. Let us know if that worked.


#7

@manojdcoder

Amazing, that worked as I expected. This fixed the css issue, includes tabs.component.css and app.css.

Wow, pal, it saved my day. I don’t even need to update the webpack.config.js as I did with 0.8.0. How do you know this workaround?

This leads to another question, how I can include the common css file when the css file generated by framework?

Thanks again.


#8

I had faced similar issue in past a few months ago. It seems webpack build fails when the changes made, leads to new files during compilation.

So I always do a build without webpack whenever there are new files or it’s first build after checking out from source control.