Working with js loaders

[dainyl]

Hey I'm trying to use your loader in a project that is using babel-loader on the js. However, it seems that the way javascript is required through this module doesn't respect such loaders.

I've investigated using webpackContext.exec as a replacement for require, but ran into this issue webpack/webpack#667. That issue thread seems to imply that the functionality can be achieved using a child compiler.

[tompascall]

Hi! I don't exactly understand the issue you found. Check the demo in the project, I used babel-loader there, and there is not such kind of issue. Could you give some example of your module usage?

[dainyl]

So I modified the demo to highlight the issue I'm having https://github.com/dainyl/js-to-styles-var-loader/blob/changed-demo/demo/colors.js

This is the error I'm getting:

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!..!./style.scss
Module build failed: /Users/dainliffman/git/js-to-styles-var-loader/demo/colors.js:1
(function (exports, require, module, __filename, __dirname) { import fancyRed from './fancy-red';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at modulePath.reduce (/Users/dainliffman/git/js-to-styles-var-loader/index.js:42:104)
 @ ./style.scss 4:14-127 13:2-17:4 14:20-133
 @ ./index.js
 @ multi (webpack)-dev-server/client?http://localhost:8030 webpack/hot/dev-server ./index.js

[tompascall]

For the moment the loader cannot understand es6, so temporarily you can solve the issue by using the node module system:

// fancy-red.js
module.exports = '#db0f3b';

// colors.js
var fancyRed = require('./fancy-red');

module.exports = {
    'fancy-red': fancyRed,
    'fancy-blue': '#0f9adb',
    'fancy-yellow': '#e5c63b',
    'fancy-green': '#4fdd59',
    'fancy-white': '#fcfff7',
    'fancy-black': '#1f2120',
    'fancy-pink': '#d326c8',
    'fancy-lilac': '#941ece'
};

[tompascall]

Or rather it cannot use the es6 module api, but node api (so you can use es6 features providing by node)

[dainyl]

Yep node understands most of es6 besides the module api. I've managed to work around that by running webpack with babel via http://stackoverflow.com/a/31906902.

However, it would still be nice if this module could use the js loaders provided in the webpack.config.