Giter VIP home page Giter VIP logo

Comments (9)

hershmire avatar hershmire commented on May 30, 2024 5

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

from inject-loader.

plasticine avatar plasticine commented on May 30, 2024 1

@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.

from inject-loader.

plasticine avatar plasticine commented on May 30, 2024

@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.

from inject-loader.

plasticine avatar plasticine commented on May 30, 2024

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

from inject-loader.

MEGApixel23 avatar MEGApixel23 commented on May 30, 2024

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 = {};

from inject-loader.

MEGApixel23 avatar MEGApixel23 commented on May 30, 2024

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']
        }
      }
    ]
  }
};

from inject-loader.

Mavtak avatar Mavtak commented on May 30, 2024

@hershmire, did you ever find a solution?

from inject-loader.

yaakov123 avatar yaakov123 commented on May 30, 2024

#62 (comment) provides a workaround @Mavtak

from inject-loader.

plasticine avatar plasticine commented on May 30, 2024

@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.

from inject-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.