how to get a javascript class import without loader

Question

babel is configured with:

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

and the packages:

"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",

in webpack.conf, I have a (completely stock) babel-loader section:

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
//...
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
  },

yet I am getting errors loading some files, such as:

import Auth from './auth.js'

yielding

 error  in ./fe-common/src/auth.js

Module parse failed: Unexpected token (11:18)
You may need an appropriate loader to handle this file type.
| export default class Auth
| {
|     authenticated = this.isAuthenticated()
|     authNotifier = new EventEmitter()
| 

 @ ./fe-common/src/main.js 19:0-28
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

per request, project structure:

robertotomas$ tree -d -I node_modules --noreport
.
├── build
├── config
├── fe-common
│   ├── src
│   │   ├── assets
│   │   │   └── images
│   │   ├── components
│   │   ├── css
│   │   ├── router
│   │   └── store
│   └── static
│       ├── images
│       └── jasper
├── fe-styleguide
│   ├── sass
│   │   └── partials
│   │       └── variables
│   └── src
│       ├── assets
│       │   └── images
│       │       ├── font_awesome
│       │       └── rights_owner_types
│       └── components
├── src
│   ├── assets
│   ├── components
│   ├── lang
│   │   └── en
│   ├── router
│   └── store
│       ├── UsageScenarios
│       └── lib
│           └── Schemas
├── static
└── test
    ├── e2e
    │   ├── custom-assertions
    │   └── specs
    └── unit
        └── specs

@NanduKalidindi it is the [vue-cli webpack config](https://github.com/vuejs-templates/webpack) .. with some added aliases. It is split into multiple files which makes a complete webpack.config kinda ugly to include (we're talking about ~8 files) — roberto tomás, Jan 24 '18 at 16:01
Got it, can you please remove the `include:` key from the loader hash and try it? — Nandu Kalidindi, Jan 24 '18 at 16:06

Nandu Kalidindi · Accepted Answer · 2018-01-24T16:31:33.040

0

I think the problem is with your include: value for the loader. resolve(src) is not searching for the files correctly.

From your project structure you might want to use this in your webpack config

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [    
    resolve('fe-common/src'),
    resolve('fe-styleguide/src'),
    resolve('src'),
    resolve('test'), 
    resolve('node_modules/webpack-dev-server/client')
  ]
},

edited Jan 24 '18 at 16:31

answered Jan 24 '18 at 16:18

Nandu Kalidindi

6,075
1
23
36

hmm, adding to my descirption the resolve function since that is relevant too. – roberto tomás Jan 24 '18 at 16:20
Seems like you are already doing it right. I think there is just the problem with the paths you were providing to the webpack. Where is your webpack config located? – Nandu Kalidindi Jan 24 '18 at 16:23
note .. auth.js is in the submodule fe-common.. maybe I just need to add those two lines? – roberto tomás Jan 24 '18 at 16:29
that es2015 comes from the babelrc in node_modules/v-mask, but it shouldnt be necessary since there is a dist. So, my root .babelrc would be fine .. and this issue is probably why vue-cli comes with webpack configured to get the parent directory for – roberto tomás Jan 24 '18 at 16:45
Nandu, the earlier change or removing the include resolves the issue but it starts failing in node modules like ` ERROR Failed to compile with 2 errors 11:25:29 error in ./node_modules/v-mask/dist/v-mask.esm.js Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/robertotomas/Work/Github/fe-marketing/node_modules/v‌-mask"`. This change does not resolve the issue. – roberto tomás Jan 24 '18 at 16:46

how to get a javascript class import without loader

1 Answers1