Syntax Error unexpected token : when impoting component from outside react app repository

Question

I created a React Application into my react native application so this is the structure of my global app :

        ------app
        ------variant
        ------Web
        -----------react-app-web
                   ------------------------index.js
                   ------------------------babel.config.js
                   ------------------------webpack.config.js
                   ------------------------package.json

The problem is that in the index.js of my react-app-web when trying to import simple component from repository app or variant it shows me this error : SyntaxError unexpected token < but no problem when importing component from inside react-app-web . i added babel preset react and babel preset env but it's still the same error . here is my components :

index.js :

   import React,{Component} from 'react';
   import ReactDOM from 'react-dom';
   import * as serviceWorker from './serviceWorker';
   import CenterComponent from '@variant/common.index'

   export default class Root extends Component {
     render() {
       return(<CenterComponent  />)
     }
    }
   ReactDOM.render(<Root/>,document.getElementById('root'));

babel.config.js :

  module.exports = {
    presets: ["@babel/preset-react", "@babel/preset-env"],
    plugins: ["@babel/plugin-proposal-class- 
      properties",'@babel/plugin-transform-runtime']};

webpack.config.js

     const path = require('path');

     module.exports = {
     mode: 'development',
    entry: ['@babel/polyfill','../../variant/generic/index.web.js'],
    output: {

    filename: './bundle.js',
      path: path.resolve(__dirname, 'public')
       },
    resolveLoader: {
    modules: [ __dirname + '\\node_modules' ],
    extensions: [ '.js', '.json','.jsx' ],
    mainFields: [ 'loader', 'main' ]
       },
      module: {
    rules: [{
     test: /\.jsx?$/,
    exclude: /node_modules/,

   use: [{
     loader: "babel-loader",
     options: {
     presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
     '@babel/plugin-transform-runtime',
     "@babel/plugin-proposal-class-properties"
        ]
          }
      }],

      },  {
   test: /\.(png|woff|woff2|eot|ttf|svg)$/,
   loader: 'url-loader'
    },
    {
    test: /\.css$/,
   use: ['style-loader', 'css-loader'],
   },

    ]
  },
    devServer: {
     hot: true
     },
   resolve: {
   extensions: ['*', '.js', '.jsx']
   }, 

  };

package.json

      {
      "name": "app",
     "version": "0.1.0",
      "private": true,
     "dependencies": {
     "@babel/polyfill": "^7.4.4",
      "babel-core": "^6.26.3",
      "babel-loader": "8.0.5",
       "mv": "^2.1.1",
       "path": "^0.12.7",
       "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-scripts": "3.0.1"
      },
     "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "postinstall": "link-module-alias"
         },
       "_moduleAliases": {
         "@app": "../../app/CustomApp",
        "@variant": "../../variant",
       "@test": "../Test"
        },
        "eslintConfig": {
      "extends": "react-app"
    },

          "browserslist": {
         "production": [
          ">0.2%",
          "not dead",
        "not op_mini all"
        ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-es2016": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.0.0",
    "css-loader": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "link-module-alias": "^1.2.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.0",
    "webpack": "4.29.6",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "3.2.1"
  }
}

Do you have any idea please how to fix it ?

corrado4eyes corrado4eyes · Accepted Answer · 2019-06-24T10:13:13

Seems stupid but maybe you didn't install the component with the global flag of npm, so now you're trying to get it outside from the project scope and it throws you this error

Syntax Error unexpected token : when impoting component from outside react app repository

1 Answers