Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

loader order with `babel-loader`

See original GitHub issue

the order of this loader is always prior to babel-loader

loaders: ['react-hot', 'babel?preset[]=es2015,preset[]=react']

and babel-loader give an error complaining that import need to be at the top level which should be caused by the wrapper from react-hot

I fix it by putting babel to pre-loader.

Maybe react-hot just ignore the loader order? It will be appreciated if the start-up how-to page mention this.

Issue Analytics

State:
Created 8 years ago
Comments:16 (4 by maintainers)

Top GitHub Comments

1reaction

lauterrycommented, Mar 31, 2016

Hi @mdreizin

Still react-hot-loader + babel-loader + webpack 2 = 💔 ?

Have you found a solution or a workaround ?

Best regards

1reaction

seanadkinsoncommented, Mar 29, 2016

I had assumed the 2.0.0-alpha releases of react-hot-loader would have addressed any obvious webpack 2 issues, but I see the same error above 'import' and 'export' may only appear at the top level, due to the "use strict" at the top of the hot file.

Can there just be a query option to disable the "use strict" or something? I can certainly look into a PR for this if you think this would be a good way of solving this @gaearon

Top Results From Across the Web

babel-loader - webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...

Webpack loader order misbehaved - Stack Overflow

Loaders in Webpack are used in order "right to left" so the last loader in your array is used first. Therefore babel is...

How to Webpack 5 with Babel - Setup Tutorial

A step by step tutorial on how to integrate Babel into Webpack to access powerful JavaScript features (ES6, ES7, ES8, ES9) from the...

Options - Babel.js

Config Loading options. Loading configuration can get a little complex as environments can have several types of configuration files, and those configuration ...

Compiling TypeScript via webpack and babel-loader - 2ality

As a work-around, we can use babel-loader to compile TypeScript. This blog post explains how. ... The order of the presets seems to...