airbnb / airbnb/babel-plugin-inline-react-svg

SyntaxError: pages/index.js: Unexpected token (1:145641)

Open
#21 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.