Rollup for JS, Babel, Typescript and React with code formatting apis

[theajr]

@jakoblind

Added support for Rollup

• Javascript
• Babel
• Typescript
• React + Babel
• React + Typescript

Added code formatting apis, which are being used in formatting generated code snippets. We should use the same in webpack and parcel code generation as well. That will in be another PR along with changing sample typescript code in webpack and parcel as mentioned in last comments.

[theajr]

#46

[jakoblind]

Wow, impressive work @theajr !

I have trouble running the projects. React+typescripts gives the following error when I run npm start:

rollup v1.25.2
bundles src/index.tsx → dist/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.tsx (6:33)
4: import Button from "./button";
5: 
6: class App extends React.Component<{}, {}> {
                                    ^
7:   render() {
8:     return (
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:5330:30)
    at Module.error (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:9606:9)
    at tryParse (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:9517:16)
    at Module.setSource (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:9835:33)
    at Promise.resolve.catch.then.then.then (/home/jlind/Downloads/empty-project (12)/node_modules/rollup/dist/rollup.js:12615:20)

React+babel gives me the following error when running npm start

rollup v1.25.2
bundles src/index.js → dist/bundle.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (9:6) in /home/jlind/Downloads/empty-project (11)/src/index.js
src/index.js (9:6)
 7:   render() {
 8:     return (
 9:       <div>
          ^
10:         <Button text="Sample Button" />
11:       </div>
SyntaxError: Unexpected token (9:6) in /home/jlind/Downloads/empty-project (11)/src/index.js
    at Object.pp$4.raise (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2836:15)
    at Object.pp.unexpected (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:689:10)
    at Object.pp$3.parseExprAtom (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2260:12)
    at Object.parseExprAtom (/home/jlind/Downloads/empty-project (11)/node_modules/rollup/dist/rollup.js:11574:30)
    at Object.pp$3.parseExprSubscripts (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2089:21)
    at Object.pp$3.parseMaybeUnary (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2066:19)
    at Object.pp$3.parseExprOps (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2010:21)
    at Object.pp$3.parseMaybeConditional (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:1993:21)
    at Object.pp$3.parseMaybeAssign (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:1968:21)
    at Object.pp$3.parseParenAndDistinguishExpression (/home/jlind/Downloads/empty-project (11)/node_modules/acorn/dist/acorn.js:2332:30)

[theajr]

@jakoblind let me check once.

[theajr]

I am facing some issue with gatsby. Server is not starting. Do you have any idea how to fix this? I tried google and deleted nodule modules etc.

[jakoblind]

I have never seen that issue. Did it work before and suddenly stopped working? Which node version are you using?

[theajr]

It used to work my mac got crashed this morning, so restarted. From then, I am unable to start gatsby server. I was using node 10.x LTS version, I tried upgrading to 12.x LTS. still not working. It may take some time.

[jakoblind]

ok maybe your error comes from the crash. It works fine for me on 10.x LTS. good luck fixing the mac, hope it isn't too difficult to fix

[theajr]

@jakoblind I will let you once this PR is totally ready. I am working on it now.

[theajr]

@jakoblind It looks good now. I tested all rollup features from deployed netlify. You can check now.

[jakoblind]

I can reproduce the error you showed me yesterday on my mac. On my linux machine it works fine. Netlify also runs linux I think, that's why it also works there probably. I will help debugging this mac issue.

[theajr]

@jakoblind Thanks. I tried the same in my friend's Mac, it was not throwing the error. I created a new Ubuntu virtual machine and there also I could see the issue.

[jakoblind]

I pushed a fix to master. Please checkout and test. You might have to remove the node_module folder first.

This was the issue: There was a mismatch between version of NPM dependency sharp

[email protected] /home/jlind/dev/webpack-autoconf
├─┬ [email protected]
│ └─┬ [email protected] (git+https://github.com/Creatiwity/favicons-webpack-plugin.git#0872de414061baaad0a2853c77ae75bc38b8bbbf)
│   └─┬ [email protected]
│     └── [email protected] 
└─┬ [email protected]
  └── [email protected] 

After some research I realized that the gatsby-plugin-manifest also provides favicon functionality, so I deleted gatsby-plugin-favicon.

If everything works, you can merge in master to this branch

[jakoblind]

@theajr I tested running React+babel and still get the same error as before, did you get a chance to look into why this error happens? Let me know if you need help debugging

rollup v1.25.2
bundles src/index.js → dist/bundle.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (9:6) in /home/jlind/Downloads/empty-project (13)/src/index.js
src/index.js (9:6)
 7:   render() {
 8:     return (
 9:       <div>
          ^
10:         <Button text="Sample Button" />
11:       </div>
SyntaxError: Unexpected token (9:6) in /home/jlind/Downloads/empty-project (13)/src/index.js
    at Object.pp$4.raise (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2836:15)
    at Object.pp.unexpected (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:689:10)
    at Object.pp$3.parseExprAtom (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2260:12)
    at Object.parseExprAtom (/home/jlind/Downloads/empty-project (13)/node_modules/rollup/dist/rollup.js:11574:30)
    at Object.pp$3.parseExprSubscripts (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2089:21)
    at Object.pp$3.parseMaybeUnary (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2066:19)
    at Object.pp$3.parseExprOps (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2010:21)
    at Object.pp$3.parseMaybeConditional (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:1993:21)
    at Object.pp$3.parseMaybeAssign (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:1968:21)
    at Object.pp$3.parseParenAndDistinguishExpression (/home/jlind/Downloads/empty-project (13)/node_modules/acorn/dist/acorn.js:2332:30)

[jakoblind]

I experimented a bit and I got it to work. Moving up babel call to the top seemed to help. Also I needed to add resolve({extensions: ['.js', '.jsx', '.json']}), to the resolver call.

plugins: [
        babel({
            exclude: "node_modules/**"
        }),
        resolve({extensions: ['.js', '.jsx', '.json']}),
        commonjs({
            exclude: "src/**"
        }),
        globals(),
    ]

[theajr]

@jakoblind Thanks, I don't know why it is working at my end. Still I will add your changes and merge it.

[jakoblind]

default file should be rollup.config.js. Currently it's package.json

[theajr]

@jakoblind Fixed both now.

[jakoblind]

Now React+Babel works for me! Awesome! But I still cannot get React+typescript to work. Could you see if you can reproduce this error? running npm start

rollup v1.26.0
bundles src/index.tsx → dist/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.tsx (7:33)
5: import Button from './button';
6: 
7: class App extends React.Component<{}, {}> {
                                    ^
8:   render() {
9:     return (
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:5351:30)
    at Module.error (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:9627:9)
    at tryParse (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:9535:16)
    at Module.setSource (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:9852:33)
    at Promise.resolve.catch.then.then.then (/home/jlind/Downloads/empty-project (15)/node_modules/rollup/dist/rollup.js:12641:20)

[theajr]

@jakoblind Sure, I will look into it.

[jakoblind]

I managed to reproduce on two machines now. But have not yet figured out how to fix it. If this takes to long, we could ship this without typescript support for now just to get it out.

[theajr]

@jakoblind I will sit tonight to fix this. I wasn't getting much time recently.

[theajr]

@jakoblind I found the fix. I will be pushing the code tomorrow.

[jakoblind]

awesome @theajr ! looking forward to read the code. Have a good weekend!

[theajr]

@jakoblind I will let you know once PR is ready to review. Have a good weekend.

[theajr]

@jakoblind Please check now.

[jakoblind]

Hmm. I still get the same error:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.ts (2:24)
1: 
2:   const sayHello = (name:string): string => `Hello, ${name}`;
                           ^
3: 
4:   export default sayHello;
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

does it work for you?

[theajr]

It's weird. It's always working for me. I never faced this issue. I wonder what is the deal here 😇

[jakoblind]

that's weird. what version of npm and node are you using?

[theajr]

I am using node 12.13.0 and npm 6.12.0

[theajr]

@jakoblind I could reproduce the issue in a actual windows machine(Working fine in windows in VM somehow). If I change the content of index.ts to below content, It is working fine. i.e. removed the data types from code.

Code causing issue:

const sayHello = (name:string): string => `Hello, ${name}`;

export default sayHello;  

After removing data types, it is working fine. Can you please check the same and provide your thoughts?

const sayHello = (name) => `Hello, ${name}`;

export default sayHello;

It should support data types as well but seems to be an issue or I am missing something.