search

wallabyjs / quokka

Repository for Quokka.js questions and issues
https://quokkajs.com
1.18k stars 31 forks source link

Quokka Babel configuration issues #357

Closed kutenai closed 5 years ago

kutenai commented 5 years ago

Issue description or question

Each and every time I try and use Quokka I have issues. Each. And. Every. Time. The configuration system is a mess!!!! And, it gives NO options to debug it that I am aware of.

You literally have 4 ways to configure quokka. That is multiplied by EVEN MORE if you factor in all of the POSSIBLE ways to configure it.

package.json -- local and global .quoka.js -- .babelrc babel.config.js ~/.quokka/config.js

It's SUCH A PAIN that quokka won't even tell you WHICH FILES it is using. WHERE IS THE DEBUG OPTION ??? *** WHERE IS THE CONFIGURATION REFERENCE?

I don't like poking around trying options all over the place, but I don't know what methodical solution to use.

All I want to to AT THIS MOMENT is test a trival script that happens to use ES6 "import" and "export", but quokka will not do it. I've read your documents many many times, there is no information there that is useful. No matter WHAT ID DO, quokka refuses to work

Sample code

// scratch file

import config from './src/containers/App/firebase-config'

config  //?

/// config file is like this
const config = {
    key: 'value',
   key2: 'value2'
}

export default config

I have a babel.config.js file in the project

const presets = [
  [
    '@babel/preset-env',
    {
      'corejs': '3',
      'useBuiltIns': 'usage',
    },
  ],
  '@babel/preset-react',
];
const plugins = [
  '@babel/plugin-transform-modules-commonjs',
  '@babel/plugin-proposal-class-properties',
  'babel-plugin-styled-components',
  "@babel/plugin-proposal-class-properties"
]

module.exports = {presets, plugins}

I have quokka configurd in package.json

{
  "name": "reddit-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "firebase": "^5.10.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router": "3",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-transform-modules-commonjs": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-plugin-styled-components": "^1.10.0"
  },
  "quokka": {
    "babel": true,
    "plugins": [
      "@babel/plugin-transform-modules-commonjs",
      "@babel/plugin-proposal-class-properties",
    ]
  }
}

I get useless output like this

Quokka #1 (node: v10.11.0, babel: v7.4.3, plugins: @babel/plugin-transform-modules-commonjs)

Failed to run compilers on quokka.js, Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]
    at assertNoDuplicates (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/config/config-descriptors.js:205:13)
    at createDescriptors (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/config/config-descriptors.js:114:3)
    at createPluginDescriptors (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at plugins (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/config/config-descriptors.js:40:19)
    at mergeChainOpts (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/config/config-chain.js:319:26)
    at /Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/config/config-chain.js:90:20)
    at loadPrivatePartialConfig (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/config/partial.js:85:55)
    at loadFullConfig (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/config/full.js:43:39)
    at transformSync (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/transform.js:41:38)
    at Object.transform (/Volumes/sharpertool/proj/gardentronic/npm/reddit-clone/node_modules/@babel/core/lib/transform.js:22:38)
    at process._tickCallback (internal/process/next_tick.js:61:11)

There is no quokka.js file ANYWHERE that I know of

I have a config.json file in ~/.quokka

{"babel": { "presets": ["@babel/env", "@babel/preset-react"]}, "plugins":[
    "@babel/plugin-transform-modules-commonjs"
],"pro":true}

I have a package.json file there also

{
    "devDependencies": {
        "@babel/core": "^7.4.3",
        "@babel/plugin-proposal-class-properties": "^7.4.0",
        "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
        "@babel/plugin-transform-modules-commonjs": "^7.4.3",
        "@babel/preset-env": "^7.4.3",
        "@babel/preset-es2015": "^7.0.0-beta.53",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.4.0",
        "babel": "^6.23.0",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.3",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
        "babel-plugin-transform-react-jsx": "^6.24.1",
        "babel-polyfill": "^6.26.0",
        "jsdom-quokka-plugin": "^1.0.13",
        "lodash": "^4.17.5",
        "normalizr": "^3.3.0",
        "rambda": "^2.4.1",
        "ramda": "^0.26.1",
        "underscore": "^1.8.3"
    },
    "dependencies": {
        "alias-quokka-plugin": "^0.1.0",
        "babel-alias-quokka-plugin": "^1.0.9",
        "install": "^0.12.1",
        "npm": "^6.9.0"
    },
    "babel": {
        "presets": [
            [
                "@babel/preset-env",
                {
                    "modules": false,
                    "useBuiltIns": "usage",
                    "debug": true
                }
            ],
            "@babel/preset-stage-0",
            "@babel/preset-react"
        ],
        "plugins": [
            "lodash",
            "@babel/plugin-transform-modules-commonjs",
            "@babel/plugin-proposal-decorators",
            [
                "@babel/plugin-proposal-class-properties",
                {
                    "loose": true
                }
            ]
        ]
    }
}

Since I have NO DEBUGGING CAPABILITIES -- all I can do is shotgun this, just add shit here and there until, if I'm lucky, it MIGHT work

I really wish I could find ONE DEFINITIVE configuration that JUST WORKS for all projects. I thought I could configure quokka at the global level and it will JUST WORK on other projects, but that seems FALSE. And, your documentation is horrible, it just goes and talked about adding information to this file and that file and add a babel: true here, or add a babel: true there, but it does not give you any REAL help. It's more confusing than helpful.

I've now spend 30 minutes writing this issue, 1.5 hours trying to ake it work, so that's 2 hours I probably could have been coding something. Quokka is a great tool WHEN IT WORKS but for me, it works about 5% of the time.

Sorry for the rant --- but I'm so frustrated, and I'm not making progress, and I really do NOT like to pay for tools that I can't use!

Sample repository link

If the issue can not be reproduced just using the quokka file above (for example because it requires/imports some files from your project), please create a small repository where the issue can be reproduced.

Quokka.js Console Output

// paste your quokka console output here

Code editor version

Visual Studio Code v1.? Webstorm v? Atom v1.?

OS name and version

Windows OSX Linux

kutenai commented 5 years ago

I was frustrated when I wrote that last issue. I've managed to accomplish the immediate task, but I'm still having issues. I had to change the code to:

module.exports = config

From what I understand, the syntax

export default config

Should work fine with @babel/preset-env, so there must be some issue with how Quokka is getting it's configuration information. THAT is the part that frustrates me a great deal, also, the fact that I can't really debug it. If there was a way (maybe there is?) to turn on some debugging data that shows the config files quokka found, and the ones it used, then it might be possible to narrow down the issues I have with it quickly and efficiently.

It would also be very helpful to discuss (and document) how quokka works with the recent version of Babel (7), since there are some changes there. Also, does quokka support things like babel.config.js in local path?

ArtemGovorov commented 5 years ago

You literally have 4 ways to configure quokka.

The way Quokka configuration is applied is described in our docs, it's a simple rule actually:

The settings in the package.json file override the settings in the global config, settings in the .quokka file override the settings in the package.json file, and the inline settings have the highest precedence and will override any values set with other methods.

WHERE IS THE CONFIGURATION REFERENCE

The above mentioned docs page is the full source of truth for configuring Quokka.

All I want to to AT THIS MOMENT is test a trival script that happens to use ES6 "import" and "export", but quokka will not do it.

Quokka will run your sample without any configuration at all. If you remove all quokka config files, and just leave ~/.quokka/config.json with

{"pro":true}

your sample just works:

Screen Shot 2019-04-22 at 10 31 09 am

I have quokka configurd in package.json

As specified in our docs (and as you are doing in ~/.quokka/config.json), Babel plugins are supposed to be specified inside the babel setting, however in your package.json, you are specifying them as Quokka plugins instead:

"quokka": {
    "babel": true,
    "plugins": [ <---
      "@babel/plugin-transform-modules-commonjs",
      "@babel/plugin-proposal-class-properties",
    ]
  }

hence the issue.

It would also be very helpful to discuss (and document) how quokka works with the recent version of Babel (7), since there are some changes there.

Babel configuration for Quokka, including Babel 7 is fully covered in our docs.

Also, does quokka support things like babel.config.js in local path?

Yes, it does.

and I really do NOT like to pay for tools that I can't use!

We are sorry to hear about your frustration with configuring Quokka. If you find the tool too hard to configure and would not like to use it anymore, we are happy to fully refund your license. Please send us an email to hello@wallabyjs.com and we will arrange license deactivation/refund for you.

kutenai commented 5 years ago

I followed your suggestions. It works great now. I apologize for getting so frustrated. I hope that I'm getting to the point where I can get quokka working on a new project with zero or minimal configuration and I can just use it.

When it works, it is fantastic.