Gulp serve:dist fails for webpack with angular 1.x

ashiquemohammed commented 7 years ago

Description

I was trying out the Angular1 + Webpack choice from the generator . It works fine on dev server , But the built failes unfortunately .

Error Message & Stack Trace

ERROR in ./src/index.scss                                                                                                                                                                              
Module build failed: ReferenceError: self is not defined                                                                                                                                               
    at /Users/ashique/Sites/Dummy/node_modules/style-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/css-loader/index.js?minimize!/Users/ashique/Sites/Dummy/node_modules/sass-loader/index.js!
/Users/ashique/Sites/Dummy/node_modules/postcss-loader/index.js!/Users/ashique/Sites/Dummy/src/index.scss:99:30                                                                                        
    at /Users/ashique/Sites/Dummy/node_modules/style-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/css-loader/index.js?minimize!/Users/ashique/Sites/Dummy/node_modules/sass-loader/index.js!
/Users/ashique/Sites/Dummy/node_modules/postcss-loader/index.js!/Users/ashique/Sites/Dummy/src/index.scss:94:47                                                                                        
    at module.exports (/Users/ashique/Sites/Dummy/node_modules/style-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/css-loader/index.js?minimize!/Users/ashique/Sites/Dummy/node_modules/sass-
loader/index.js!/Users/ashique/Sites/Dummy/node_modules/postcss-loader/index.js!/Users/ashique/Sites/Dummy/src/index.scss:116:68)                                                                      
    at Object.<anonymous> (/Users/ashique/Sites/Dummy/node_modules/style-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/css-loader/index.js?minimize!/Users/ashique/Sites/Dummy/node_modules/s
ass-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/postcss-loader/index.js!/Users/ashique/Sites/Dummy/src/index.scss:400:36)                                                                  
    at __webpack_require__ (/Users/ashique/Sites/Dummy/node_modules/style-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/css-loader/index.js?minimize!/Users/ashique/Sites/Dummy/node_modules/
sass-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/postcss-loader/index.js!/Users/ashique/Sites/Dummy/src/index.scss:21:30)                                                                  
    at /Users/ashique/Sites/Dummy/node_modules/style-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/css-loader/index.js?minimize!/Users/ashique/Sites/Dummy/node_modules/sass-loader/index.js!
/Users/ashique/Sites/Dummy/node_modules/postcss-loader/index.js!/Users/ashique/Sites/Dummy/src/index.scss:65:18                                                                                        
    at Object.<anonymous> (/Users/ashique/Sites/Dummy/node_modules/style-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/css-loader/index.js?minimize!/Users/ashique/Sites/Dummy/node_modules/s
ass-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/postcss-loader/index.js!/Users/ashique/Sites/Dummy/src/index.scss:68:10)                                                                   
    at Module._compile (module.js:571:32)                                                                                                                                                              
    at Object.exec (/Users/ashique/Sites/Dummy/node_modules/webpack/lib/NormalModule.js:94:6)                                                                                                          
    at Object.<anonymous> (/Users/ashique/Sites/Dummy/node_modules/extract-text-webpack-plugin/loader.js:112:21)                                                                                       
    at Compiler.<anonymous> (/Users/ashique/Sites/Dummy/node_modules/webpack/lib/Compiler.js:251:10)                                                                                                   
    at /Users/ashique/Sites/Dummy/node_modules/webpack/lib/Compiler.js:442:12                                                                                                                          
    at next (/Users/ashique/Sites/Dummy/node_modules/tapable/lib/Tapable.js:138:11)                                                                                                                    
    at Compiler.<anonymous> (/Users/ashique/Sites/Dummy/node_modules/extract-text-webpack-plugin/loader.js:93:4)                                                                                       
    at next (/Users/ashique/Sites/Dummy/node_modules/tapable/lib/Tapable.js:140:14)                                                                                                                    
    at Compiler.<anonymous> (/Users/ashique/Sites/Dummy/node_modules/webpack/lib/CachePlugin.js:61:4)                                                                                                  

ERROR in /Users/ashique/Sites/Dummy/node_modules/extract-text-webpack-plugin/loader.js!/Users/ashique/Sites/Dummy/node_modules/style-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/css-loader
/index.js?minimize!/Users/ashique/Sites/Dummy/node_modules/sass-loader/index.js!/Users/ashique/Sites/Dummy/node_modules/postcss-loader/index.js!/Users/ashique/Sites/Dummy/src/index.scss doesn't expor
t content

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "1.0.0-rc1",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "js",
      "ci": [],
      "css": "scss",
      "resolved": "/usr/local/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "techs",
      "router": "uirouter"
    }
  }
}

Environment

Node : v7.5.0
NPM: 4.1.2
yo:1.8.5

Swiip commented 7 years ago

It seems to be a problem inside sass-loader for Webpack. Maybe sass-loader evolved and is not compatible anymore with the beta version of Webpack fixed in Fountain rc1.

Try upgrading to Fountain final which use a final version of Webpack.

ashiquemohammed commented 7 years ago

Would upgrading the generator , update the project for the already generated project ?

Swiip commented 7 years ago

It's not perfect but the question is well explained here: http://stackoverflow.com/questions/18480316/how-to-upgrade-existing-project-scaffolded-with-yeoman

That or you have to track down the compatibility issues between the versions of Webpack / style-loader / sass-loader. The first attempt I would make would be to remove the ^ of the sass-loader version number.

ashiquemohammed commented 7 years ago

I upgraded the generator and the problem still exists.

Swiip commented 7 years ago

It works on CI, just tried your options and works too. I don't see right now the difference which can cause the problem.

ashiquemohammed commented 7 years ago

Haven't selected any of the continuous integration tools .

zckrs commented 7 years ago

in OUR CI ===> https://travis-ci.org/FountainJS/fountain/jobs/204112375#L4412

ashiquemohammed commented 7 years ago

I update the generator, but "version": "1.0.0-rc1" is the far i can get . Why is that ? I updated the generator starting with yo.

zckrs commented 7 years ago

npm i -g generator-fountain-angular1 then re-run yo in your project

How to upgrade existing project scaffolded with Yeoman

ashiquemohammed commented 7 years ago

I did that and 1.0.0-rc1 is the version I see in .yo-rc.json file and the issue still exists .

zckrs commented 7 years ago

can you run npm ls -g --depth=0 and give me result ?

ashiquemohammed commented 7 years ago


├── generator-fountain-angular1@1.0.0                                                                                                                                                            
├── generator-fountain-webapp@1.0.0                                                                                                                                                              
├── generator-gulp-angular@1.1.1                                                                                                                                                                 
├── heroku@0.2.0                                                                                                                                                                                 
├── http-server@0.9.0                                                                                                                                                                            
└── npm@4.1.2     ```

zckrs commented 7 years ago

Can you publish your project somehere?

ashiquemohammed commented 7 years ago

The project is the basic boiler plate created using the generator . Where do you want me to publish it ,

zckrs commented 7 years ago

on github ?

Can you create a new directory and run yo inside this new folder ? mkdir testFountainAngular1 && cd testFountainAngular1 && yo fountain-webapp && gulp serve:dist

I just run a basic boilerplate with this command and everything works

screenshot from 2017-03-21 12-13-25