Add support for Babel 7

[matteoantoci]

Hi there!

Just wanted to point out that inject-loader doesn't work properly with Babel 7.

Running my tests suite I get this error whenever inject-loader is imported in my tests:

Module parse failed: 'import' and 'export' may only appear at the top level (975:4)
You may need an appropriate loader to handle this file type.

Maybe is due to the hardcoded usage of the deprecated babel-core module inside inject-loader? 🤔

[plasticine]

@matteoantoci Hey thanks for the report, I’ll try and find time to have a look :)

[miquelmasrieramrf]

that would be nice! In the meantime if you want to use inject-loader with babel7, you can use @babel/plugin-transform-modules-commonjs. It will transform the modules to commonjs so the loader will work

[wwarme]

Had the very same issue, we just migrated to Babel 7, @babel/plugin-transform-modules-commonjs came to rescue. Thanks alot! If not dependant on module: "esnext" - module: "commonjs" in tsconfig does the trick too.

[plasticine]

Thanks 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. This should probably be documented better and/or an example for Babel 7.

[miquelmasrieramrf]

🎉 babel 7.5

https://babeljs.io/blog/2019/07/03/7.5.0#dynamic-import-9552-https-githubcom-babel-babel-pull-9552-and-10109-https-githubcom-babel-babel-pull-10109

https://github.com/babel/babel/pull/9552

[zfeher]

Hey' We are currently migrating to Babel 7.5.5 and Webpack 4.35.3 and we ran into some problem with some of our tests which needs inject-loader.

As soon as I add the import SomeComponent from 'inject-loader!.'; and run the tests it will print an error that it doesn't know about the object rest/spread operator (whereas babel preset env is properly configured and set to the correct node version).

Compiling the same file via babel cli works without an error. It seems that the babel configuration is not used by inject loader. (the same setup works with Babel 6 with Webpack 3)

I've tried to explicitly add the @babel/plugin-proposal-object-rest-spread plugin as well without any success. Also tried to add babel as an inline loader like babel-loader!inject-loader!. / !inject-loader!babel-loader!.

Is there a workaround for this for now? When can we expect Babel 7 support?

[amccloud]

I was able to work around this issue by upgrading inject-loader to @seanparmelee's babel 7 fork https://github.com/seanparmelee/inject-loader/commit/fcd20ba515118d528296053b772b78802fe41496 at and then setting babel-preset-env's modules to commonjs for my test env

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": "commonjs"
          }
        ]
      ]
   }
}

[seanparmelee]

I opened a couple PRs that should help out here:

73 adds ESM support so you no longer have to transform your modules to CJS format before running them through inject-loader

74 includes #73 and upgrades to Babel 7.

Would love it if someone could try out the ESM feature in either PR to help identify any use cases I may have missed.