npm package in ES6 not getting bundled in webpack

Question

In my project

package.json (listed only babel related packages):

"@babel/core": "7.0.0-beta.37",
"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.37",
"@babel/register": "7.0.0-beta.37",
"babel-eslint": "https://github.com/kesne/babel-eslint.git#patch-1",
"babel-helper-annotate-as-pure": "^7.0.0-beta.3",
"babel-loader": "^8.0.0-beta.0",
"babel-minify-webpack-plugin": "^0.2.0",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-transform-class-properties": "^7.0.0-beta.3",
"babel-plugin-transform-decorators": "^7.0.0-beta.3",
"babel-plugin-transform-es2015-modules-commonjs": "^7.0.0-beta.3",
"babel-plugin-transform-es2015-template-literals": "^7.0.0-beta.3",
"babel-preset-typescript": "^7.0.0-alpha.19",

"webpack": "^3.5.5", "webpack-dev-server": "^2.7.1"

npm package "ui/base" is written in ES 6. And I am trying to import it on a page like

import '@ui/base';.

package.json of "ui/base".

"babel-core": "^6.26.0",
"babel-eslint": "^8.0.3",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babili-webpack-plugin": "^0.1.2",
"webpack-dev-server": "^2.7.1",
"webpack-node-externals": "^1.6.0"

The built version of a package is in ui/base/target/package/@ui/base/0/Main.js

Now, during the build process of my project, I am getting an error saying

ERROR in ./node_modules/@ui/base/src/components/accordion/Accordion.js
Module parse failed: Unexpected character '@' (18:0)
You may need an appropriate loader to handle this file type.
| import style from './accordion.css';
|
| @Define(`ui-base-v${__VERSION__}-accordion`, {
|   style,
| })

The error is being thrown from the source of components. The built version of a package is not being taken in a build process of a project.

I am using following rules in webpack to build the project.

// Resolve imports to Typescript too without needing .ts
module.exports.resolve = {
  extensions: ['.js', '.ts'],
};

module.exports.rules = [
  {
    test: /\.(js|ts)$/,
    exclude: /node_modules/,
    use: [{
      loader: 'babel-loader',
    }],
  },
  {
    test: /\.html$/, // plugin to import HTML as a string
    use: [{
      loader: 'raw-loader',
      options: {
        exportAsEs6Default: true,
      },
    }],
  },
  {
    test: /\.(less|css)$/,
    use: [
      {
        loader: 'css-to-string-loader', // creates style nodes from JS strings
      },
      {
        loader: 'css-loader', // translates CSS into CommonJS,
        options: { url: false },
      },
      {
        loader: 'less-loader', // compiles Less to CSS
      }],
  },
];

Below is the .babelrc in a project.

function istanbulHacks() {
  return {
    inherits: require("babel-plugin-istanbul").default,
  };
}

const config = {
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "transform-decorators",
    ["transform-class-properties", { "loose": true }],
    "transform-es2015-modules-commonjs",
    ["transform-es2015-template-literals", { "loose": true }],
  ],
  presets: [
    "typescript"
  ],
};

if (process.env.BABEL_ENV === "test") {
  config.auxiliaryCommentBefore = "istanbul ignore next";
  config.plugins.push(istanbulHacks);
}

module.exports = config;

Everything works fine without using the package written in ES6.

UPDATE

If I change "main" in package.json of @ui/base to

"main": "./target/package/@eui/base/0/Main.js",

then it works. Actually, "main" is point to "./src/index.js".

I am confused here as well. Why does "main" not point to the build version of a package ?

How to resolve this issue ? Is there any version incompatibility with babel or webpack ? Why I am not getting built version of npm package written in ES6 ?

score 0 · Answer 1 · answered Mar 12 '18 at 22:57

0

Couple options:

Are we sure the import is correct? usually if its npm, there will be es5 code in the package. I see that your import is from /@ui/base/src I've see src contain es6 files, while another directory contains the transpiled es5 code, perhaps lib, or dist. Can you check the node_modules folder to see whats in ui/base?
You can tell webpack to parse ui/base, right now, your webpack will exclude node_modules thats good, you can also tell webpack to include the es6 code. Then it will get transpiled along with your source code.

Quick example of #2:

    include: [
      path.resolve(__dirname, "app")
    ],
    exclude: [
      path.resolve(__dirname, "app/demo-files")
    ],

https://webpack.js.org/configuration/

answered Mar 12 '18 at 22:57

omarjmh

13,632
6
34
42

I tried with `exclude` with regex to exclude `node_modules` but not "@ui/base" but it didn't work. @ui/base contains different ui components defined as `import style from './accordion.css'; | | @Define(`ui-base-v${__VERSION__}-accordion`, { | style, | })` – Valay Mar 12 '18 at 23:12
also in `include` should I point to @ui/base built file or just @ui/base ? – Valay Mar 12 '18 at 23:14
you should put the path, something like: `node_modules/ui/base...` or whatever the path is. After a second look, I see an error with webpack loading css. You would also need to put those css files through css loader for this to work. – omarjmh Mar 13 '18 at 01:22
can you link me to the npm package? I cant seem to find it. thanks! – omarjmh Mar 13 '18 at 01:22
npm package is organisation's internal one. Tried `include` and `exclude` both and also added css files. But still it's not working. – Valay Mar 13 '18 at 09:29
really not sure then, odd case, please post when you find the answer. sorry couldnt be more help. I will delete this answer soon btw. – omarjmh Mar 13 '18 at 20:34

npm package in ES6 not getting bundled in webpack

1 Answers1