Babel-Loader/Parser issue

Sivoph

Hello, all.

I'm diving right into extension development but so far I've been just tweaking compiled code and I want to start building from scratch. Only problem is I get this error when I try to compile a project with Yarn or NPM:

ERROR in ./src/forum/index.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):

The syntax error just picks out a random character in the code and amending it just moves it onto the next, meaning something is awry. I'm using latest NPM & Yarn.

Here is my package.json file:

{
    "extends": "flarum-tsconfig",
    "include": [
        "src/**/*",
        "../vendor/flarum/core/js/dist-typings/@types/**/*"
    ],
    "compilerOptions": {
        "declarationDir": "./dist-typings",
        "baseUrl": ".",
        "paths": {
            "flarum/*": [
                "../vendor/flarum/core/js/dist-typings/*"
            ]
        }
    },
    "name": "@tnash/flarum-ext-finteger",
    "private": true,
    "devDependencies": {
        "@babel/core": "^7.17.9",
        "@babel/preset-env": "^7.16.11",
        "babel-loader": "^8.2.5",
        "flarum-tsconfig": "^1.0.2",
        "flarum-webpack-config": "^2.0.0",
        "typescript": "^4.5.4",
        "typescript-coverage-report": "^0.6.1",
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.1"
    },
    "scripts": {
        "dev": "webpack --mode development --watch",
        "build": "webpack --mode production",
        "analyze": "cross-env ANALYZER=true yarn build",
        "check-typings": "tsc --noEmit --emitDeclarationOnly false",
        "check-typings-coverage": "typescript-coverage-report"
    },
    "prettier": "@flarum/prettier-config",
    "dependencies": {
        "@babel/parser": "^7.12.2",
        "@babel/preset-react": "^7.16.7",
        "yarn": "^1.22.18"
    }
}

Webpack config:

module.exports = require('flarum-webpack-config')();

My node_modules folder is right in the project js folder.

I just cannot compile any code or move further with this error. Any thoughts? Thanks.

luceos

Sivoph have you tried either using flarum-cli or comparing against an existing extension? Maybe another team member with more JS experience is able to spot the issue.

clarkwinkelmann

Sivoph did you merge tsconfig.json and package.json ? The extends, include and compilerOptions keys are probably not valid in package.json file. Those are commonly found in the tsconfig.json file for TypeScript.

Sivoph

luceos

Hi, Luceos, thanks for getting back to me. I do use flarum-cli to build template. It is one of those weird issues that I think no one but me encounters. I'm 100% certain it is a dependency issue or I have some folder where it ought not to be. LOL, I'll muddle my way through it...eventually. It's taking me longer to figure this out than decoding the logic of a mithril-ized and webpack'd forum.js file, which is sort of remarkable given all the variables that are used. This is how I know it probably comes down to a single line somewhere. 🙂

Sivoph

clarkwinkelmann

Hi, Clark. I did try what you recommended:

Package.json:

{

    "name": "@tnash/flarum-ext-finteger",
    "private": true,
    "devDependencies": {
        "@babel/core": "^7.17.9",
        "@babel/preset-env": "^7.16.11",
        "babel-loader": "^8.2.5",
        "flarum-tsconfig": "^1.0.2",
        "flarum-webpack-config": "^2.0.0",
        "typescript": "^4.5.4",
        "typescript-coverage-report": "^0.6.1",
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.1"
    },
    "scripts": {
        "dev": "webpack --mode development --watch",
        "build": "webpack --mode production",
        "analyze": "cross-env ANALYZER=true yarn build",
        "check-typings": "tsc --noEmit --emitDeclarationOnly false",
        "check-typings-coverage": "typescript-coverage-report"
    },
    "prettier": "@flarum/prettier-config",
    "dependencies": {
        "@babel/parser": "^7.12.2",
        "@babel/preset-react": "^7.16.7",
        "yarn": "^1.22.18"
    }
}

ts.config:

{

    "extends": "flarum-tsconfig",
    "include": [
        "src/**/*",
        "../vendor/flarum/core/js/dist-typings/@types/**/*"
    ],
    "compilerOptions": {
        "declarationDir": "./dist-typings",
        "baseUrl": ".",
        "paths": {
            "flarum/*": [
                "../vendor/flarum/core/js/dist-typings/*"
            ]
        }
    }
}

Issue still persists but it looks like I had some redundancies that were taken care of. I Google'd the issue and it seems incompatibility with babel versions and incorrect configuration (.babelrc or babel.config.json) can create the error, too. Didn't seem to work for me as I have virtually everything updated to latest.

askvortsov

Sivoph Do you have the full code on GitHub somewhere so I could take a closer look?