es6 import syntax error

[MEGApixel23]

Hi!

I try to use inject-loader on a following file:

import AuthResource from './../../resources/auth/Auth';
import { REMOVE_TOKEN, SET_TOKEN } from '../actions';

export default {
// ...
};

with code

const actionsInjector = require('inject!./actions');

and an error appears

ERROR in ./~/inject-loader/dist!./resources/assets/js/store/auth/auth.js
Module parse failed: /home/megapixel23/Projects/vue-demo/node_modules/inject-loader/dist/index.js!/home/megapixel23/Projects/vue-demo/resources/assets/js/store/auth/auth.js 'import' and 'export' may only appear at the top level (26:6)
You may need an appropriate loader to handle this file type.
|     (function () {
|       // $FlowIgnore
|       import AuthResource from './../../resources/auth/Auth';
| import { REMOVE_TOKEN, SET_TOKEN } from '../actions';
| 
 @ ./resources/assets/js/store/auth/auth.spec.js 2:24-58

Seems like es6 import syntax does not work in inject-loader

[plasticine]

@MEGApixel23 Could you provide some more information (webpack version/config, babel config, etc)? Looks to me like things are just a bit mis-configured.

Check out the examples in https://github.com/plasticine/inject-loader/tree/master/example and let me know if they help you out.

[plasticine]

Also, what version of inject-loader are you using?

[MEGApixel23]

Here is my package.json file

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch",
    "tests": "./node_modules/karma/bin/karma start karma.config.js"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "inject-loader": "^3.0.0-beta3",
    "jasmine-core": "^2.5.2",
    "jquery": "^3.1.0",
    "karma": "^1.3.0",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-webpack": "^2.0.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.10",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.1.1",
    "vuex": "^2.1.1"
  },
  "dependencies": {}
}

and karma.config.js file

// Karma configuration

let webpackConf = require('./webpack.config.js');

if (webpackConf.entry) {
  delete webpackConf.entry;
}

module.exports = function(config) {
  config.set({

    frameworks: ['jasmine'],

    port: 9876, // web server port

    colors: true,

    logLevel: config.LOG_INFO,

    reporters: ['progress'], // dots, progress

    autoWatch: true, // enable / disable watching files & then run tests

    browsers: ['Chrome'], //'PhantomJS', 'Firefox',

    singleRun: true, // if true, Karma captures browsers, runs the tests and exits

    concurrency: Infinity, // how many browser should be started simultaneous

    webpack: webpackConf, // Pass your webpack.config.js file's content

    webpackMiddleware: {
      noInfo: true,
      stats: 'errors-only'
    },

    /**
     * base path that will be used to resolve all patterns (eg. files, exclude)
     * This should be your JS Folder where all source javascript
     * files are located.
     */
    basePath: './resources/assets/js/',

    /**
     * list of files / patterns to load in the browser
     * The pattern just says load all files within a
     * tests directory including subdirectories
     **/
    files: [
      {
        pattern: '**/*.spec.js',
        watched: false
      },
    ],

    // list of files to exclude
    exclude: [],

    /**
     * pre-process matching files before serving them to the browser
     * Add your App entry point as well as your Tests files which should be
     * stored under the tests directory in your basePath also this expects
     * you to save your tests with a .spec.js file extension. This assumes we
     * are writing in ES6 and would run our file through babel before webpack.
     */
    preprocessors: {
      'app.js': ['webpack', 'babel'],
      '**/*.spec.js': ['babel', 'webpack']
    },
  })
};

and webpack.config.js

module.exports = {};

[plasticine]

@MEGApixel23 Please check out the examples in the repo — specifically the webpack config. This is not an issue with inject-loader, you’re just missing some config.

[MEGApixel23]

You are right. Thanks a lot! Here is what I've done:

1. npm install babel-core babel-loader babel-preset-es2015 webpack --save-dev
2. And added the following code into webpack config:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};

[hershmire]

@plasticine Do you have any examples with Babel 7? I'm getting similar issues once upgrading to Babel 7. Worked fine with Babel 6.

[Mavtak]

@hershmire, did you ever find a solution?

[yaakov123]

#62 (comment) provides a workaround @Mavtak

[plasticine]

@Mavtak Yep, as @yaakov123 mentioned the tl;dr of this is that inject-loader operates on CJS modules only (at the moment anyway), so any code you want to inject needs to be compiled to CJS before inject-loader can operate on it.