Unexpected token after eject with Component Folders with package.json (comment on #5865)

[devinrhode2]

It's quite frustrating that a very well documented issue is just automatically closed after a few months because it's marked stale, but I understand why such a thing would happen. Anyway, you can consider this a comment to this issue opened just a few months ago: #5865
(I'll even move my comment to that thread if it's unlocked and delete this issue once I move it there to keep things cleaner)

I am also having an unexpected token error on the first jsx angle bracket <

I have components I placed in my package.json, which are pointing to git repo urls. Everything was working, until I need to create some webpack aliases. So I had to eject, and then the first error I got was this unexpected token error.

I saw this related issue: #3491 But I'm quite sure @derpoho has exactly pinned the issue.

I looked through his repo demonstrating the issue, and wanted to note his changes from a fresh create-react-app:
-Added import Packaged from './components/Packaged' to App.js
This folder is very very simple. Just package.json with main entry pointing to pure functional component that returns a div: https://github.com/derpoho/cra-packaged-components-error/tree/master/src/components/Packaged
Then he ejected.

[devinrhode2]

Also I can add that it chokes on the first line that contains a jsx < - even if that line of code is not the first line of jsx that would be executed in the app. (Cough cough - sorry I just explained the definition of a syntax error - but maybe it's helpful..)

[devinrhode2]

Here's the full expanded copy of the error I get in my console

app.jsx:1 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/devinrhode2/repos/my-repo/src/Q360-Core/src/app/app.jsx: Unexpected token (53:15)

�[0m �[90m 51 | �[39m�[0m
�[0m �[90m 52 | �[39m   render() {�[0m
�[0m�[31m�[1m>�[22m�[39m�[90m 53 | �[39m        �[36mreturn�[39m �[33m<�[39m�[33mRouter�[39m history�[33m=�[39m{ history }�[33m>�[39m�[0m
�[0m �[90m    | �[39m               �[31m�[1m^�[22m�[39m�[0m
�[0m �[90m 54 | �[39m            �[33m<�[39m�[33mRoute�[39m path�[33m=�[39m{�[36mthis�[39m�[33m.�[39mprops�[33m.�[39mbaseURL �[33m+�[39m �[32m"/"�[39m} history�[33m=�[39m{ history } component�[33m=�[39m{ �[33mApp�[39m } �[33m>�[39m�[0m
�[0m �[90m 55 | �[39m                �[33m<�[39m�[33mIndexRoute�[39m pageName�[33m=�[39m�[32m"welcome"�[39m getComponent�[33m=�[39m{ requireWelcomeComponent } �[33m/�[39m�[33m>�[39m�[0m
�[0m �[90m 56 | �[39m                �[33m<�[39m�[33mRoute�[39m path�[33m=�[39m{�[36mthis�[39m�[33m.�[39mprops�[33m.�[39mbaseURL �[33m+�[39m �[32m"/about"�[39m} pageName�[33m=�[39m�[32m"about"�[39m getComponent�[33m=�[39m{ requireAboutComponent }  �[33m/�[39m�[33m>�[39m�[0m
    at Parser.raise (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:3831)
    at Parser.unexpected (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:5143)
    at Parser.parseExprAtom (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:6283)
    at Parser.parseExprSubscripts (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:5862)
    at Parser.parseMaybeUnary (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:5842)
    at Parser.parseExprOps (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:5729)
    at Parser.parseMaybeConditional (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:5702)
    at Parser.parseMaybeAssign (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:5647)
    at Parser.parseExpression (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:5595)
    at Parser.parseReturnStatement (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:7617)
    at Parser.parseStatementContent (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:7295)
    at Parser.parseStatement (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:7243)
    at Parser.parseBlockOrModuleBlockBody (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:7810)
    at Parser.parseBlockBody (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:7797)
    at Parser.parseBlock (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:7786)
    at Parser.parseFunctionBody (:3000/Users/devinrhode2/repos/my-repo/node_modules/@babel/parser/lib/index.js:6876)
    at eval (app.jsx:1)
    at Object../src/Q360-Core/src/app/app.jsx (main.chunk.js:10)
    at __webpack_require__ (bundle.js:782)
    at fn (bundle.js:150)
    at eval (index.js:1)
    at Module../src/index.js (main.chunk.js:22)
    at __webpack_require__ (bundle.js:782)
    at fn (bundle.js:150)
    at Object.0 (main.chunk.js:34)
    at __webpack_require__ (bundle.js:782)
    at checkDeferredModules (bundle.js:46)
    at Array.webpackJsonpCallback [as push] (bundle.js:33)
    at main.chunk.js:1
(anonymous) @ app.jsx:1
./src/Q360-Core/src/app/app.jsx @ main.chunk.js:10
__webpack_require__ @ bundle.js:782
fn @ bundle.js:150
(anonymous) @ index.js:1
./src/index.js @ main.chunk.js:22
__webpack_require__ @ bundle.js:782
fn @ bundle.js:150
0 @ main.chunk.js:34
__webpack_require__ @ bundle.js:782
checkDeferredModules @ bundle.js:46
webpackJsonpCallback @ bundle.js:33
(anonymous) @ main.chunk.js:1
index.js:1446 ./src/Q360-Core/src/app/app.jsx


SyntaxError: /Users/devinrhode2/repos/my-repo/src/Q360-Core/src/app/app.jsx: Unexpected token (53:15)

  51 | 
  52 |    render() {
> 53 |         return <Router history={ history }>
     |                ^
  54 |             <Route path={this.props.baseURL + "/"} history={ history } component={ App } >
  55 |                 <IndexRoute pageName="welcome" getComponent={ requireWelcomeComponent } />
  56 |                 <Route path={this.props.baseURL + "/about"} pageName="about" getComponent={ requireAboutComponent }  />
function.console.(anonymous function) @ index.js:1446
handleErrors @ webpackHotDevClient.js:156
connection.onmessage @ webpackHotDevClient.js:193
EventTarget.dispatchEvent @ eventtarget.js:56
(anonymous) @ main.js:282
SockJS._transportMessage @ main.js:280
EventEmitter.emit @ emitter.js:53
WebSocketTransport.ws.onmessage @ websocket.js:36

Of course the error from @derpoho's repo will be more illuminating

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[supnate]

I just met the same issue and found a workaround. Since Babel reports syntax error it usually means it's not configured correctly. So I guess if a folder contains package.json but with no .babelrc, babel.config.js such files in parent folders then it thinks there's no config.

So I created a babel.config.js in the project root rather that define it in package.json. Then it works.
My babel.config.js is as below:

module.exports = function(api) {
  const presets = ["react-app"];
  const plugins = [];
  if (api.env("development")) {
    // plugins.push('react-hot-loader/babel');
  }
  return { presets, plugins };
};

Note that you must contain if (api.env("... otherwise it throws errors. I don't know why maybe api.env does some tricky things.

However, sub-folders with package.json just worked in my previous project with old cra and babel :-(

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.