Please point to a common-js module in package.json's "main" field

[cam-narzt]

• I have provided steps to reproduce (e.g. a link to a jsfiddle)
• I have provided browser name, version and adapter.js version
• This issue only happens when adapter.js is used

Versions affected

Browser name including version (e.g. Chrome 64.0.3282.119)
N/A (testing environment).

adapter.js (e.g. 6.1.0)
webrtc-adapter node module version 7.2.3

Description

The main field in package.json does not point to a common-js module, rather an es6 module. This means that components that import it cannot be tested in a create-react-app app without "ejecting" the app, which is a lot of work.

More discussion here: facebook/create-react-app#7100

Steps to reproduce

run create-react-app to make a boiletplate project: npx create-react-app test && cd test
add webrtc-adapter npm module to project: npm install webrtc-adapter
add adapter to a component: echo "import adapter from 'webrtc-adapter';" | cat - src/App.js | tee src/App.js
write a basic test which tests the component that imported 'webrtc-adapter' (done already for you in boilerplate)
run tests npm test

Expected results

tests run

Actual results

tests blow up because the environment doesn't compile the es6 module to a common-js module.

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/me/Developer/Javascript/test/node_modules/webrtc-adapter/src/js/adapter_core5.js:12
    import {adapterFactory} from './adapter_factory.js';
           ^

    SyntaxError: Unexpected token {

    > 1 | import adapter from 'webrtc-adapter';
        | ^
      2 | import React from 'react';
      3 | import logo from './logo.svg';
      4 | import './App.css';

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (src/App.js:1:1)

[gabycperezdias]

Did you find a work around for this?

[fippo]

I think the right thing here will be to have main point to dist/adapter_core.js (which is the es5-transpiled version). @cam-narzt can you check that fixes the problem even in whatever production app you have?

[cam-narzt]

When I set "main" to "./dist/adapter_core.js", this is what I get:

 FAIL  src/components/Call.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'prototype' of undefined

      10 | 
      11 |     constructor(props) {
    > 12 |         super(props);
         | ^
      13 | 
      14 |         this.ice_candidates = [];
      15 |         this.remoteVideoRef = React.createRef();

      at Object.shimTrackEventTransceiver (node_modules/webrtc-adapter/dist/safari/safari_shim.js:278:150)
      at adapterFactory (node_modules/webrtc-adapter/dist/adapter_factory.js:147:18)
      at Object.<anonymous> (node_modules/webrtc-adapter/dist/adapter_core.js:18:51)
      at Object.<anonymous> (src/components/Call.js:12:1)
      at Object.<anonymous> (src/components/Call.test.js:3:1)

[cam-narzt]

A workaround I am using is to create an empty file at __mocks__/webrtc-adapter.js which prevents webrtc-adapter from loading in the test env.

[gabycperezdias]

@cam-narzt Sorry, I am not very familiar with the structure, where the mocks folder should be located?

[cam-narzt]

https://jestjs.io/docs/en/manual-mocks

[fippo]

when I set "main" to "./dist/adapter_core.js", this is what I get:

Hrm... setting it to the transpiled version (which is part of the dist) seems to resolve the ES6 error at least. The new error seems to go into the safari shim, are you testing using Safari or is this with phantomjs?

[cam-narzt]

@fippo it's the Jest test framework running on Node.js, I honestly don't know how it works internally.

[fippo]

should be fixed now