astroturfcss / astroturf

Better Styling through Compiling: CSS-in-JS for those that want it all.
https://astroturfcss.github.io/astroturf/
MIT License
2.28k stars 59 forks source link

Module build failed (from ./node_modules/astroturf/loader.js) #750

Closed raphael10-collab closed 1 year ago

raphael10-collab commented 1 year ago

I'm getting this error:

Module build failed (from ./node_modules/astroturf/loader.js):
AstroturfLoaderError: /home/raphy/MPlayground/src/utils/hypothesis/messaging/port-rpc.js: Unexpected token, expected "," (168:30)

  166 |  */
  167 |
> 168 | export class PortRPC<OnMethod extends string, CallMethod extends string> implements Destroyable {
      |                               ^
  169 |
  170 |     // Map of sequence number to response callback, for RPC calls sent from this instance.
  171 |     private _callbacks: Map<number, Callback>
    at instantiate (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:63:32)
    at constructor (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:358:12)
    at FlowParserMixin.raise (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3255:19)
    at FlowParserMixin.unexpected (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3285:16)
    at FlowParserMixin.expect (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3627:28)
    at FlowParserMixin.flowParseTypeParameterDeclaration (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:4408:14)
    at FlowParserMixin.parseClassId (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5360:34)
    at FlowParserMixin.parseClass (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:13343:10)
    at FlowParserMixin.parseExportDeclaration (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:13830:25)
    at FlowParserMixin.parseExportDeclaration (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5334:20)
    at FlowParserMixin.maybeParseExportDeclaration (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:13788:31)
    at FlowParserMixin.parseExport (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:13711:29)
    at FlowParserMixin.parseStatementContent (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12711:27)
    at FlowParserMixin.parseStatementLike (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12584:17)
    at FlowParserMixin.parseStatementLike (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5130:24)
    at FlowParserMixin.parseModuleItem (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12561:17)
    at FlowParserMixin.parseBlockOrModuleBlockBody (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:13185:36)
    at FlowParserMixin.parseBlockBody (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:13178:10)
    at FlowParserMixin.parseProgram (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12460:10)
    at FlowParserMixin.parseTopLevel (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12450:25)
    at FlowParserMixin.parseTopLevel (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5935:28)
    at FlowParserMixin.parse (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:14347:10)
    at parse (/home/raphy/MPlayground/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:14367:26)
    at parser (/home/raphy/MPlayground/node_modules/@babel/core/lib/parser/index.js:41:34)
    at parser.next (<anonymous>)
    at normalizeFile (/home/raphy/MPlayground/node_modules/@babel/core/lib/transformation/normalize-file.js:64:38)
    at normalizeFile.next (<anonymous>)
    at run (/home/raphy/MPlayground/node_modules/@babel/core/lib/transformation/index.js:21:50)
    at run.next (<anonymous>)
    at transform (/home/raphy/MPlayground/node_modules/@babel/core/lib/transform.js:22:41)
    at transform.next (<anonymous>)
    at evaluateSync (/home/raphy/MPlayground/node_modules/gensync/index.js:251:28)
    at sync (/home/raphy/MPlayground/node_modules/gensync/index.js:89:14)
    at stopHiding - secret - don't use this - v1 (/home/raphy/MPlayground/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:46:12)
    at transformSync (/home/raphy/MPlayground/node_modules/@babel/core/lib/transform.js:43:76)
    at traverse (/home/raphy/MPlayground/node_modules/astroturf/traverse.js:11:34)
    at collectStyles (/home/raphy/MPlayground/node_modules/astroturf/utils/loaders.js:101:31)
    at Object.loader (/home/raphy/MPlayground/node_modules/astroturf/vfs-loader.js:67:36)

And I've read around that it might be related to @babel/core

In package.json :

"astroturf": "^1.2.0",
"@babel/core": "^7.22.5",
"babel-loader": "^9.1.2",
"@babel/plugin-syntax-top-level-await": "^7.14.5",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-transform-modules-commonjs": "^7.21.2",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"electron": "19",
"ts-loader": "^9.4.2",
"typescript": "~4.5.4"

In webpack.rules.js :

  { // https://babeljs.io/setup#installation
    test: /\.jsx?$/,
    //test: /\.js$|jsx/,
    exclude: /(node_modules|\.webpack)/,
    use: [
          'babel-loader',
        {
          loader: 'astroturf/loader',
          options: { extension: '.module.scss' },
       }
    ],
  },

.babelrc :

.babelrc :

{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic",
        "importSource": "react"
      }
    ],

    // Compile JS for browser targets set by `browserslist` key in package.json.
    [
      "@babel/preset-env",
      {
        "bugfixes": true
      }
    ]
  ],
  "plugins": [
      "inject-args",
      [
          "@babel/plugin-proposal-class-properties",
          {
              "loose": true
          }
      ],
  ],
  "env": {
    "development": {
      "presets": [
        [
          "@babel/preset-react",
          {
            "development": true,
            "runtime": "automatic",
            "importSource": "react"
          }
        ]
      ]
    }
  }
}

Other info:

node : v18.12.1
O.S.: Ubuntu 22.04 Desktop

How to spot the root cause of the problem? How to make it work?

Looking forward to your kind help

jquense commented 1 year ago

This is a parsing error, because you seem to have Typescript in a js file

raphael10-collab commented 1 year ago

@jquense Hi Jason !!

I checked, and this was the problem

I was mislead by the error message

Thank you very much for your kind help