意外的令牌导入-使用React和Node

Question

I'm getting an error when running my react app: Uncaught SyntaxError: Unexpected token import

I know that there are a plethora of similar issues on here, but I think mine is a little different . First of all, here is the repository, since I'm not sure where exactly the error is: repo

I'm using create-react-app, and in a seperate backend directory I'm using babel (with a .babelrc file containing the preset es2015). The app worked fine until I added another file in a new directory in the backend folder ( /backend/shared/validations/signup.js ).
I was using es6 before that too, and it was working perfectly fine. First I thought it was some problem with windows, but I cloned the repo on my Ubuntu laptop and I'm getting the same error there.

Some things I tried already:

• Move the entire folder from /backend to the root folder
• Move just the file (signup.js) just about everywhere

So no matter where the file is, the error stays the same. If I remove the entire file and all references to it the app works again.

I think this error is pretty weird, considering I'm using es6 everywhere else in the app without trouble. It would be great if anyone could help me with this error.

edit: If you want to test this on your own machine just clone the repo and run npm start in the root folder (and also npm start in the backend folder, but that isn't required for the app to run, or for the error to show up).

Answer 1

That's what's happening:

Your webpack is set to run babel loader only in the src folder ( include directive).

To change that, one approach is:

1) extract webpack configuration with npm run eject (don't know if there is another way to override settings in react-create-app ). From the docs:

Running npm run eject copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them.

2) in config/paths.js , add an appShared key, like that:

module.exports = {
  /* ... */
  appSrc: resolveApp('src'),
  appShared: resolveApp('backend/shared'),
  /* ... */
};

3) in config/webpack.config.dev.js , add the path to the babel loader, like that:

{
  test: /\.(js|jsx)$/,
  include: [ paths.appSrc, paths.appShared ],
  loader: 'babel',
  /* ... */
},

It works now!