Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel Transform Runtime doesn't seem to work with Webpack #4961

Closed
Apidcloud opened this issue May 30, 2017 · 15 comments

Comments

@Apidcloud
Copy link

commented May 30, 2017

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
When using webpack and babel's transform-runtime, I'm unable to use exports *.

If the current behavior is a bug, please provide the steps to reproduce.
Babel's transform runtime plugin doesn't seem to be running, since the class Symbol isn't transformed at all. Babel was not running at all before because include property as invalid.

Now the problem is with the exports - related to #3917

Consider a simple input file, the only entry (index.js):
export * from './secondFile'

secondFile.js

export let TESTSYMBOL = Symbol('test');

export let TESTSYMBOL2 = Symbol('test2');

webpack.config.js (only copied the relevant part):

module: {
        rules: [
            {
                test: /\.jsx?$/,
                // Skip any files outside of `src` directory
                include: /src/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["es2015", "stage-3"],
                        plugins: ['transform-runtime']
                    }
                }
            }
        ]
    }

script:
"webpack -d --config config/webpack.config.js"

output: gist

Exception:
Uncaught ReferenceError: exports is not defined - at Object.defineProperty(exports, "__esModule", {

What is the expected behavior?

Exports should work, as they do without transform-runtime plugin.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
Node: v6.10.3

Dev dependencies:
"webpack": "2.6.1",
"webpack-dev-server": "2.4.5",
"webpack-notifier": "1.5.0"
"babel-cli": "6.24.1",
"babel-loader": "7.0.0",
"babel-plugin-transform-runtime": "6.23.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-stage-3": "6.24.1"

Dependencies:
"babel-runtime": "6.23.0"

Am I missing something?

Thanks for any help!

@Apidcloud

This comment has been minimized.

Copy link
Author

commented May 30, 2017

Nevermind the first version of the issue. There was a mistake in the configuration. I was using path.resolve or path.join the wrong way in include and exclude properties - documentation has such example.

Despite transforming the Symbol just fine, I'm now unable to use exports *, something already reported here: #3917

Any solution for that?

@Vanuan

This comment has been minimized.

Copy link

commented May 30, 2017

Try setting modules to false:

presets: [['es2015', { modules: false }], 'stage-3'],

I think if babel doesn't touch import statements it should work.

@Vanuan

This comment has been minimized.

Copy link

commented May 30, 2017

AFAIK, webpack doesn't have anything to do with ES modules if you don't set modules to false in babel configuration.

@Apidcloud

This comment has been minimized.

Copy link
Author

commented May 30, 2017

Thank you @Vanuan ! That solves it, but it also tree shakes right? Removing dead code.

I was wondering if that would have any downside on a library, but after some testing I don't think so.
Thanks again!

@Vanuan

This comment has been minimized.

Copy link

commented May 30, 2017

AFAIK, tree shaking can't work if you import a module which uses export *;

Import is a side effect causing operation. So if you import some module its body must be executed. If that body contains import that one should also be executed and so on. So it's guaranteed that if you import a module which has "export *" you'll have more code than if you use a specific module import.

@Vanuan

This comment has been minimized.

Copy link

commented May 30, 2017

Some tools (babili) are better at removing dead code than others (uglify) but I don't see why it's called "tree shaking".

@Apidcloud

This comment has been minimized.

Copy link
Author

commented May 30, 2017

Are you suggesting it's better to always use specific imports?

@Vanuan

This comment has been minimized.

Copy link

commented May 30, 2017

For the purpose of dead code elimination, yes. There are some techniques which automatically transform your imports to the specific ones. E.g. https://www.npmjs.com/package/babel-plugin-transform-imports
But since there is no standard naming technique it must be applied on a case by case basis.

@Vanuan

This comment has been minimized.

Copy link

commented May 30, 2017

Another alternative would be to try aggressive minification settings, but that way you'll lose an ability to debug your code (source maps will be completely broken).

@Apidcloud

This comment has been minimized.

Copy link
Author

commented May 30, 2017

I like the idea of using transform-imports. I'll take a deeper look at it. Thanks again!

@sokra

This comment has been minimized.

Copy link
Member

commented May 30, 2017

transform-runtime emits ESM even if babel should transpile ESM to CJS. I guess plugin an preset are in incorrect order. modules: false should fix it.


Tree Shaking also works with export *.

@sokra sokra closed this May 30, 2017

@Apidcloud

This comment has been minimized.

Copy link
Author

commented Jun 2, 2017

I have noticed that this solution doesn't seem to work with webpack-dev-server.
The following error is raised:
Cannot assign to read only property 'exports' of object

I created a minimal repository to reproduce the problem:
https://github.com/Apidcloud/webpack-babel/

It seems to work with http-server though.

Can someone take a look at the repository?

Thanks!

@Apidcloud

This comment has been minimized.

Copy link
Author

commented Jun 2, 2017

Alright...

I was able to fix the issues I mentioned in my previous comment by excluding node_modules from webpack modules rules. I thought including a folder would basically result in the same thing, but it seems not!

You can check a simple boilerplate at the following repository:
https://github.com/Apidcloud/webpack-babel

It uses Webpack and Babel transform-runtime.

@diachedelic

This comment has been minimized.

Copy link

commented Oct 25, 2017

I avoided the Cannot assign to read only property 'exports' of object error (when referencing any babel-runtime items, like Object.keys), by removing the modules: false in my .babelrc

@Venryx

This comment has been minimized.

Copy link

commented Aug 29, 2018

Here is another possible solution (it's what worked for me): #3974 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.