Webpack load module outside the root directory

Question

I am using Webpack to build my react-redux apps and encountered a situation: I tried to take some common components out of one app directory in order to reuse them during multiple react app, but when I tried to load one component outside the app directory I got errors:

Module build failed: SyntaxError: D:/dev/gdas/WebContent/reactx/common/components/HeaderFooter/Header.js: Unexpected token (74:31)

My babel-loader rule in webpack.config.js is as below:

{
    test: /\.jsx?$/,
    include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, '../reactx/common/components')],
    loader: 'babel-loader'
}

and My import code is as below:

import Header from '../../../reactx/common/components/HeaderFooter/Header.js'

Is that any solution to fix this issue?

score 0 · Answer 1 · answered Jul 01 '17 at 20:03

0

You're doing everything right. It's just that this file D:/dev/gdas/WebContent/reactx/common/components/HeaderFooter/Header.js has a SyntaxError at 74:31

answered Jul 01 '17 at 20:03

thangngoc89

1,400
11
14

But the Header.js is compiled successfully without any syntax error while it is in the src directory – charleschaochen Jul 03 '17 at 02:26
Could you show us the Header.js file? Try to remove the include setting in Webpack. – thangngoc89 Jul 03 '17 at 05:43
Removing the include setting is also tried but still failed – charleschaochen Jul 03 '17 at 12:15
I tried to add package.json for the reactx/common/components and then add it into dependencies of app, it works – charleschaochen Jul 03 '17 at 12:17

Webpack load module outside the root directory

1 Answers1