search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.38k stars 2.27k forks source link

`@parcel/transformer-svg-react` produces `Asset has no content` #5206

Open fregante opened 3 years ago

fregante commented 3 years ago

🐛 bug report

I can't import an SVG as a React component using https://github.com/parcel-bundler/parcel/pull/4108

🎛 Configuration (.babelrc, package.json, cli command)

{
    "extends": ["@parcel/config-default"],
    "transformers": {
        "*.svg": ["@parcel/transformer-svg-react", "@parcel/transformer-js"]
    }
}

{
    "scripts": {
        "build": "parcel build index.js"
    },
    "devDependencies": {
        "@parcel/transformer-js": "^2.0.0-alpha.3",
        "@parcel/transformer-svg-react": "^2.0.0-nightly.1739",
        "@primer/octicons": "^9.6.0",
        "parcel": "^2.0.0-nightly.414"
    }
}

🤔 Expected Behavior

No error. Alert should be a React component

😯 Current Behavior

One of these 3 errors, at random

🚨 Build failed.
Error: Asset has no content
Error: Asset has no content
    at CommittedAsset.getContent (./node_modules/@parcel/core/lib/CommittedAsset.js:99:15)
    at CommittedAsset.getCode (./node_modules/@parcel/core/lib/CommittedAsset.js:107:30)
    at Asset.getCode (./node_modules/@parcel/core/lib/public/Asset.js:204:48)
    at processAsset (./node_modules/@parcel/packager-js/node_modules/@parcel/scope-hoisting/lib/concat.js:215:28)
    at ./node_modules/@parcel/packager-js/node_modules/@parcel/scope-hoisting/lib/concat.js:139:25
    at ./node_modules/@parcel/packager-js/node_modules/@parcel/utils/lib/PromiseQueue.js:53:30
    at PromiseQueue._runFn (./node_modules/@parcel/packager-js/node_modules/@parcel/utils/lib/PromiseQueue.js:106:13)
    at PromiseQueue._next (./node_modules/@parcel/packager-js/node_modules/@parcel/utils/lib/PromiseQueue.js:93:16)
    at PromiseQueue.run (./node_modules/@parcel/packager-js/node_modules/@parcel/utils/lib/PromiseQueue.js:84:12)
    at concat (./node_modules/@parcel/packager-js/node_modules/@parcel/scope-hoisting/lib/concat.js:142:38)
🚨 Build failed.
Error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (3:13)
SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (3:13)
    at Parser._raise (./node_modules/@babel/parser/lib/index.js:766:17)
    at Parser.raiseWithData (./node_modules/@babel/parser/lib/index.js:759:17)
    at Parser.expectOnePlugin (./node_modules/@babel/parser/lib/index.js:8981:18)
    at Parser.parseExprAtom (./node_modules/@babel/parser/lib/index.js:10276:22)
    at Parser.parseExprSubscripts (./node_modules/@babel/parser/lib/index.js:9844:23)
    at Parser.parseUpdate (./node_modules/@babel/parser/lib/index.js:9824:21)
    at Parser.parseMaybeUnary (./node_modules/@babel/parser/lib/index.js:9813:17)
    at Parser.parseExprOps (./node_modules/@babel/parser/lib/index.js:9683:23)
    at Parser.parseMaybeConditional (./node_modules/@babel/parser/lib/index.js:9657:23)
    at Parser.parseMaybeAssign (./node_modules/@babel/parser/lib/index.js:9620:21)
🚨 Build failed.
Error: Unexpected token, expected "," (3:18)
SyntaxError: Unexpected token, expected "," (3:18)
    at Object._raise (./node_modules/@babel/parser/lib/index.js:766:17)
    at Object.raiseWithData (./node_modules/@babel/parser/lib/index.js:759:17)
    at Object.raise (./node_modules/@babel/parser/lib/index.js:753:17)
    at Object.unexpected (./node_modules/@babel/parser/lib/index.js:8966:16)
    at Object.expect (./node_modules/@babel/parser/lib/index.js:8952:28)
    at Object.flowParseTypeParameterDeclaration (./node_modules/@babel/parser/lib/index.js:1773:14)
    at ./node_modules/@babel/parser/lib/index.js:3293:31
    at Object.tryParse (./node_modules/@babel/parser/lib/index.js:9003:20)
    at Object.parseMaybeAssign (./node_modules/@babel/parser/lib/index.js:3290:26)
    at ./node_modules/@babel/parser/lib/index.js:9586:39

💁 Possible Solution

🔦 Context

I'm just trying to use https://github.com/parcel-bundler/parcel/pull/4108, as is, to import SVG files and use them as React(ish) components.

💻 Code Sample

import Alert from '@primer/octicons/build/svg/archive.svg';

console.log(Alert)

Repro.zip

🌍 Your Environment

Software Version(s)
Parcel both @2.0.0-beta.1 and 2.0.0-nightly.414
Node v14.4.0
npm/Yarn npm 6.14.5
Operating System macOS 10.15.7
fregante commented 3 years ago

If those 3 errors weren't enough, just moving the SVG file to the same directory changes the error a 4th time 🎉 

import Alert from './alert.svg';

console.log(Alert);
🚨 Build failed.
Error: The expression evaluated to a falsy value:

  (0, _assert().default)(typeof v === 'string')

AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:

  (0, _assert().default)(typeof v === 'string')

    at assertString (./node_modules/@parcel/packager-js/node_modules/@parcel/scope-hoisting/lib/utils.js:156:25)
    at ./node_modules/@parcel/packager-js/node_modules/@parcel/scope-hoisting/lib/link.js:159:42
    at enter (./node_modules/@parcel/core/lib/Graph.js:547:16)
    at enter (./node_modules/@parcel/core/lib/Graph.js:547:16)
    at enter (./node_modules/@parcel/core/lib/Graph.js:547:16)
    at walk (./node_modules/@parcel/core/lib/Graph.js:382:26)
    at walk (./node_modules/@parcel/core/lib/Graph.js:403:22)
    at walk (./node_modules/@parcel/core/lib/Graph.js:403:22)
    at walk (./node_modules/@parcel/core/lib/Graph.js:403:22)
    at Graph.dfs (./node_modules/@parcel/core/lib/Graph.js:427:12)
fregante commented 3 years ago

Side note: I really wish Parcel showed more information about the code it's evaluating, because Asset has no content tells me nothing about where to find the issue. I had to delete 99% of my repository to find it.

huw commented 3 years ago

I'm running into the issue from the first reply. Blew away yarn.lock and added:

"resolutions": {
    "@parcel/scope-hoisting": "2.0.0-nightly.417"
  },

Neither worked.

mischnic commented 3 years ago

So this is how it should work:

{
    "extends": ["@parcel/config-default"],
    "transformers": {
        "*.svg": ["@parcel/transformer-svg-react"]
    }
}
{
  "dependencies": {
    "@parcel/transformer-svg-react": "^2.0.0-nightly.2039",
    "@primer/octicons": "^11.0.0",
    "parcel": "^2.0.0-nightly.415",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}
import Alert from "@primer/octicons/build/svg/archive-24.svg";

console.log(Alert());

But we don't really run Babel (including jsx) over node_modules, so I'm currently getting an SyntaxError from Babel.

This check prevents node_modules: https://github.com/parcel-bundler/parcel/blob/a839a03f93607c1744ce62e6f95f98d0635700f4/packages/transformers/babel/src/jsx.js#L40-L42

And this check should definitely be updated to use asset.type instead of the filename extension (because this was once a svg file, but asset.type is actually "jsx" already):

https://github.com/parcel-bundler/parcel/blob/a839a03f93607c1744ce62e6f95f98d0635700f4/packages/transformers/babel/src/jsx.js#L62

huw commented 3 years ago

Forgot to add that I’m using the new JSX transformer in React, if that affects anything.

andreadev-it commented 3 years ago

If those 3 errors weren't enough, just moving the SVG file to the same directory changes the error a 4th time 🎉

import Alert from './alert.svg';

console.log(Alert);
🚨 Build failed.
Error: The expression evaluated to a falsy value:

  (0, _assert().default)(typeof v === 'string')

AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:

  (0, _assert().default)(typeof v === 'string')

    at assertString (./node_modules/@parcel/packager-js/node_modules/@parcel/scope-hoisting/lib/utils.js:156:25)
    at ./node_modules/@parcel/packager-js/node_modules/@parcel/scope-hoisting/lib/link.js:159:42
    at enter (./node_modules/@parcel/core/lib/Graph.js:547:16)
    at enter (./node_modules/@parcel/core/lib/Graph.js:547:16)
    at enter (./node_modules/@parcel/core/lib/Graph.js:547:16)
    at walk (./node_modules/@parcel/core/lib/Graph.js:382:26)
    at walk (./node_modules/@parcel/core/lib/Graph.js:403:22)
    at walk (./node_modules/@parcel/core/lib/Graph.js:403:22)
    at walk (./node_modules/@parcel/core/lib/Graph.js:403:22)
    at Graph.dfs (./node_modules/@parcel/core/lib/Graph.js:427:12)

It gives the same error to me too when trying to import an SVG. Is there a fix for this?