babel-loader 8.0.0 fails, but 8.0.0-beta.4 works perfectly

[Nantris]

BEFORE YOU SUBMIT please read the following:

Delete what isn't applicable below
I'm submitting a bug report
I'm submitting a feature request
I'm submitting a support request => Please do not submit support request here, see note at the top of this template.

Webpack Version:
4.17.1

Babel Core Version:
7.0.0

Babel Loader Version:
8.0.0

Please tell us about your environment:
Windows 7 x64

Current behavior:
Here's just a small sample of the very long list of console messages.
First message - error:

storage.js:26 Uncaught ReferenceError: exports is not defined
    at Module.<anonymous> (storage.js:26)
    at Module../app/utils/electron/storage.js (renderer.dev.js:34068)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../app/utils/electron/index.js (renderer.dev.js:33851)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module.<anonymous> (renderer.dev.js:22555)
    at Module../app/index.js (renderer.dev.js:22738)
    at __webpack_require__ (bootstrap:724)

followed by these warnings:

(anonymous) @ storage.js:26
./app/utils/electron/storage.js @ renderer.dev.js:34068
__webpack_require__ @ bootstrap:724
fn @ bootstrap:101
./app/utils/electron/index.js @ renderer.dev.js:33851
__webpack_require__ @ bootstrap:724
fn @ bootstrap:101
(anonymous) @ renderer.dev.js:22555
./app/index.js @ renderer.dev.js:22738
__webpack_require__ @ bootstrap:724
fn @ bootstrap:101
0 @ log.js:47
__webpack_require__ @ bootstrap:724
(anonymous) @ bootstrap:791
(anonymous) @ bootstrap:791
sockjs.js:1605 XHR finished loading: GET "http://localhost:1212/sockjs-node/info?t=1535560470291".
AbstractXHRObject._start @ sockjs.js:1605
(anonymous) @ sockjs.js:1494
setTimeout (async)
AbstractXHRObject @ sockjs.js:1493
XHRCorsObject @ sockjs.js:2871
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
initSocket @ socket.js:9
(anonymous) @ client?5bf0:212
./node_modules/webpack-dev-server/client/index.js?http://localhost:1212 @ renderer.dev.js:50057
__webpack_require__ @ bootstrap:724
fn @ bootstrap:101
0 @ log.js:47
__webpack_require__ @ bootstrap:724
(anonymous) @ bootstrap:791
(anonymous) @ bootstrap:791
sockjs.js:1605 XHR finished loading: GET "http://localhost:1212/sockjs-node/info?t=1535560470293".
AbstractXHRObject._start @ sockjs.js:1605
(anonymous) @ sockjs.js:1494
setTimeout (async)
AbstractXHRObject @ sockjs.js:1493
XHRCorsObject @ sockjs.js:2871
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
initSocket @ socket.js:9
(anonymous) @ client?8f77:212
./node_modules/webpack-dev-server/client/index.js?http://localhost:1212/ @ renderer.dev.js:50317
__webpack_require__ @ bootstrap:724
fn @ bootstrap:101
0 @ log.js:47
__webpack_require__ @ bootstrap:724
(anonymous) @ bootstrap:791
(anonymous) @ bootstrap:791
client?5bf0:77 [WDS] Hot Module Replacement enabled.
client?5bf0:148 [WDS] Warnings while compiling.
warnings @ client?5bf0:148
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
client?5bf0:154 ./app/redux/actions/helpScreen_actions.js 19:10-35

the list of warnings was very long. This is far from all of them.

Expected/desired behavior:
No errors - as in 8.0.0-beta.4

[loganfsmyth]

This seems like it could be the same issue as #660 (comment) with the issue being #660 (comment)

The issue is either

• storage.js is using both ES6 import syntax and Commonjs exports objects
• You're using transform-runtime, which is inserting an import into a CommonJS file because you have not configured Babel's sourceType option.

You can always opt into the old behavior by setting modules: "commonjs" in your preset-env options, but otherwise I'd avoid using CommonJS exports and import and/or set sourceType: "unambiguous"

[Nantris]

Thanks for your reply @loganfsmyth

I'm not using transform-runtime and I don't think I'm mixing syntaxes, can you let me know if I'm mistaken?

This is what that file looks like:

import _ from 'lodash';

// Other stuff

export default function() {
  return next => (reducer, initialState) => {
    const store = next(reducer, initialState);
    store.subscribe(() => {
      const state = store.getState();
      throttledSaveState(state);
    });
    return store;
  };
}

[loganfsmyth]

Hmm, I'm not sure then. If you have a reproducible example I can look more closely.

[Nantris]

For now I'll sit back on 8.0.0-beta.4. I'll try to provide some code for reproducing this if it remains an issue in a few weeks when I have some more time.

Thanks for your help @loganfsmyth.

[loganfsmyth]

Fair enough! It definitely seems like a mismatch of module types somewhere from something, but it's hard to say exactly.

[Klupzor]

I have the same problem, I had to install version 7.1.4

[loganfsmyth]

@Klupzor Without more information, it's hard to give suggestions. Chances are there is something that would need to change in your configuration.

[Nantris]

@loganfsmyth did something substantial change between 8.0.0-beta.4 and 8.0.0? It just seems odd that the jump out of beta would lead to a breaking change like this where there was no issue before.

[loganfsmyth]

The big change is #660 because now you're relying on Webpack to transform modules instead of Babel. This raises two primary cases that can cause trouble:

• Webpack is stricter than Babel around spec compliance of modules
• Babel may need to have sourceType configured carefully if you're using transform-runtime or preset-env's useBuiltins

[teodosii]

storage.js is using both ES6 import syntax and Commonjs exports objects

What would be the fix in this case? I'm using both ES6 import and exports. Using exports in order to mock in same module, otherwise I cannot mock functions.

I've recently updated to babel-loader and I've got the same problem with exports is not defined

[loganfsmyth]

You can always opt into the old behavior by setting modules: "commonjs" in your preset-env options to get the old behavior for now.

Generally mixing module types is a bad idea. Mocking depends a bit on what test framework you're using, but for instance Jest as jest.mock.

[teodosii]

I didn't know it is a bad idea mixing import/exports. Thing is if I need to mock a function in the same module, the only way it worked for is by referencing that function in /src using exports syntax and then in Jest I simply

import * as Helpers from '/src/helpers'

and then I just mock functions on * using jest.fn or jest.mockImplementation

And functions would be written like this

const g = () => { ... };
const f = () => { exports.g(); };

This way, by using exports I can mock it when running the test. I know it's not related to the issue here entirely, but I couldn't found any solutions to my problem other than the one I've said.

I guess I could go on by setting commonjs module but just in case I change my mind on this, do you know how can I mock it using a different approach in order not to mix import/exports?

[loganfsmyth]

I'm not totally an expert there. I was under the impression jest.mock would work with ES export syntax.

[loganfsmyth]

I'm going to close this since there doesn't appear to be anything clearly actionable. If you or someone else can get a clear reproduction case, feel free to re-open and ping me, or open a new issue.