babel-loader reactjs Неожиданный токен, когда код находится за пределами проекта root - PullRequest
Новая
       4

babel-loader reactjs Неожиданный токен, когда код находится за пределами проекта root

0 голосов
/ 29 февраля 2020

Я создаю несколько веб-приложений, используя reactjs, webpack, babel и yarn. Я хочу поделиться своим кодом js (x) между проектами. Поэтому я поместил его в отдельную папку, к которой я хочу обратиться из моих проектов (используя псевдоним в webpack.config. js). Кажется, что babel-loader не понимает синтаксис reactjs в коде, который находится в папке за пределами моего проекта root.

Возможно, что-то не так с моим конфигом, но я не могу его найти. Кто-нибудь еще может это сделать?

Вот мой пакет webpack.config. js: 

const webpack = require('webpack');
const path = require('path');
module.exports = env => {
  return {
    devtool: 'eval',
    mode: 'development',
    entry: ['index.jsx'],
    output: {
      filename: 'app.js',
      publicPath: 'dist',
      path: path.resolve('dist'),
    },

    // configure the dev server to run
    devServer: {
      port: 3001,
      historyApiFallback: {
        disableDotRule: true
      },
      inline: true,
    },

    resolve: {
      extensions: ['.jsx', '.js'],

      modules: ['src', 'node_modules'],
      alias: {
        $fff: path.resolve('/code/fff/src/')
      }
    },

    module: {
      rules: [
        {
          test: /\.jsx?$/,
          include: [
            path.resolve(__dirname),
            path.resolve('/code/fff/src/')
          ],
          exclude: /node_modules/,
          loader: "babel-loader",
        },
        {
          test: /\.scss$/,
          use: [{
              loader: "style-loader"
          }, {
              loader: "css-loader"
          }, {
              loader: "sass-loader",
              options: {
                  mimtype: "text/css",
                  includePaths: []
              }
          }]
        },
        {
          test: /\.css$/,
          use: [{
              loader: "style-loader"
          }, {
              loader: "css-loader"
          }, {
              loader: "sass-loader",
              options: {
                  mimtype: "text/css",
                  includePaths: []
              }
          }]
        },
        {
          test: /\.(svg|png|ico|xml|json)$/,
          loaders: ['file-loader'],
          include: path.resolve('assets')
        },
      ],
    },


    plugins: [
      new webpack.DefinePlugin({
        __API_URL: JSON.stringify(env.development ? 'https://localhost:44341/api/' : 'xxx/api/'),
        __APPLICATION_KEY: JSON.stringify('CrossCheck')
      })
    ]
  };
};

.babelr c

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]  
}

пакет. json

{
  "name": "CrossCheckFront",
  "version": "1.0.0",
  "main": "index.js",
  "author": "4E2",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "bootstrap": "^4.4.1",
    "cross-fetch": "^3.0.4",
    "css-loader": "^3.4.2",
    "eslint": "^6.8.0",
    "file-loader": "^5.1.0",
    "node-sass": "^4.13.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.2.0",
    "react-redux-oauth2": "^0.5.14",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3"
  },
  "scripts": {
    "start": "webpack-dev-server --env.development",
    "build": "webpack --env.production"
  }
}

и вот часть вывода ошибки: 

ERROR in C:/code/fff/src/InitResetPasswordPage/InitResetPasswordPage.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\code\fff\src\InitResetPasswordPage\InitResetPasswordPage.jsx: Unexpected token (47:12)

  45 |         return (
  46 |
> 47 |             <div className="h-100 row align-items-center">
     |             ^
  48 |                 <div className="col lg-4"></div>
  49 |                 <div className="col lg-4 fet-loginform">
  50 |                     <h2 className="fet-header">Lösenordsåterställning</h2>
    at Parser.raise (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:7044:17)
    at Parser.unexpected (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:8422:16)
    at Parser.parseExprAtom (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9701:20)
    at Parser.parseExprSubscripts (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9287:23)
    at Parser.parseMaybeUnary (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9267:21)
    at Parser.parseExprOps (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9137:23)
    at Parser.parseMaybeConditional (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9110:23)
    at Parser.parseMaybeAssign (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9065:21)
    at Parser.parseParenAndDistinguishExpression (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9842:28)
    at Parser.parseExprAtom (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9622:21)
    at Parser.parseExprSubscripts (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9287:23)
    at Parser.parseMaybeUnary (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9267:21)
    at Parser.parseExprOps (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9137:23)
    at Parser.parseMaybeConditional (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9110:23)
    at Parser.parseMaybeAssign (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9065:21)
    at Parser.parseExpression (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:9017:23)
    at Parser.parseReturnStatement (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:11091:28)
    at Parser.parseStatementContent (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:10772:21)
    at Parser.parseStatement (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:10724:17)
    at Parser.parseBlockOrModuleBlockBody (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:11298:25)
    at Parser.parseBlockBody (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:11285:10)
    at Parser.parseBlock (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:11269:10)
    at Parser.parseFunctionBody (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:10285:24)
    at Parser.parseFunctionBodyAndFinish (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:10254:10)
    at Parser.parseMethod (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:10216:10)
    at Parser.pushClassMethod (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:11704:30)
    at Parser.parseClassMemberWithIsStatic (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:11621:12)
    at Parser.parseClassMember (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:11563:10)
    at C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:11518:14
    at Parser.withTopicForbiddingContext (C:\code\CrossCheck\CrossCheckFront\node_modules\@babel\parser\lib\index.js:10599:14)
 @ C:/code/fff/src/InitResetPasswordPage/index.js 1:0-40 1:0-40
 @ ./src/App/App.jsx
 @ ./src/App/index.js
 @ ./src/index.jsx
 @ multi index.jsx
...