Rxjs: ES6: Cannot resolve module 'rxjs/Rx' for rxjs-es

[jadbox]

Rxjs: v5 beta 4
npm: 3.7.3
node: 5.9.1

Code to reproduce:

• Create a new Webpack + Babel 5 project using babel-preset-es2015
• npm install rxjs-es --save
• Add import Rx from 'rxjs/Rx'; to JS file
• Webpack buid:
  Module not found: Error: Cannot resolve module 'rxjs/Rx' in /home/jadbox/github/rxjs5proj

Node Modules:
ls -ls node_modules | grep rxjs
4 drwxr-xr-x 11 jadbox jadbox 4096 Apr 1 11:36 rxjs-es

[jadbox]

I had success with changing the import to import Rx from 'rxjs-es/Rx'; however I get the following parse error:

ERROR in ./~/rxjs-es/Rx.js
Module parse failed: /home/jadbox/github/vidroll/rxjs5proj/node_modules/rxjs-es/Rx.js Line 5: Unexpected token
You may need an appropriate loader to handle this file type.
| // Subject extends Observable and Observable references Subject in it's
| // definition
| export { Subject } from './Subject';
| /* tslint:enable:no-unused-variable */
| export { Observable } from './Observable';
 @ ./test.js 3:10-31

[jadbox]

My webpack build file for reference:
https://gist.github.com/jadbox/e1d6f409bac4162151f9a12090fdaa44

[killtheliterate]

I am having the same issue using babel-cli. Pretty much same error when importing _just_ Observable.

[kwonoj]

Shouldn't babel loader config exclude RxJS module (https://gist.github.com/jadbox/e1d6f409bac4162151f9a12090fdaa44#file-webpack-example-L31) in npm package, by rxjs-es itself is also es15 module?

[noppanit]

I'm having the same problem.

[MartinSeeler]

I've got the same issue. Any workaround known?

[EwanValentine]

+1

[jamesvsnowden]

Workaround for webpack using resolve.alias and loader.exclude:
webpack.config.js

[benlesh]

I'm opening this one up for PRs. I personally don't have time to dig into it, but it sounds like a few people are hitting this issue.

Question: If you're using webpack, can you not use use the rxjs CJS version of the library?

[kwonoj]

I'll try to look into as well. /cc @david-driscoll for visibility , if I remember correctly it's introduced along with one of typing enhancement. (Sorry @david-driscoll if I'm wrong - early apologize :wink: )

[david-driscoll]

So I don't think it's related to any of the typing working, Rx.ts exports everything it should. Functionaly it should be the same for ES6 / TypeScript.

It sounds like webpack doesn't understand that it's an ES6 compatible module. I haven't touched webpack in over 6 months, so I'm not really sure.

Maybe it's failing to identify the file because there are no imports at the top, it just starts with an export? @jadbox can you try moving those top two exports, down with the rest of the exports in the middle of the file? Does that have any effect?

[kwonoj]

@david-driscoll That was my assumption too at https://github.com/ReactiveX/rxjs/issues/1575#issuecomment-205707834 by webpack config excludes ES15 rx modules. But not 100% sure since other peoples having problem as well.

[kwonoj]

I came to think my comment (https://github.com/ReactiveX/rxjs/issues/1575#issuecomment-205707834) and @david-driscoll 's comment as well (https://github.com/ReactiveX/rxjs/issues/1575#issuecomment-210124551), this is related with bundle / transpiling configuration of ES2015 modules.

@jadbox @killtheliterate @noppanit , would you able to confirm if imported ES15 module (rxjs-es) is transpiled via babel (or anything else) or it's raw ES15 module?

[killtheliterate]

@kwonoj looks like babel does not transpile anything out of the box. My transpiled code just refers to Observable like this: var _Observable = require('rxjs/Observable');

---edit
The build goes correctly, but then during execution: Error: Cannot find module 'rxjs/Observable'

[benlesh]

The build goes correctly, but then during execution: Error: Cannot find module 'rxjs/Observable'

That should be rxjs-es/Observable if you installed rxjs-es.

[killtheliterate]

Yea, I don't believe it's getting bundled. That makes sense, there is likely some .babelrc configuration to say "transpile node_modules too". After changing my import to the correct one mentioned by @blesh, I see SyntaxError: Unexpected reserved word on "import" node_modules/rxjs-es/Observable.js:1.

[kwonoj]

Thanks for confirmation, @killtheliterate . I'll leave this opened bit more to see other people's experiencing same as well, and close this issue by suggesting update transpiler configuration.

Meanwhile @killtheliterate , as @blesh suggested I'd also suggest to use cjs package which shouldn't have this problem. Is there possibly reason not able to use cjs instead? (or amd, or else)

[killtheliterate]

@kwonoj definitely, and hey, I'll admit to not reading the README to the point where there are instructions for common 😝

[kwonoj]

I'm closing this issue for now, by believing this is related with transpiling ES2015 module package.

Summarize, please check this.

• Please check transpiler configuration to pickup rxjs-es as well while transpiling. rxjs-es is native ES2015 module, cannot be consumed without transpilation (at this moment)
• if it's hard to configure transpiling configuration for dependency package, please consider to use cjs package instead.

[jadbox]

FYI, I've opted for the cjs package for now.

[benlesh]

@jadbox sorry, if I missed this, did you confirm that:

1. You were importing rxjs-es/Rx and not rxjs/Rx
2. You had all of the proper module resolution settings in your transpiler. (Babel has something like a moduleResolution flag or the like).

I want to make sure of that before we walk away from this.

[tjunghans]

Hi Everyone,

I have a similiar if not the same issue as @jadbox. I'm not sure if the issue lies with

• webpack (^1.0.0),
• babel (^6.0.0),
• rxjs (^5.0.0-beta.8),
• or my [lack of] knowledge of the above.

This seems to be the most informative source of the issue, so I figured posting here makes the most sense even though the issue has been closed.

I'm importing rxjs using import Rx from 'rxjs-es/Rx'; and my webpack.config.js contains the following loader entries for babel:

{ test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
{ test: /\.js$/, include: [/module-a/, /module-b/, /rxjs-es/], loader: 'babel' },

As you can see, the node_modules directory is being excluded and three modules, containing es6 code are included. This works for module-a and module-b and not for rxjs-es. The error webpack throws is:

ERROR in ./~/rxjs-es/Rx.js
Module build failed: SyntaxError: /my-app/node_modules/rxjs-es/Rx.js: Unexpected token (174:9)
  172 | let Scheduler = {
  173 |     asap,
> 174 |     async,
      |          ^
  175 |     queue,
  176 |     animationFrame
  177 | };

The only workaround I have so far is to use the cjs version of rxjs.

[HighOnDrive]

Having same issue using Atom and the latest node/npm versions on OS X. Thought I'd run a properly configured project like rxjs-app (https://www.npmjs.com/package/rxjs-app) to resolve the issue but I'm still getting the following similar error here as well:

ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'rxjs' in /.../rxjs-app/src
@ ./src/main.js 7:12-27

ERROR in ./lib/index.js
Module not found: Error: Cannot resolve module 'rxjs' in /.../rxjs-app/lib
@ ./lib/index.js 13:12-27

[xalexslx]

Any fix for this using grunt?

node_modules/rxjs-es/Rx.js:5
export { Subject } from './Subject';
^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/alexslx/socialcondo/sc-integration/socialcondo/external/superlogica/api.js:5:19)
    at Module._compile (module.js:541:32)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.