Receiving uncompiled source (import/export) with Webpack 2 (inject-loader 2.0.0 / 3.x) about inject-loader HOT 21 CLOSED

That's because it isn't converting the modules.

What I settled on was running the tests under a different environment.

{
    "env": {
        "test": {
            "presets": [
                ["es2015"]
            ]
        }
    },
    "presets": [
        ["es2015", { "modules": false }]
    ]
}

Then setting process.env.NODE_ENV = "test"; inside the karma.conf.js file. You could also set the NODE_ENV environment variable on the command line if you wished.

from inject-loader.

You need a .babelrc file to actually tell babel how to transform the files.
One to prove it works would be the following.

{
  presets: "es2015"
}

Also, upgrade to [email protected]. That patch is important, it won't work otherwise.

from inject-loader.

@perry-mitchell Awesome 🏆 Thanks very much — I’ll have a look at your examples and see if I can work out what’s going on. I would love to make inject-loader a bit more developer friendly in this area (at least try and catch some of this stuff and surface it as warnings or something if possible).

Unfortunately due to the nature of the tooling and environment that inject-loader works in there will always be many nasty edge cases around config to deal with. :( I’m trying to mess around with making this better for 3.x.

Also as @rmp135 noted, 2.0.1 is important.

from inject-loader.

@perry-mitchell Awesome—thanks! Nah, it’s OK, I’ll package it up. Will make sure I credit you though 👍

from inject-loader.

Ahhh what if instead you use inject-loader!... instead of just inject.

from inject-loader.

@TheLarkInn That's what I did for my first try 😅 - It works (as in webpack recognises the loader), but that's exactly when I get the non-babelified output (with imports etc.). If I look at the output without trying to use inject-loader, all imports/exports are converted to commonjs as expected.

from inject-loader.

Webpack 2 requires the -loader suffix on the loader so you must be inject-loader.

What do your webpack, karma and babel configs look like? I would also try rolling inject-loader back to 2.0.1 as I've never gotten v3 beta to work and it installs by default.

from inject-loader.

@perry-mitchell Thanks for the report, sorry that something seems to be not working correctly.

These errors;

ERROR in ./test/specs/ccc/CCCProxy.spec.js
Module not found: Error: Can't resolve 'inject' in '/home/user/work/my-project/test/specs/ccc'
 @ ./test/specs/ccc/CCCProxy.spec.js 27:29-59
 @ ./test \.spec\.js$
 @ ./test/index.js

...are as @rmp135 & @TheLarkInn have identified — inject alone is not enough for inject-loader to be correctly resolved.

As for the actual error — it looks from that error that babel is not compiling es6 imports leading to code like this being output;

// wrapper applied by inject-loader
function injectWrapper() {
  // your code here...
  import foo from 'bar';

  // etc...
} 

Which is obviously invalid leading to the error 'import' and 'export' may only appear at the top level. I suspect that you probably need to change some config to ensure that dependencies are CJS by the time the inject-loader wrapper is applied.

Is it possible to provide a failing tests case / example?

from inject-loader.

I would also try rolling inject-loader back to 2.0.1 as I've never gotten v3 beta to work and it installs by default.

Thanks @rmp135, I'll try that in the next couple of days when I'm back in front of the workspace. I am pretty sure I already tried with the last in the v2 range as well however.

inject alone is not enough for inject-loader to be correctly resolved.

Thanks @plasticine - Yeah I guess that's the case there. I'll only be using inject-loader from now on, but at least it's possible to alias in the webpack config (or so I've seen).

I suspect that you probably need to change some config to ensure that dependencies are CJS by the time the inject-loader wrapper is applied.

This is the tricky part.. I'm not sure how to do that. I haven't found any documentation in webpack that covers how to change the processing order when mixing inline + config loaders. I know how to change the order if only in-line or only config, but not together.

Is it possible to provide a failing tests case / example?

I believe it should be. I'll try to prepare something this weekend.

from inject-loader.

This is my config (cobbled together from various files as it's currently being composed per environment):

const webpack = require("webpack");

module.exports = {

    entry: {
        test: path.resolve(__dirname, "../test/index.js")
    },

    module: {
        rules: [
            {
                test: /\.html$/,
                use: "raw-loader"
            },
            {
                test: /\.js$/,
                use: "babel-loader",
                exclude: /\/node_modules\//
            },
            {
                test: /\.png$/,
                loaders: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192
                        }
                    },
                    {
                        loader: "image-webpack-loader",
                        query: {
                            progressive: true,
                            bypassOnDebug: true,
                            optimizationLevel: 7,
                            interlaced: false
                        }
                    }
                ]
            },
            {
                test: /\.json$/,
                use: "json-loader"
            }
        ]
    },

    node: {
        setImmediate: false
    },

    output: {
        path: path.resolve(__dirname, "../dist"),
        filename,
        pathinfo: true
    },

    plugins: [
        new webpack.DefinePlugin({
            __ENTRY__: JSON.stringify(scriptType),
            __ENV__: JSON.stringify(environment),
            __DEV__: ["testing", "development"].indexOf(environment) >= 0
        }),
        new webpack.ProvidePlugin({
            setImmediate: "misc/vendor/setimmediate",
            Promise: "promise-polyfill"
        })
    ],

    resolve: {
        extensions: [".js", ".json", ".html"],
        modules: [
            path.resolve(__dirname, "../source"),
            path.resolve(__dirname, "../node_modules"),
            path.resolve(__dirname, "../test")
        ]
    }

};

There may be variables not defined but they are in the working environment. Obviously inject-loader is already installed (currently at v3).

from inject-loader.

I've made 2 examples:

• Webpack 2 with inject-loader 2
• Webpack 2 with inject-loader 3

Both fail with the same issue.

from inject-loader.

from inject-loader.

I updated both gists:

• Inject-loader v2 now uses 2.0.1 and has a .babelrc file
• Inject-loader v3 now has a .babelrc file

The results? Puzzling. V3 dies with a different error:

But... v2 now works!

It seems that v2.0.0 and v3.x of inject-loader don't work at all with webpack 2 in this scenario, but 2.0.1 did the trick. The updated v2 gist now works correctly for me.

from inject-loader.

@perry-mitchell Awesome — glad it’s working (kinda).

Yep, 2.0.0 was actually completely broken, so I’m glad the version bump got things moving again. :)

3.x is still a bit of a work in progress, so I’m not surprised that it’s not working yet. I’m actively working on it though, and it will support Webpack2 once done (hopefully I’ll have time soon).

from inject-loader.

Thanks for the help @plasticine and others - this is a fantastic tool for testing! I'll be watching the 3.x release closely.

from inject-loader.

@perry-mitchell I would actually love to use your examples in the repo — would you be open to contributing them? Hopefully it would help others get up to speed. :)

from inject-loader.

from inject-loader.

from inject-loader.

Also worth noting to avoid a .babelrc like this one, which I had at work:

{
    "presets": [
        ["es2015", { "modules": false }]
    ]
}

Disabling the module format change will almost always cause this error to appear.

On top of that, you can get the original loader-require functionality working (require("inject!class.js")) by using resolveLoader:

{
    resolveLoader: {
       moduleExtensions: ['-loader']
    }
}

from inject-loader.

@perry-mitchell @rmp135 Hey peeps, have merged #25 which includes a bunch of fixes — namely webpack2 support (> 2.2) and usage examples for both webpack 1 & 2 with babel. Going to release that as 3.0.0-beta3 shortly/now.

from inject-loader.

from inject-loader.