Help: "failed to resolve react from ..." in all files

[Richard87]

Hi!

I'm trying out swc/spack, but I can't get anything to work (so I assume I'm doing something fundamentally wrong! Would love some ideas about how to fix it!

I have thei spack.config.js:

const {config} = require('@swc/core/spack')

module.exports = config({
    entry: {
        form_task: __dirname + '/../assets/FormTask/App.js',
        search: __dirname + '/../assets/Search/App.js',
        react_app: __dirname + '/../assets/App.js',
        state: __dirname + '/../assets/State/index.js',
    },
    output: {
        path: __dirname + '/build2',
    },
    options: {
        jsc: {
            parser: {
                syntax: 'typescript',
                jsx: true,
                tsx: true,
            },
        },
    },
})

and this folder structure:

/assets/App.js
/public/spack.config.js  //I run the command from the public folder
/public/node_modules

• When including all entries, I get random "failed to resolve xxx from xx" erros, I assume its because its bundling them in parallell.
• If I try to only include one entry, it always fails in a specific "" (run 10 times afte reach other)
• If I import import React from '../../public/node_modules/react/index.js' it stopps on a different file each time with the same error.

So, how can/should I run swc/spack, or how can I specify which folder contains all my modules?

Thanks!

My error:

npx spack
node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[Error: load_transformed failed

Caused by:
    0: failed to analyze module
    1: failed to resolve react from /Users/richard/Projects/.../assets/Components/LoadingComponent.js
    2: index not found] {
  code: 'GenericFailure'
}

Node.js v17.2.0

My versions:

npx spack --version
@swc/cli: 0.1.55
@swc/core: 1.2.120

[Richard87]

If I extract swc config and put it in .swcrc It progresses slightly, now I get a react fragment error:

// .swcrc:
{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "jsx": true,
      "tsx": true
    }
  }
}

// spack.config.js
const {config} = require('@swc/core/spack')

module.exports = config({
    entry: {
        form_task: __dirname + '/../assets/FormTask/App.js',
        search: __dirname + '/../assets/Search/App.js',
        react_app: __dirname + '/../assets/App.js',
        state: __dirname + '/../assets/State/index.js',
    },
    output: {
        path: __dirname + '/build2',
    },
})

Gives this result:

node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[Error: load_transformed failed

Caused by:
    0: Bundler.load() failed
    1: Bundler.loader.load(/Users/richard/.../assets/FormTask/Form/Form.js) failed
    2: error: Expression expected
         --> /Users/richard/.../assets/FormTask/Form/Form.js:26:9
          |
       26 |         <>
          |         ^
       
       error: Expression expected
         --> /Users/richard/.../assets/FormTask/Form/Form.js:26:10
          |
       26 |         <>
          |          ^
       
       error: Expression expected
         --> /Users/richard/.../assets/FormTask/Form/Form.js:27:26
          |
       27 |             {isSubmitted && (
          |                          ^^
       
       error: Expression expected
         --> /Users/richard/.../assets/FormTask/Form/Form.js:28:17
          |
       28 |                 <StatusPage
          |                 ^
       
       error: Expected ',', got 'onShowForm'
         --> /Users/richard/.../assets/FormTask/Form/Form.js:29:21
          |
       29 |                     onShowForm={() => setSubmitted(false)}
          |                     ^^^^^^^^^^
       
       
    3: Syntax Error] {
  code: 'GenericFailure'
}

[Richard87]

Adding this code from the react example:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "react": {
        "pragma": "React.createElement",
        "pragmaFrag": "React.Fragment",
        "throwIfNamespace": true,
        "development": true,
        "useBuiltins": true
      }
    }
  }
}

Gave a slight change in output, but nothing I think is relevant:

npx spack       
node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[Error: load_transformed failed

Caused by:
    0: Bundler.load() failed
    1: Bundler.loader.load(/Users/richard/.../assets/Components/LoadingComponent.js) failed
    2: error: Expression expected
        --> /Users/richard/.../assets/Components/LoadingComponent.js:7:9
         |
       7 |         <>
         |         ^
       
       error: Expression expected
        --> /Users/richard/.../assets/Components/LoadingComponent.js:7:10
         |
       7 |         <>
         |          ^
       
       error: Expression expected
        --> /Users/richard/.../assets/Components/LoadingComponent.js:8:23
         |
       8 |             {children && (
         |                       ^^
       
       error: Expression expected
        --> /Users/richard/.../assets/Components/LoadingComponent.js:9:17
         |
       9 |                 <>
         |                 ^
       
       error: Unexpected token `>`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier
        --> /Users/richard/.../assets/Components/LoadingComponent.js:9:18
         |
       9 |                 <>
         |                  ^
       
       
    3: Syntax Error] {
  code: 'GenericFailure'
}

[kdy1]

It seems like it's parsed as a normal js (no ts, no tsx).

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "jsx": true,
      "tsx": true
    }
  }
}

This is wrong I think.

 "parser": {
      "syntax": "typescript",
      "tsx": true
    },

This is correct, but not sure about the cause of the error you got.

[Richard87]

Yes, suddenly PHPStorm started complaining about jsx when syntax was typescript 🤯

I have tried that syntax as well, please check my next comment :)

[Richard87]

Trying this code from swc-project/jest#40 gave mostly the same error, but some times it crashed on prasing react in general

[
  {
    "test": ".tsx?$",
    "jsc": {
      "parser": {
        "syntax": "typescript",
        "tsx": true
      },
      "target": "es5",
      "loose": false
    }
  },
  {
    "test": ".jsx?$",
    "jsc": {
      "parser": {
        "syntax": "ecmascript",
        "jsx": true,
        "decorators": false,
        "dynamicImport": false
      }
    }
  }
]

One of the unusual errors:

npx spack
node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[Error: load_transformed failed

Caused by:
    0: Bundler.load() failed
    1: Bundler.loader.load(/Users/richard/.../assets/Search/Search.js) failed
    2: error: Expression expected
         --> /Users/richard/.../assets/Search/Search.js:82:9
          |
       82 |         <ContainerDiv>
          |         ^
       
       error: Expression expected
         --> /Users/richard/.../assets/Search/Search.js:83:13
          |
       83 |             <div className='navbar-form form-group'>
          |             ^
       
       error: Expected ';', got 'className'
         --> /Users/richard/.../assets/Search/Search.js:83:18
          |
       83 |             <div className='navbar-form form-group'>
          |                  ^^^^^^^^^
       
       
    3: Syntax Error] {
  code: 'GenericFailure'
}

[selfagency]

Hitting this same wall right now with Spack.

.swcrc:

{
  "jsc": {
    "parser": {
      "syntax": "typescript"
    }
  },
  "module": {
    "type": "es6",
    "strict": false,
    "strictMode": true,
    "lazy": false,
    "noInterop": false
  }
}

spack.config.js:

module.exports = {
  entry: {
    main: __dirname + '/src/index.ts'
  },
  output: {
    path: __dirname + '/dist'
  }
}

outcome:

03:24:02 PM » npx spack
node:internal/process/promises:265
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Error: load_transformed failed

Caused by:
    0: failed to analyze module
    1: failed to resolve http from /Users/daniel/code/ud/devops/stats/node_modules/fastify/fastify.js
    2: index not found] {
  code: 'GenericFailure'
}

Node.js v17.4.0