CODEWITHSUNDEEP
javascriptecmascript-6babeljstranspiler
Francois
Francois

Reputation: 2066

Prevent babel from trying to convert resources to javascript modules

How do I prevent babel from trying to transpile resources (svg, css, ...) in an es2016 project?

For instance this simple project:

src/app.js:

import logo from './logo.svg';

const Obj = { name: 'obj' };
export default Obj;

src/logo.svg: regular SVG Scalable Vector Graphics image

package.json: 

 "name": "test-babel",  
  "version": "1.0.0",  
  "description": "Please babel do not try converting svg files to js",  
  "scripts": {  
    "dev": "cross-env NODE_ENV=development babel-watch --presets es2015 src/app.js"  
  },  
...

no .babelrc file, no webpack/no bundling

Compilation leads to the following error:

$ npm run dev

> [email protected] dev /home/user/workspace/babel
> cross-env NODE_ENV=development babel-watch --presets es2015 src/app.js

/home/user/workspace/babel/src/logo.svg:1
(function (exports, require, module, __filename, __dirname) { <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
                                                              ^

SyntaxError: Unexpected token <
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Module._extensions..js (module.js:663:10)
    at babelWatchLoader (/home/user/workspace/babel/node_modules/babel-watch/runner.js:53:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/user/workspace/babel/node_modules/babel-watch/runner.js:62:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)

Upvotes: 1

Views: 756

Answers (1)

Francois
Francois

Reputation: 2066

Found out this plugin: https://www.npmjs.com/package/babel-plugin-inline-import
Imported resources are inlined at compilation, if their extension is declared in .babelrc: 

{
  "plugins": [
    ["babel-plugin-inline-import", {
      "extensions": [
        ".css",
        ".svg"
      ]
    }]
  ]
}

This solved my problem.

Upvotes: 1

Related Questions