0

Trying to use a component from a directory outside of my React project directory and build with webpack but I get the below error.

SyntaxError: /Users/cmc/Sites/common/form_builder/src/index.js: Unexpected token (8:12)

   6 | 
   7 |         render(
>  8 |             <div>
     |             ^
   9 |                 common
  10 |             </div>
  11 |         )

Folder Structure

  • Sites
    • webpack-test (react project)
    • common (where I am trying to get common components)
    • formbuilder

I have tried installing node_modules with the same dependencies as the react project, also added the same .babelrc file.

webpack.config.json

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            include: [
                "/Users/cmc/Sites/common/form_builder/",
                path.resolve(__dirname, ""),
            ]}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

.babelrc

    "presets": [
      "@babel/env",
      "@babel/react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  }

package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development  --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }
}

App.js

import React, { Component } from 'react';
import Test from '../../../common/form_builder/src/index';

class App extends Component {

    render() {

        return(
            <div>
                <Test />
            </div>
        );
    }

}

export default App;

index.js

import React, { Component } from '../../webpack-test/node_modules/react';

class Test extends Component {

    render() {
        return(
            <div>
                Test
            </div>
        )
    }


}

export default Test;

Full Error:

[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log- apply-result.js 1.27 KiB {main} [built] [./src/index.js] 177 bytes {main} [built] + 26 hidden modules

ERROR in ../common/form_builder/src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/cmc/Sites/common/form_builder/src/index.js: Unexpected token (7:12)

 5 |     render() {
   6 |         return(
   7 |             <div>
     |             ^
   8 |                 Test
   9 |             </div>
   10 |         )

at Parser.raise (/Users/cmc/Sites/webpack- test/node_modules/@babel/parser/lib/index.js:6322:17) at Parser.unexpected (/Users/cmc/Sites/webpack- test/node_modules/@babel/parser/lib/index.js:7638:16)

oklas
  • 7,935
  • 2
  • 26
  • 42
cmcc93
  • 99
  • 4
  • Have you tried importing it in your package.json. normally if i'm importing anything thats not inside of my react directory. I use the package .json to import it and everything seems to work fine. – Chris Parsonage May 01 '19 at 11:46
  • `import React, { Component } from '../../webpack-test/node_modules/react'`? :/ why aren't you just doing `from 'react'`? – James May 01 '19 at 11:49
  • Importing what in my package.json? @ChrisParsonage Do you have an example of what you mean? – cmcc93 May 01 '19 at 11:50
  • Was just something that I was trying @James. It is still giving me the same error even if I import `from 'react'`. – cmcc93 May 01 '19 at 11:54
  • https://stackoverflow.com/questions/14381898/local-dependency-in-package-json here is a link for it but in your dependencies you would add in the package you want @cmcc93 – Chris Parsonage May 01 '19 at 11:54
  • @cmcc93 yeah, just noticed the problem is a typo as pointed out by @Roy.B - you are calling `render(
    ...
    )` instead of `return(
    ...
    )` - just a typo by the looks of it :)     – James May 01 '19 at 11:55
  • Fixed typo @James and still getting the same error. I believe it is the way webpack is setup. It cannot convert my jsx to JS. If you have any insights that would help. – cmcc93 May 01 '19 at 12:03
  • @cmcc93 it does look ok, if you avoid importing `Test` inside `App` and just return an empty `div` in there, do you get the same error? – James May 01 '19 at 13:08

0 Answers0