title: React syntax error while compiling component from node_modules
body: <p>I have below structure and its compiling good.</p>
  
  <ul>
  <li><strong>Project</strong>
  
  <ul>
  <li>Zoo
  
  <ul>
  <li>Src</li>
  <li>Components
  
  <ul>
  <li><em>MySharedComponents</em> </li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>When i try to move my shared components as one Project and try to install it in  other project like below structure. This gives compilation syntax error.</p>
  
  <ul>
  <li><strong>Feature</strong> (My shared component project)
  
  <ul>
  <li>Src
  
  <ul>
  <li>Components
  
  <ul>
  <li><em>MySharedComponents</em> </li>
  </ul></li>
  </ul></li>
  </ul></li>
  <li><strong>Project</strong>
  
  <ul>
  <li>node_modules
  
  <ul>
  <li>Feature</li>
  </ul></li>
  <li>Zoo
  
  <ul>
  <li>Src</li>
  <li>Components  </li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>GIT Repo : <a href="https://github.com/andiappan-ar/babelIssue.git" rel="nofollow noreferrer">https://github.com/andiappan-ar/babelIssue.git</a></p>
  
  <p><a href="https://i.stack.imgur.com/TEynK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TEynK.png" alt="enter image description here"></a></p>
  
  <p>I installed my shared project using below command</p>
  
  <pre><code>&gt; npm install --save ../../feature
  </code></pre>
  
  <p>My Zoo Project server.webpack.config.js below</p>
  
  <pre><code>const path = require('path');
  const env = require('@babel/preset-env');
  const reactApp = require('babel-preset-react-app');
  // Webpack build configuration to build the SSR bundle.
  // Invoked by build:server.
  
  module.exports = {
    mode: 'production',
    entry: path.resolve(__dirname, './server.js'),
    target: 'node',
    output: {
      path: path.resolve(__dirname, '../build'),
      filename: '../build/server.bundle.js',
      libraryTarget: 'this',
    },
    optimization: {
      minimize: false,
    },
    module: {
      rules: [
        {
          test: /\.m?jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              babelrc: false,
              presets: [env, reactApp],
            },
          },
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          use: { loader: 'html-loader' },
        },
        {
          // anything not JS or HTML, we load as a URL
          // this makes static image imports work with SSR
          test: /\.(?!js|mjs|jsx|html|graphql$)[^.]+$/,
          exclude: /node_modules/,
          use: {
            loader: 'url-loader',
          },
        },
        {
          // anything in node_modules that isn't js,
          // we load as null - e.g. imported css from a module,
          // that is not needed for SSR
          test: /\.(?!js|mjs|jsx|html|graphql$)[^.]+$/,
          include: /node_modules/,
          use: {
            loader: 'null-loader',
          },
        },
      ],
    },
  };
  </code></pre>
  
  <p>My Zoo project package.json below</p>
  
  <pre><code>{
    "name": "jss-sample-react",
    "description": "Application utilizing Sitecore JavaScript Services and React (create-react-app).",
    "version": "11.0.2",
    "private": true,
    "config": {
      "appName": "SafariZoo",
      "rootPlaceholders": [
        "jss-main"
      ],
      "sitecoreDistPath": "/dist/SafariZoo",
      "sitecoreConfigPath": "/App_Config/Include/zzz",
      "graphQLEndpointPath": "/api/SafariZoo",
      "language": "en"
    },
    "engines": {
      "node": "&gt;=8.1",
      "npm": "&gt;=5.6.0",
      "yarn": "yarn is not supported, please use npm"
    },
    "author": {
      "name": "Sitecore Corporation",
      "url": "https://jss.sitecore.net"
    },
    "repository": {
      "type": "git",
      "url": "git+https://github.com/sitecore/jss.git"
    },
    "bugs": {
      "url": "https://github.com/sitecore/jss/issues"
    },
    "license": "Apache-2.0",
    "dependencies": {
      "@sitecore-jss/sitecore-jss-react": "^11.0.2",
      "@sitecore-jss/sitecore-jss-tracking": "^11.0.2",
      "@types/bootstrap": "^4.2.2",
      "@types/jquery": "^3.3.29",
      "feature": "../../feature",
      "apollo-cache-inmemory": "~1.3.12",
      "apollo-client": "~2.4.8",
      "apollo-link": "~1.2.6",
      "apollo-link-batch-http": "~1.2.6",
      "apollo-link-http": "~1.5.9",
      "apollo-link-persisted-queries": "~0.2.2",
      "axios": "~0.18.0",
      "babel-plugin-transform-class-properties": "^6.24.1",
      "bootstrap": "^4.3.1",
      "graphql": "~14.0.2",
      "graphql-tag": "~2.10.0",
      "i18next": "~13.1.2",
      "i18next-fetch-backend": "~2.0.0",
      "isomorphic-fetch": "~2.2.1",
      "jquery": "^3.3.1",
      "react": "~16.7.0",
      "react-apollo": "~2.3.3",
      "react-dom": "~16.7.0",
      "react-helmet": "~5.2.0",
      "react-i18next": "~9.0.2",
      "react-router-dom": "~4.3.1",
      "react-scripts": "2.1.3",
      "serialize-javascript": "~1.6.1"
    },
    "devDependencies": {
      "@babel/register": "~7.0.0",
      "@sitecore-jss/sitecore-jss-cli": "^11.0.2",
      "@sitecore-jss/sitecore-jss-dev-tools": "^11.0.2",
      "@sitecore-jss/sitecore-jss-manifest": "^11.0.2",
      "babel-loader": "8.0.4",
      "babel-preset-react-app": "~7.0.0",
      "chalk": "~2.4.2",
      "chokidar": "~2.0.4",
      "cross-env": "~5.2.0",
      "graphql.macro": "~1.0.2",
      "html-loader": "~0.5.5",
      "http-proxy-middleware": "~0.19.1",
      "npm-run-all": "~4.1.5",
      "null-loader": "~0.1.1",
      "url-loader": "~1.1.2",
      "webpack": "4.19.1",
      "webpack-cli": "~3.2.1"
    },
    "scripts": {
      "jss": "jss",
      "start": "npm-run-all --serial bootstrap:disconnected --parallel start:react start:proxy start:watch-components",
      "start:connected": "scjss-verify-setup &amp;&amp; npm-run-all --serial bootstrap:connected start:react start:watch-components",
      "build": "npm-run-all --serial bootstrap:connected build:client build:server",
      "scaffold": "node scripts/scaffold-component.js",
      "start:react": "react-scripts start",
      "start:proxy": "node scripts/disconnected-mode-proxy.js",
      "start:watch-components": "node scripts/generate-component-factory.js --watch",
      "build:client": "cross-env-shell PUBLIC_URL=$npm_package_config_sitecoreDistPath \"react-scripts build\"",
      "build:server": "cross-env-shell NODE_ENV=production \"webpack --config server/server.webpack.config.js\"",
      "bootstrap:connected": "node scripts/bootstrap.js",
      "bootstrap:disconnected": "node scripts/bootstrap.js --disconnected",
      "graphql:update": "node -r babel-register ./scripts/update-graphql-fragment-data.js",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    },
    "browserslist": [
      "&gt;0.2%",
      "not dead",
      "not ie &lt;= 11",
      "not op_mini all"
    ]
  }
  </code></pre>
  
  <p>I tried below options but nothing works,</p>
  
  <ol>
  <li><p>Instead of manually install my shared project, i have  used lerna that also causing the same issue.</p></li>
  <li><p>Currently my project doesnt have ".babelrc" file  all my babel-presets in webpackconfig itself. Even i introduce babelrc file in both project doesnt solve the issue.</p></li>
  <li><p>I have cross across many git links they are saying to add presets in multiple way. but nothing work out. 
  The related Issue seems still open <a href="https://github.com/facebook/create-react-app/issues/5100" rel="nofollow noreferrer">https://github.com/facebook/create-react-app/issues/5100</a>.</p></li>
  </ol>
  
  <p><strong>How to solve this issue ?</strong> or <strong>how i can share my component to multiple project with out this babel issue ?</strong></p>