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

fregante · 2020-10-03T01:53:20Z

🐛 bug report

I can't import an SVG as a React component using #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 #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

The text was updated successfully, but these errors were encountered:

fregante · 2020-10-03T01:55:21Z

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 · 2020-10-03T01:57:04Z

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 · 2020-10-03T04:19:08Z

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 · 2020-10-04T17:52:52Z

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:

parcel/packages/transformers/babel/src/jsx.js

Lines 40 to 42 in a839a03

    
           if (!config.isSource) { 
        
             return null; 
        
           }

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):

parcel/packages/transformers/babel/src/jsx.js

Line 62 in a839a03

if (pragma || JSX_EXTENSIONS[path.extname(config.searchPath)]) {

huw · 2020-10-04T23:59:54Z

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

andreadev-it · 2021-03-07T19:54:32Z

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?

fregante mentioned this issue Oct 3, 2020

Parcel v2: SVGO + svg to react transformers #4108

Merged

3 tasks

mischnic added 🐛 Bug ✔️ Confirmed Bug Babel ✨ Parcel 2 labels Oct 4, 2020

fregante mentioned this issue Oct 5, 2020

Parcel (blocked by SVG import bug) refined-github/refined-github#3618

Closed

mischnic mentioned this issue Aug 23, 2021

@parcel/transformer-svg-react does not understand SVGs from node_modules #6748

Open

AndyOGo mentioned this issue Feb 14, 2022

@parcel/transformer-svg-react Unexpected token } for SVGs from node_modules #7706

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

fregante commented Oct 3, 2020 •

edited

fregante commented Oct 3, 2020 •

edited

fregante commented Oct 3, 2020 •

edited

huw commented Oct 3, 2020

mischnic commented Oct 4, 2020

huw commented Oct 4, 2020

andreadev-it commented Mar 7, 2021

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

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

Comments

fregante commented Oct 3, 2020 • edited

🐛 bug report

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

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

fregante commented Oct 3, 2020 • edited

fregante commented Oct 3, 2020 • edited

huw commented Oct 3, 2020

mischnic commented Oct 4, 2020

huw commented Oct 4, 2020

andreadev-it commented Mar 7, 2021

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

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

fregante commented Oct 3, 2020 •

edited

fregante commented Oct 3, 2020 •

edited

fregante commented Oct 3, 2020 •

edited