Skip to content

🐛 BUG: Build Result Error: There was a problem with a file build result. [object Object] #3940

@Ali-Milani-13

Description

@Ali-Milani-13

Quick checklist

  • I am using the latest version of Snowpack and all plugins.

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the bug

I tried to install babel plugin to use jsx inside of .js files in my project.
since I'm extremely familiar and comfortable with the webpack and most of my files are in .js format.

but after installing babel and adding it to my config.mjs file. it gives me the error I've mentioned in the title.

Screenshot 2024-04-14 115143

it points to index.ts but I've never changed that file and in fact, whenever I remove babel plugin from my config.mjs file, the issue, goes away.

I wish there could be a built-in support to write jsx in js.

Steps to reproduce

  1. npx create-snowpack-app new-dir --template @snowpack/app-template-react-typescript
  2. npm install --save-dev @snowpack/plugin-babel
  3. npm install --save-dev @babel/preset-react
  4. npm install --save-dev @babel/plugin-transform-react-jsx
  5. setting up the snowpack.config.mjs
/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    ['@snowpack/plugin-babel'],
    [
      '@snowpack/plugin-typescript',
      {
        /* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */
        ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}),
      },
    ],
  ],
  routes: [
    /* Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
  ],
  optimize: {
    /* Example: Bundle your final build: */
    // "bundle": true,
  },
  packageOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
};
  1. setting up .babelrc config:
{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-transform-react-jsx"]
}
  1. placing .bablerc in the root directory:

Screenshot 2024-04-14 115925

Link to minimal reproducible example (optional)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions