ES6 format is not working

[SoldierCorp]

Hi!

I already have my .babelrc with and the npm package installed node_modules

"presets" : ["es2015"]

But when I run sails lift the console is showing and error related to the import word

So I want to know what else is necessary to run the webpack config in ES6 format.

I'm using sails 0.12.2

Thanks!

[Salakar]

You won't just be able to use ES6 in your project, you need to either compile your source into ES5 or use the babel-register require hook, and then lift via node app.js not sails lift

See https://github.com/teamfa/sails-universal-react-starter - it's a full ES6 project, sails, react + HMR and server side rendering of react too.

You could just use the ES5 examples in the readme if you don't want to go the full ES6 route.

[SoldierCorp]

I see, thank you

Actually I'm building a project but using Angular 1.x so, some configurations will be useful from that react-starter.

For now I'm going to use the ES5 mode in my project and I'm using a pice of code from other issue which is this one:

    // config/webpack.js
var webpack = require('webpack');
var path = require("path");
//
//  __dirnamne - https://nodejs.org/docs/latest/api/globals.html#globals_dirname
//  so this is basically `./config` in this file.
//
module.exports.webpack = {
    config: {
      entry: path.resolve(__dirname, "./../assets/js/app"), // go up one from config into the src dir, no need to say index.js
      output: {
          path: path.resolve(__dirname, './../assets/js/app'),  // go up one from config into the assets dir,
          filename: "bundle.js"
      },
      module: {
          loaders: [
              { test: /\.css$/, loader: "style!css" }
          ]
      }
    },  // webpack config here
    development: { // dev server config
      webpack: { }, // separate webpack config for the dev server or defaults to the config above
      config: { // webpack-dev-server-config
        port: 3000
      }
    },
    watchOptions: {
      aggregateTimeout: 300
    }
};

but the console says

    sails lift

info: Starting app...


D:\Development\web_projects\imsoldier\node_modules\webpack-dev-middleware\middleware.js:106
                        if(err) throw err;
                                ^
 Error: invalid argument
    at pathToArray (D:\Development\web_projects\imsoldier\node_modules\memory-fs\lib\MemoryFileSystem.js:44:10)
    at MemoryFileSystem.mkdirpSync (D:\Development\web_projects\imsoldier\node_modules\memory-fs\lib\MemoryFileSystem.js:139:13)
    at MemoryFileSystem.(anonymous function) [as mkdirp] (D:\Development\web_projects\imsoldier\node_modules\memory-fs\lib\MemoryFileSystem.js:279:34)
    at Compiler.<anonymous> (D:\Development\web_projects\imsoldier\node_modules\webpack\lib\Compiler.js:229:25)
    at Compiler.applyPluginsAsync (D:\Development\web_projects\imsoldier\node_modules\tapable\lib\Tapable.js:60:69)
    at Compiler.emitAssets (D:\Development\web_projects\imsoldier\node_modules\webpack\lib\Compiler.js:226:7)
    at Watching.<anonymous> (D:\Development\web_projects\imsoldier\node_modules\webpack\lib\Compiler.js:54:18)
    at D:\Development\web_projects\imsoldier\node_modules\webpack\lib\Compiler.js:403:12
    at Compiler.next (D:\Development\web_projects\imsoldier\node_modules\tapable\lib\Tapable.js:67:11)
    at Compiler.<anonymous> (D:\Development\web_projects\imsoldier\node_modules\webpack\lib\CachePlugin.js:40:4)
    at Compiler.applyPluginsAsync (D:\Development\web_projects\imsoldier\node_modules\tapable\lib\Tapable.js:71:13)
    at Compiler.<anonymous> (D:\Development\web_projects\imsoldier\node_modules\webpack\lib\Compiler.js:400:9)
    at Compilation.<anonymous> (D:\Development\web_projects\imsoldier\node_modules\webpack\lib\Compilation.js:577:13)
    at Compilation.applyPluginsAsync (D:\Development\web_projects\imsoldier\node_modules\tapable\lib\Tapable.js:60:69)
    at Compilation.<anonymous> (D:\Development\web_projects\imsoldier\node_modules\webpack\lib\Compilation.js:572:10)
    at Compilation.applyPluginsAsync (D:\Development\web_projects\imsoldier\node_modules\tapable\lib\Tapable.js:60:69)

I'm using that /assets/js/app because inside I have my app.js, controllers.js, etc. of angular and I have the style loaderand the path package.

[Salakar]

That issue is usually because a path you specified in the config is invalid.

The config below is looking for a file /assets/js/app/index.js or /assets/js/app.js:

 config: {
      entry: path.resolve(__dirname, "./../assets/js/app"), // go up one from config into the src dir, no need to say index.js
      output: {
          path: path.resolve(__dirname, './../assets/js/app'),  // go up one from config into the assets dir,
          filename: "bundle.js"
      },

So change these to the correct entry file of your angular code, you should probably change the output path also otherwise this builds to the same directory - the sails grunt build normally goes to a .tmp folder in the root of the project so this is generally a good place to output to for consistency. So maybe output to ./../.tmp/assets/js ? perhaps. Entirely up to you.

Should be fairly straight forward to convert that other project to do angular, you doing your angular in ES5 or 6? I can always try make a quick starter for angular based on the react one if you're desperate 🙇

If your angular is in es6 then you'll need a babel loader in your config:

{
      // JS LOADER
      // Reference: https://github.com/babel/babel-loader
      // Transpile .js files using babel-loader
      // Compiles ES6 and ES7 into ES5 code
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/
}

See https://github.com/preboot/angular-webpack for a angular + webpack workflow example

[Salakar]

Also, remove the 'development' object from your config if it's not being used, this creates a webpack dev server which you're currently not using.

[SoldierCorp]

I see now,

I'm trying to replicate almost all the grunt default functions and in this case I'm using CopyWebpackPlugin to copy the folder to the .tmp/public and it's working fine but now I'm dealing with the stylus compilation to css but if you really can create an angular quick starter.. will be perfect!

I'm new in webpack as you can see but I really want to create this project and release it then I'm going to create a new differente one but using react.

[Salakar]

For stylus you can use https://github.com/shama/stylus-loader - you need to add the loader and then the export extensions as listed on the readme, should just work straight away then. You'll need all the extensions shown, including the empty one.

Can't promise a starter until later tomorrow or the day after though. 😸

[SoldierCorp]

That´s ok.

Thanks!