How to transpile every dependency in a React app using Babel

Question

I am developing an app using react and it needs to run on IE. I'm using an external library called query-string. It contains arrow functions and IE doesn't know those and for some reason the code in this library is not transpiled or translated to older JS.

I had similar issue within this project with the library popmotion which was using a find method, but I fixed that by installing Babel polyfill and including it in the main file App.jsx. I did not eject the react app as I'm quite new to this and don't know exactly how react works under the hood.

This is my package.json

{
    "name": "ruzovky",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "babel-polyfill": "^6.26.0",
        "classnames": "^2.2.6",
        "deepcopy": "^1.0.0",
        "node-sass-chokidar": "^1.3.3",
        "npm-run-all": "^4.1.3",
        "popmotion": "^8.3.4",
        "prop-types": "^15.6.2",
        "query-string": "^6.1.0",
        "react": "^16.4.2",
        "react-dom": "^16.4.2",
        "react-scripts": "1.1.4"
    },
    "scripts": {
        "build-css": "node-sass-chokidar src/ -o src/",
        "watch-css": "node-sass-chokidar src/ -o src/ --watch",
        "start-js": "react-scripts start",
        "start": "npm-run-all -p watch-css start-js",
        "build-js": "react-scripts build",
        "build": "npm-run-all build-css build-js",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    }
}

To help you understand my issue: Everything else does get transpiled, as react takes care of everything (I can create react components using javascript, which no browser supports yet), except this single library. In my node_modules folder there is babel-loader and webpack too.

score 0 · Answer 1 · answered Aug 23 '18 at 06:41

0

You should use build tool, the simplest & most widespread one is webpack.

Here is the tutorial on how to transpile ES6 to older versions via webpack

answered Aug 23 '18 at 06:41

Alex Antonov

14,134
7
65
142

1

isn't react using that by default ? i created the app using create-react-app and I have a webpack folder in node_modules – Jozef Méry Aug 23 '18 at 06:43
also the webpage which is displayed has a single link to a single bundle.js. Is that webpack in the works ? Thanks for the fast reply – Jozef Méry Aug 23 '18 at 06:44
How are you starting your app? – Alex Antonov Aug 23 '18 at 06:45
npm start which is actually this "npm-run-all -p watch-css start-js" as I am using sass, this setup is taken from official react github page – Jozef Méry Aug 23 '18 at 06:47
I edtied my question which now has my package.json – Jozef Méry Aug 23 '18 at 06:49
There is an answer to my problem: https://stackoverflow.com/questions/49954618/babel-not-transpiling-arrow-functions-webpack, the solution is to use older version of query-string – Jozef Méry Aug 23 '18 at 07:23
1

create-react-app v2 transpiles dependencies by default – tim-phillips Jan 09 '19 at 03:01

How to transpile every dependency in a React app using Babel

1 Answers1