CODEWITHSUNDEEP
javascriptnode.jsreactjswebpack
Osny Netto
Osny Netto

Reputation: 572

Webpack alias pointing to a parent directory which dosn't have webpack configured

I have a project which doesn't include webpack in the root direct, it's installed in my website folder within root directory.

project
-> src
   -> App.js
   -> Hello.js
   -> index.js
-> website
   -> webpack.config.js
   -> index.js
   -> package.json

and in my webpack.config.js file I added a alias entry to point to my components folder:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      '@my-app/components': path.resolve(__dirname, '../src/'),
    }
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
}

The problem is: When I try to import my component like this import { Hello } from '@my-app/components'; and I try to npm run build, I get this error message:

ERROR in ../src/Hello.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../my-new-proj/src/Hello.js: Unexpected token (4:2)

I'm not sure if this problem is caused just because I'm pointing my components alias in a parent directory which doesn't have its own webpack config or it's something else.

I pushed my code to github so you can see the complete folder structure: https://github.com/osnysantos/my-new-project

Upvotes: 0

Views: 2157

Answers (1)

Fabian S
Fabian S

Reputation: 113

Your problem has nothing to do with webpack alias. If you follow the the emitted error, you will see that babel-loader does not recognize the JSX. I see you have added react-presets to your babelrc file, however those seem to be overwritten by your webpack config. Either remove the preset array from the webpack config, or add react preset to them.

Upvotes: 2

Related Questions