ERROR in Entry module not found: Error: Can't resolve './app.css' in...

caferrari commented 7 years ago

Output:

Running tns prepare...
Executing before-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/before-prepare/nativescript-dev-typescript.js
Executing before-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/before-prepare/nativescript-plugin-firebase.js
Preparing project...
Project successfully prepared (android)
Executing after-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/after-prepare/firebase-build-gradle.js
Configure firebase
Executing after-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/after-prepare/firebase-copy-google-services.js
Copy /home/caferrari/projetos/abrafarma-mobile/app/App_Resources/Android/google-services.json to /home/caferrari/projetos/abrafarma-mobile/platforms/android/google-services.json.
Executing after-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/after-prepare/nativescript-dev-sass.js
All SASS source files removed from app package
Executing after-prepare hook from /home/caferrari/projetos/abrafarma-mobile/hooks/after-prepare/nativescript-plugin-firebase.js
Running webpack for android...
 94% asset optimization[copy-webpack-plugin] WARNING - unable to locate 'app.css' at '/home/caferrari/projetos/abrafarma-mobile/app/app.css'
Hash: 3151ad8c262af46ce444
Version: webpack 3.2.0
Time: 5690ms
                  Asset       Size  Chunks                    Chunk Names
              bundle.js  881 bytes       0  [emitted]         bundle
              vendor.js    3.03 MB       1  [emitted]  [big]  vendor
  fonts/FontAwesome.ttf     166 kB          [emitted]         
     fonts/OpenSans.ttf     217 kB          [emitted]         
fonts/MaterialIcons.ttf     261 kB          [emitted]  [big]  
       fonts/Roboto.ttf     161 kB          [emitted]         
       images/apple.jpg     277 kB          [emitted]  [big]  
           package.json  149 bytes          [emitted]         
             starter.js   39 bytes          [emitted]         
    tns-java-classes.js    0 bytes          [emitted]         
 [110] .. lazy 160 bytes {1} [built]
 [158] ./main.aot.ts 465 bytes {0} [built]
 [202] ./vendor.ts 523 bytes {1} [built]
 [203] ./vendor-platform.android.ts 465 bytes {1} [built]
    + 254 hidden modules

ERROR in Entry module not found: Error: Can't resolve './app.css' in '/home/caferrari/projetos/abrafarma-mobile/app'

ERROR in ENOENT: no such file or directory, open '/home/caferrari/projetos/abrafarma-mobile/app/components/speaker-list-item.android.css'

ERROR in ./main.aot.ts
Module not found: Error: Can't resolve './app.module.ngfactory' in '/home/caferrari/projetos/abrafarma-mobile/app'
 @ ./main.aot.ts 5:29-62

ERROR in [copy-webpack-plugin] unable to locate 'app.css' at '/home/caferrari/projetos/abrafarma-mobile/app/app.css'
Child app/components/activity-tabs.html:
       1 module
Child app/components/speaker-list-item.html:
       1 module
Child app/components/activity-list.html:
       1 module
Child app/components/activity-list-item.html:
       1 module
Child app/pages/login/login.html:
       [0] ./pages/login/login.html 1.02 kB {0} [built]
Child app/components/favorite.html:
       1 module
Child app/pages/event/event.html:
       [0] ./pages/event/event.html 1.2 kB {0} [built]
Child app/pages/event-dashboard/event-dashboard.html:
       [0] ./pages/event-dashboard/event-dashboard.html 2.33 kB {0} [built]
Child app/components/side-drawer.html:
       1 module
Child app/pages/activity/activity.html:
       [0] ./pages/activity/activity.html 518 bytes {0} [built]
Child app/pages/schedule/schedule.html:
       [0] ./pages/schedule/schedule.html 941 bytes {0} [built]
Child app/pages/speaker/speaker.html:
       [0] ./pages/speaker/speaker.html 663 bytes {0} [built]
Child app/pages/speaker-detail/speaker-detail.html:
       [0] ./pages/speaker-detail/speaker-detail.html 1.5 kB {0} [built]
Child app/pages/talk/talk.html:
       [0] ./pages/talk/talk.html 2.51 kB {0} [built]
Child app/pages/satisfaction-survey/satisfaction-survey.html:
       [0] ./pages/satisfaction-survey/satisfaction-survey.html 1.18 kB {0} [built]
Child app/pages/activity-question/activity-question.html:
       [0] ./pages/activity-question/activity-question.html 1.63 kB {0} [built]
Child app/pages/activity-question-detail/activity-question-detail.html:
       [0] ./pages/activity-question-detail/activity-question-detail.html 2.13 kB {0} [built]
Child app/pages/profile/profile.html:
       [0] ./pages/profile/profile.html 5.69 kB {0} [built]
Webpack Bundle Analyzer saved stats file to /home/caferrari/projetos/abrafarma-mobile/report/stats.json
Webpack Bundle Analyzer saved report to /home/caferrari/projetos/abrafarma-mobile/report/report.html
child process exited with code 2

webpack.config.js:

const {
  resolve,
  join
} = require("path");

const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const {
  BundleAnalyzerPlugin
} = require("webpack-bundle-analyzer");

const {
  AotPlugin
} = require("@ngtools/webpack");

const mainSheet = `app.css`;

module.exports = env => {
  const platform = getPlatform(env);

  // Default destination inside platforms/<platform>/...
  const path = resolve(nsWebpack.getAppPath(platform));

  const entry = {
    // Discover entry module from package.json
    bundle: `./${nsWebpack.getEntryModule()}`,

    // Vendor entry with third-party libraries
    vendor: `./vendor`,

    // Entry for stylesheet with global application styles
    [mainSheet]: `./${mainSheet}`,
  };

  const rules = getRules();
  const plugins = getPlugins(platform, env);
  const extensions = getExtensions(platform);

  const config = {
    context: resolve("./app"),
    target: nativescriptTarget,
    entry,
    output: {
      pathinfo: true,
      path,
      libraryTarget: "commonjs2",
      filename: "[name].js",
    },
    resolve: {
      extensions,

      // Resolve {N} system modules from tns-core-modules
      modules: [
        "node_modules/tns-core-modules",
        "node_modules",
      ],

      alias: {
        '~': resolve("./app")
      },
    },
    node: {
      // Disable node shims that conflict with NativeScript
      "http": false,
      "timers": false,
      "setImmediate": false,
      "fs": "empty",
    },
    module: {
      rules
    },
    plugins,
  };

  if (env.snapshot) {
    plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
      chunk: "vendor",
      projectRoot: __dirname,
      webpackConfig: config,
      targetArchs: ["arm", "arm64", "ia32"],
      tnsJavaClassesOptions: {
        packages: ["tns-core-modules"]
      },
      useLibs: false
    }));
  }

  return config;
};

function getPlatform(env) {
  return env.android ? "android" :
    env.ios ? "ios" :
    () => {
      throw new Error("You need to provide a target platform!")
    };
}

function getRules() {
  return [{
      test: /\.html$|\.xml$/,
      use: [
        "raw-loader",
      ]
    },
    // Root stylesheet gets extracted with bundled dependencies
    {
      test: new RegExp(mainSheet),
      use: ExtractTextPlugin.extract([{
          loader: "resolve-url-loader",
          options: {
            silent: true
          },
        },
        {
          loader: "nativescript-css-loader",
          options: {
            minimize: false
          }
        },
        "nativescript-dev-webpack/platform-css-loader",
      ]),
    },
    // Other CSS files get bundled using the raw loader
    {
      test: /\.css$/,
      exclude: new RegExp(mainSheet),
      use: [
        "raw-loader",
      ]
    },
    // SASS support
    {
      test: /\.scss$/,
      use: [
        "raw-loader",
        "resolve-url-loader",
        "sass-loader",
      ]
    },

    // Compile TypeScript files with ahead-of-time compiler.
    {
      test: /\.ts$/,
      loaders: [
        "nativescript-dev-webpack/tns-aot-loader",
        "@ngtools/webpack",
      ]
    }

  ];
}

function getPlugins(platform, env) {
  let plugins = [
    new ExtractTextPlugin(mainSheet),

    // Vendor libs go to the vendor.js chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: ["vendor"],
    }),

    // Define useful constants like TNS_WEBPACK
    new webpack.DefinePlugin({
      "global.TNS_WEBPACK": "true",
    }),

    // Copy assets to out dir. Add your own globs as needed.
    new CopyWebpackPlugin([{
        from: mainSheet
      },
      {
        from: "css/**"
      },
      {
        from: "fonts/**"
      },
      {
        from: "**/*.jpg"
      },
      {
        from: "**/*.png"
      },
      {
        from: "**/*.xml"
      },
    ], {
      ignore: ["App_Resources/**"]
    }),

    // Generate a bundle starter script and activate it in package.json
    new nsWebpack.GenerateBundleStarterPlugin([
      "./vendor",
      "./bundle",
    ]),

    // Generate report files for bundles content
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false,
      generateStatsFile: true,
      reportFilename: join(__dirname, "report", `report.html`),
      statsFilename: join(__dirname, "report", `stats.json`),
    }),

    // Angular AOT compiler
    new AotPlugin({
      tsConfigPath: "tsconfig.aot.json",
      entryModule: resolve(__dirname, "app/app.module#AppModule"),
      typeChecking: false
    }),

    // Resolve .ios.css and .android.css component stylesheets, and .ios.html and .android component views
    new nsWebpack.UrlResolvePlugin({
      platform: platform,
      resolveStylesUrls: true,
      resolveTemplateUrl: true
    }),

  ];

  if (env.uglify) {
    plugins.push(new webpack.LoaderOptionsPlugin({
      minimize: true
    }));

    // Work around an Android issue by setting compress = false
    const compress = platform !== "android";
    plugins.push(new webpack.optimize.UglifyJsPlugin({
      mangle: {
        except: nsWebpack.uglifyMangleExcludes
      },
      compress,
    }));
  }

  return plugins;
}

// Resolve platform-specific modules like module.android.js
function getExtensions(platform) {
  return Object.freeze([
    `.${platform}.ts`,
    `.${platform}.js`,
    ".aot.ts",
    ".ts",
    ".js",
    ".css",
    `.${platform}.css`,
  ]);
}

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "br.com.abr.ex",
    "tns-android": {
      "version": "3.1.1"
    },
    "tns-ios": {
      "version": "3.1.0"
    }
  },
  "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/router": "4.1.3",
    "nativescript-angular": "3.1.3",
    "nativescript-bitmap-factory": "1.7.1",
    "nativescript-cardview": "2.0.2",
    "nativescript-imagepicker": "3.0.2",
    "nativescript-loading-indicator": "2.3.2",
    "nativescript-local-notifications": "1.2.1",
    "nativescript-permissions": "1.2.3",
    "nativescript-plugin-firebase": "4.0.5",
    "nativescript-telerik-ui-pro": "file:nativescript-ui-pro.tgz",
    "nativescript-theme-core": "1.0.4",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "string-mask": "0.3.0",
    "tns-core-modules": "3.1.0",
    "tns-platform-declarations": "3.1.0",
    "zone.js": "0.8.14"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.1.3",
    "@ngtools/webpack": "1.5.0",
    "babel-traverse": "6.25.0",
    "babel-types": "6.25.0",
    "babylon": "6.17.4",
    "copy-webpack-plugin": "4.0.1",
    "extract-text-webpack-plugin": "3.0.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "0.26.0",
    "nativescript-dev-sass": "1.2.0",
    "nativescript-dev-typescript": "0.5.0",
    "nativescript-dev-webpack": "0.7.3",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "2.1.0",
    "tslib": "1.7.1",
    "typescript": "2.3.4",
    "webpack": "3.2.0",
    "webpack-bundle-analyzer": "2.8.2",
    "webpack-sources": "1.0.1"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }
}

ghost commented 7 years ago

I have same problem. Do you have any idea? Thanx

shayfriedman commented 7 years ago

Look at the solution here: https://discourse.nativescript.org/t/nativescript-webpack-version-dont-load-platform-css/2294

leocaseiro commented 7 years ago

The solution from https://github.com/NativeScript/template-master-detail-ng/pull/64 by @vakrilov worked for me.

PS: Make sure you install sass-loader:

"sass-loader": "^6.0.6"

UPDATE! With this solution, you're not able to run the app with livesync in regards to the .scss files on your components.

berardo commented 7 years ago

There's a chance of the pull request I made (#268) gets anybody else's problem fixed. Worked for me. This has only to do with platform specific main sheets (app.ios.css and app.android.css). Regarding the fact of being written in sass or less, I'd suggest to run via tns first (in order to generate all css files) and then run any npm script. Bare in mind this plugin is mainly focused on production therefore imho changes like in NativeScript/template-master-detail-ng#64 seem to be creating more problems than actually fixing (if I'm not missing the point there).

JohanBeumer commented 7 years ago

I'm having the exact same problem as @caferrari and have no clue of what to do. Any help/suggestion would be appreciated.

I noticed that "tns build" compiles .scss to .css. "npm run build-android-bundle" doesn't do the scss compile and therefor gives the error. I thought sass-loader would compile the scss-files, is that right?

The repo https://github.com/sis0k0/nativescript-webpack-sass of @sis0k0 has all .css files in it, should I do that also?