Vite: CommonJS Import with [email protected]

[Cjumelin]

Describe the bug

Actualy trying to import a dependencie :

import { composeWithDevTools } from 'remote-redux-devtools';

Who's exported like this in the node_modules :

'use strict';

exports.__esModule = true;
exports.composeWithDevTools = exports.default = undefined;

var _devTools = require('./devTools');

Object.defineProperty(exports, 'composeWithDevTools', {
  enumerable: true,
  get: function get() {
    return _devTools.composeWithDevTools;
  }
});

var _devTools2 = _interopRequireDefault(_devTools);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default = _devTools2.default;

And got this error from the browser (GoogleChrome) : Uncaught SyntaxError: The requested module '/@modules/remote-redux-devtools' does not provide an export named 'composeWithDevTools'

Reproduction

Working on.

System Info

    "@vue/compiler-sfc": "^3.0.0-beta.10",
    "vite": "^0.15.3"

macOS Catalina (V 10.15.1)
node -v > v12.16.3 also try v14.2.0
yarn -v > v1.22.4

[LinusBorg]

To clarify: the expectation would be that vite would convert this commonjs package to an esm module and thus the import should work?

Is this package in package.json -> dependencies: (and not dev or peerDependencies)? vitre only precompiles those.

[Cjumelin]

Yes, thats whate I expect :) !

remote-redux-devtools is in the devDependencies.

If i move it to dependencies, yarn debug -> (vite --debug) never launch the server and lock here :

yarn debug
yarn run v1.22.4
$ vite --debug
vite v0.15.3
  vite:resolve (node_module entry) redux -> redux/es/redux.js +0ms
  vite:resolve (node_module entry) redux-thunk -> redux-thunk/es/index.js +4ms
  vite:resolve (node_module entry) rxjs -> rxjs/_esm5/index.js +1ms
  vite:resolve (node_module entry) remote-redux-devtools -> remote-redux-devtools/lib/index.js +2ms
  vite:resolve (node_module entry) vue -> vue/dist/vue.runtime.esm-bundler.js +1ms
[vite] Optimizable dependencies detected.
Pre-bundling them to speed up dev server page load...
  (this will be run only when your dependencies have changed)

[Cjumelin]

Oops, after a while, an error comes up =>

<--- Last few GCs --->

[11119:0x104119000]   179057 ms: Scavenge 2036.5 (2052.5) -> 2032.9 (2052.5) MB, 3.6 / 0.0 ms  (average mu = 0.291, current mu = 0.260) allocation failure 
[11119:0x104119000]   179072 ms: Scavenge 2036.6 (2052.5) -> 2033.0 (2052.5) MB, 9.2 / 0.0 ms  (average mu = 0.291, current mu = 0.260) allocation failure 
[11119:0x104119000]   179085 ms: Scavenge 2036.7 (2052.5) -> 2033.2 (2060.5) MB, 7.8 / 0.0 ms  (average mu = 0.291, current mu = 0.260) allocation failure 


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x100bc59ef node::Abort() (.cold.1) [/usr/local/Cellar/node/14.2.0/bin/node]
 2: 0x1000815b1 node::FatalError(char const*, char const*) [/usr/local/Cellar/node/14.2.0/bin/node]
 3: 0x10008171a node::OnFatalError(char const*, char const*) [/usr/local/Cellar/node/14.2.0/bin/node]
 4: 0x100180b89 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/node/14.2.0/bin/node]
 5: 0x100180b33 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/node/14.2.0/bin/node]
 6: 0x1002a0f05 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/Cellar/node/14.2.0/bin/node]
 7: 0x1002a2268 v8::internal::Heap::MarkCompactPrologue() [/usr/local/Cellar/node/14.2.0/bin/node]
 8: 0x10029fc4f v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/Cellar/node/14.2.0/bin/node]
 9: 0x10029e41a v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/Cellar/node/14.2.0/bin/node]
10: 0x1002a63dc v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/Cellar/node/14.2.0/bin/node]
11: 0x1002a6432 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/Cellar/node/14.2.0/bin/node]
12: 0x100284485 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/Cellar/node/14.2.0/bin/node]
13: 0x1004e7e16 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/Cellar/node/14.2.0/bin/node]
14: 0x100750199 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/Cellar/node/14.2.0/bin/node]
15: 0x10075100d Builtins_StringAdd_CheckNone [/usr/local/Cellar/node/14.2.0/bin/node]
16: 0x3b3298a6adb4 
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[jtidwe11]

I recently came across this issue as well.

npx create-vite-app vite-test
npm i electron-store
npm run dev

No need to add any more code or import, it won't launch and eventually throws the stack trace error similar to the one above. In fact, I get another wall of heap errors if I wait a few more minutes.

I only planned on requiring this in electron's main process, so contrary to @Cjumelin, I'd expect it to be ignored; or at least, a way to configure it to be ignored.

Moving it to a devDependency does resolve this.

node 13.13.0
windows 10 64 bit v1909

[yyx990803]

Currently we need to explicitly list named exports for CommonJS modules to support named imports (if no named exports are provided, you can only import it as a default import and get an object which is what you'd get from a require() call).

We can auto detect named exports to a certain extent, which I will try to fix Monday; also from what I saw the next minor release of @rollup/plugin-commonjs is supposed to take care of that automatically.

[robsontenorio]

It is similar to #174

[ais-one]

Sorry, this happened...

https://github.com/vuejs/vite/issues/184

[yyx990803]

Closing as wontfix since remote-redux-devtools seems to be a CommonJS module that Rollup simply cannot handle.

Vite will not go out of its way to support arbitrary CommonJS deps, and I think for a new tool like Vite, we should take the opportunity to push users to prefer ESM compatible libraries and move the ecosystem forward.

[mekkj98]

I had same problem with redux-devtools-extension. I was able to tackle the error by doing following.

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
import devTool from 'redux-devtools-extension';

const store = createStore( rootReducer, devTool.composeWithDevTools(
    applyMiddleware(thunk)
))

export default store;

So instead of importing composeWithDevTools. I imported default export as devTool and then called devTool.composeWithDevTools.

Also you have to add the package in vite.config.js file like this -> optimizeDeps : { include : ["redux-devtools-extension"] }