CODEWITHSUNDEEP
reactjsgoogle-chrome-extensionwebpackgulpbabeljs
dfranca
dfranca

Reputation: 5322

Transpiling React code, but leave ES6 alone

I'm writing a Chrome Extension using ES6/React/Redux babel and Gulp.

I was using babel presets es2015, stage-2 and react.

Then I realized as I'm only targeting Chrome I could get rid of the es2015/estage-2 stage as it's supported by Chrome.

So the first I tried was to get the .babelrc and remove the references to es2015 and stage-2.

Not so fast... Before running webpack gulp script fails to run. What I tried first was to make only the gulp file ES5 compatible.

Then I got errors of spread operators not being supported, so I re-added "stage-2" loader.

Then I got errors in different modules: 

> WARNING in ./background/src/index.html Module parse failed:
> /my_path/my_project/src/index.html Unexpected token (1:0) You may need
> an appropriate loader to handle this file type. SyntaxError:
> Unexpected token (1:0)
>     at Parser.pp$4.raise (/my_path/my_project/node_modules/acorn/dist/acorn.js:2221:15)

To help to understand how my code is structured, it's in 3 main folders: background, content and popup. Each one representing a Chrome environment. For each one, I have a separated webpack.config.js file, similar to this one: https://pastebin.com/hseVyQaw Gulp then calls webpack for each config file and generated the bundle output file for each one, during the build process.

There's a way to make Gulp/Webpack works with ES6 syntax, while not transpiling it for the deployment? What's the best approach for this issue?

Gulp version

> [17:32:27] Requiring external module babel-register 
> [17:32:27]CLI version 3.9.1 
> [17:32:27] Local version 3.9.1

Webpack version: 1.14.0

UPDATE After adding html-loader as suggested by @Michael Jungo it seems to run fine, but it gives me a warning, not sure how bad is to ignore it:

WARNING in ./background/src/index.js
Critical dependencies:
17:29-52 the request of a dependency is an expression
 @ ./background/src/index.js 17:29-52

UPDATE 2 Oh, Chrome is complaining about modules syntax of my extension, but based on what I read it's suppose to be supported:

Uncaught SyntaxError: Unexpected token import

Upvotes: 0

Views: 253

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32972

Your error is not related to babel or any ES6 features. You're trying to import the HTML file ./background/src/index.html but in the config you've posted, there is no rule for .html that could handle these files, therefore webpack tells you that you might need an appropriate loader for this file type.

You can use the html-loader and add the following rule to your loaders array:

{
  test: /\.html$/,
  loader: 'html-loader'
}

As for your babel config, it should work as you wanted. Keep in mind if you're using ES modules (import/export) you would still need to transpile them or switch to webpack 2 which supports them out of the box. Also UglifyJs doesn't understand ES6 syntax, if you want to uglify ES6 you have to use an alternative like babili with the babili-webpack-plugin.

Upvotes: 1

Related Questions