Quokka can't find babel-core while using create-react-app

[MMaicki]

Issue description or question

When im' trying to run quokka on my react project file it's giving me an error - can't find babel-core

Sample code

 import React, { Component } from 'react'
import styled from 'styled-components'
import axios from 'axios'

import {URL} from '../../../config'
import Button from '../Buttons/button'
import VideosTemplate from './videostemplate'

const StyledVideosListWrapper = styled.div`
    text-align: center;
    margin: 20px 0;
    color: #353535;
    font-weight: 300;
    font-size: 21px;
`

class VideosList extends Component{

    state = {
        teams: [],
        videos: [],
        start: this.props.start,
        end: this.props.start + this.props.end,
        amount: this.props.end
    }

    componentDidMount(){
        this.request(this.state.start, this.state.end)
    }

    displayTitle(){
        return this.props.title ?
            <h3><strong>NBA</strong> Videos</h3>
        : null
    }

    request(start, end){
        if(this.state.teams.length < 1){
            axios.get(`${URL}/teams`)
            .then(res => {
                this.setState({
                    teams: res.data
                })
            })
        }

        axios.get(`${URL}/videos?_start=${start}&_end=${end}`)
        .then(res => {
            this.setState({
                videos: [...res.data, ...this.state.videos],
                start,
                end
            })
        })
    }

    displayVideos(){
        let template = null

        switch(this.props.type){
            case('card'):
                template = (
                    <VideosTemplate
                        data={this.state.videos}
                        teams={this.state.teams}
                    />
                )
            break;
            default:
                template = null
        }
        return template
    }

    loadMore(){
        let end = this.state.end + this.state.amount
        this.request(this.state.end, end)
    }

    showButton(){
        return this.props.loadMore ?
            <Button
                type='loadMore'
                loadMore={() => this.loadMore()}
                cta='Load More News'
            />
         :
            <Button
                type='linkTo'
                cta='Load More Videos'
                linkTo='/videos'
            />
    }

    render(){
        return(
            <StyledVideosListWrapper>
                {this.displayTitle()}
                {this.displayVideos()}
                {this.showButton()}
            </StyledVideosListWrapper>
        )
    }
}

export default VideosList

Quokka.js Console Output

 Quokka 'videoslist.js' (node: v10.15.3)​​​​
Configured to use babel, but can not find babel-core or @babel/core module 
Babel core is not found 
 
Tried to search for babel core in these folders: 
  C:\Users\Marty\FrontEnd\node_modules\@babel\core 
  C:\Users\Marty\FrontEnd\node_modules\babel-core 
  C:\Users\Marty\.quokka\node_modules\@babel\core 
  C:\Users\Marty\.quokka\node_modules\babel-core 

Code editor version

Visual Studio Code v1.34.0

OS name and version

Windows 7 - latest avalible version

Things i had tried

In Quokka config.json

{
    "pro": false,
    "babel": {
        "presets": [
            "react-app"
        ]
    },
    "env": {
        "params": {
            "env": "BABEL_ENV=dev"
        }
    }
}

In my package.json

  "quokka": {
   "babel": true,
   "babel": {
     "presets": ["react-app"]
     },
    "plugins": [
      "jsdom-quokka-plugin"
    ]
  }

[ArtemGovorov]

Looks like Quokka can't locate Babel in your project. Please check that your node modules are installed, and if they are, find where exactly the @babel/core is installed in your node_modules and specify the path using babel.path Quokka setting in your package.json:

  "quokka": {
   "babel": {
+    "path": "...paste the found path here..."
     "presets": ["react-app"]
     },
    "plugins": [
      "jsdom-quokka-plugin"
    ]
  }

[MMaicki]

There is still the same error.

That's how my package.json file looks now:

{
  "name": "nba_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-fontawesome": "^1.6.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1",
    "react-simple-sidenav": "^1.0.1",
    "react-slick": "^0.24.0",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
    "quokka": {
      "babel": {
        "path": "./node_modules/@babel/core",
        "presets": [
          "react-app"
        ]
      },
      "plugins": [
        "jsdom-quokka-plugin"
      ]
    }
}

[ArtemGovorov]

Does this folder exist: C:\Users\Marty\FrontEnd\node_modules\@babel\core?

[MMaicki]

I've had installed babel in this directory, it was missing. Some things are working. But now I'm experiencing such an issue:

​​​​Quokka 'videoslist.js' (node: v10.15.3, babel: v7.4.4)​​​​
 
Unexpected identifier 
  at ​​​new Script​​​ ​vm.js:80​
  at ​​​createScript​​​ ​vm.js:274​
  at ​​​Object.runInThisContext​​​ ​vm.js:326​
  at ​​​Module._compile​​​ ​internal/modules/cjs/loader.js:664​

I also had to modify config.json to this shape:

{
    "pro": false,
    "babel": {
        "presets": [
            "react-app"
        ]
    },
    "env": {
        "params": {
            "env": "BABEL_ENV=development"
        }
    }
}

[ArtemGovorov]

@MMaicki Please create and share a sample repo demonstrating the issue, we are happy to take a look into it and help with the config.

[ArtemGovorov]

Looks like you've deleted your comment. Please let us know if the issue is still valid for you.

[MMaicki]

That's repo that I'm currently working on and trying to use quokka.js: https://github.com/MMaicki/nba_app

I don't know is it valid but structure of files where this projest is looks like this:

C:\Users\Marty\FrontEnd\React\nba_app 

In FrontEnd location there are installed node_modules with @babel/core. nba_app was created with create-react-app.

[ArtemGovorov]

Thanks for providing the repo. In your case: @babel/register is not installed, and the module is required if you want to transpile other files imported by the running file.

[uroslazarevic]

Hello,

I see that this is an old thread, but I was stuck with the same issue. I am using free version on VS code.

From my understanding, which is probably very limitied, the issue is next.

The Quokka needs @babel/core module to function. It will try to find the module in your project node_modules or in the .quokka folder, which is generated when you install the Quokka VS code extension, and can be found in next location: ~/.quokka

The fix for me on the Mac was to install @babel/core in the .quokka folder directly.

cmd: cd ~/.quokka && npm i @babel/core@7.23.3

Hope it helps someone. Cheers!