airbnb / airbnb/babel-plugin-inline-react-svg
SyntaxError: pages/index.js: Unexpected token (1:145641)
- Dominant language
- JavaScript
- Stars
- 474
- Forks
- 90
- PR merge metrics
- No merged PRs in 30d
Description
I have tested the code with a simple SVG and it works. Apparently there is an issue my selected more complex SVG that includes imbedded Javascript in a CDATA. It gives the error message:
SyntaxError: pages/index.js: Unexpected token (1:145641)
I am unable to debug it because it give only the location and not details of the "Unexpected token". Is there a way that I can debug this.
..a bit more info though still no indication of what caused the problem
> 1 | import React from 'react';
| ^
2 | import NcMap from '../static/images/nc_map.svg';
3 | import Head from 'next/head';
4 | import Link from 'next/link';
Error
at transpile (/Users/.....reportSelectorServer/node_modules/babel-loader/lib/index.js:67:13)
at /Users/.....reportSelectorServer/node_modules/babel-loader/lib/fs-cache.js:118:18
at ReadFileContext.callback (/Users/.....reportSelectorServer/node_modules/babel-loader/lib/fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
@ multi ./pages?entry
at /Users/.....reportSelectorServer/node_modules/next/dist/server/build/index.js:182:21
at emitRecords.err (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:269:13)
at Compiler.emitRecords (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:375:38)
at emitAssets.err (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:368:12)
at next (/Users/.....reportSelectorServer/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Users/.....reportSelectorServer/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/Users/.....reportSelectorServer/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:365:9)
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with pages/index.js and static/images/nc_map.svg, then reproduce the Next.js build using the complex SVG containing embedded JavaScript in CDATA. Compare it with the working simple SVG and inspect the Babel-loader error location. Done means the SVG builds successfully or the failure identifies the offending syntax clearly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, javascript, next.js, react, webpack
- Domain
- build-system, frontend, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100