trying to build rollup + babel + react starter, but get error during the building

Question

I am getting an "Unexpected token" error message when I am running my rollup build script.

Here is the GitHub link : https://github.com/mxm-web-develop/issues

It seems that babel didn't translate the JSX during building, so I got [!] Error: Unexpected token

Answer 1

I cloned your repo and it seems there are several things wrong with your setup.

1. Typo in babel.config.js. Remove the extra comma.

Change this:

presets: [require("@babel/preset-env"), , require("@babel/preset-react")],

To this:

presets: [
  require("@babel/preset-env"), 
  require("@babel/preset-react"),
],

2. Typo in rollup.config.js:

Change this:

pulugs:[ ... ],

To this:

plugins:[ ... ],

3. Having corrected these two errors, I ran npm run build:rollup and got the message "No ESLint configuration found", so I added the following to package.json:

"eslintConfig": {},

4. I then ran npm run build:rollup again and got the next error message: "Parsing error: The keyword 'import' is reserved". To fix this, install babel-eslint (npm install babel-eslint --save-dev) and adjust the eslintConfig in package.json as follows:

"eslintConfig": {
  "parser": "babel-eslint"
},

See here for more details: Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)

5. I then ran npm run build:rollup again and saw yet another error message: "Invalid value for option "output.dir" - you must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks."

Looking at your rollup config, you have this:

output:{
  dir:pkg.main,
  file:'index.js',
  format:'es',
  name:appName
},

You need to remove either the dir or file key. I removed the dir key, giving me this:

output:{
  file:'index.js',
  format:'es',
  name:appName
},

Now when I ran npm run build:rollup, the bundle was created in the project root, as specified in your rollup config.

I appreciate that you have made a slimmed down version of the problem you are experiencing, so you might not need to follow all of the steps I have posted above.

HTH