How can I import lodash with svelte?

user_271873 0
Viewed 2308

I simply wanted to import lodash import _ from 'lodash';, and I keep having the following error:

rollup v2.23.0
bundles src/main.js → public\build\bundle.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (434:48) in C:\my-svelte\node_modules\lodash\lodash.js
node_modules\lodash\lodash.js (434:48)
432:
433:   /** Detect free variable `process` from Node.js. */
434:   var freeProcess = moduleExports && freeGlobal.process;
                                                     ^
435:
436:   /** Used to access faster Node.js helpers. */
SyntaxError: Unexpected token (434:48) in C:\my-svelte\node_modules\lodash\lodash.js
    at Object.pp$4.raise (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:15135:13)
    at Object.pp.unexpected (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:12906:8)
    at Object.pp$3.parseIdent (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:15086:10)
    at Object.parseIdent (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:18737:27)
    at Object.parseIdent (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:18969:27)
    at Object.pp$3.parseSubscript (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:14380:62)
    at Object.parseSubscript (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:18640:37)
    at Object.pp$3.parseSubscripts (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:14355:24)
    at Object.pp$3.parseExprSubscripts (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:14340:21)
    at Object.pp$3.parseMaybeUnary (C:\my-svelte\node_modules\rollup\dist\shared\rollup.js:14314:17)

I used npx degit sveltejs/template my-svelte to create the app.

I tried lodash-es as well, same thing: [!] (plugin commonjs) SyntaxError: Unexpected token (13:46) in C:\my-svelte\node_modules\lodash-es_nodeUtil.js.

This is definitely a lodash related issue, specifically related to that line 434. Everything else I tried to import works just fine:

import {v4} from 'uuid';
import {Subject} from "rxjs";
import ReconnectingWebSocket from 'reconnecting-websocket';
...

EDIT: The problem is caused by import replace from '@rollup/plugin-replace'; in rollup.config.js :(

Now I need to figure out how to get .env variables into Svelte without @rollup/plugin-replace...

rollupjs lodash svelte
2 Answers

I use lodash-es and works fine. I even get nice tree-shaking with that.

<script>
    import { upperCase } from 'lodash-es';
    export let name;
</script>

<p>{upperCase(name)}</p>
user_34689170

Edit

The answer was pretty old and code improves: my application now uses this to import lodash on a svelte file for quite a while - I hope it works for the OP also now:

import _ from "lodash";

Old Post (a commenter mentioned that this does not work anymore, for whatever reasons - I leave it just here)

This works for me in my svelte files:

<script>
  const _ = require('lodash');

  //...
</script>

I often get into trouble with import on my electron/svelte project but require usually helps.

user_1052240
Related