csv-parse@5 is not usable with webpack@5 with esm syntax

[CarterLi]

Describe the bug

csv-parse specifies

{
  "exports": {
    ".": {
      "import": "./lib/index.js",
      "require": "./dist/cjs/index.cjs"
    },
    "./sync": {
      "import": "./lib/sync.js",
      "require": "./dist/cjs/sync.cjs"
    }
  }
}

which is problematic. If I import csv-parse with

import { parse as csvParse } from 'csv-parse/sync';

results in

Module not found: Error: Can't resolve 'stream' in '/Users/carter/log-analysis/node_modules/.pnpm/csv-parse@5.0.1/node_modules/csv-parse/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

which forces me installing the stream polyfill

If I import csv-parse with

import { parse as csvParse } from 'csv-parse/dist/esm/sync';

results in

Module not found: Error: Package path ./dist/esm/sync is not exported from package /Users/carter/log-analysis/node_modules/csv-parse (see exports field in /Users/carter/log-analysis/node_modules/csv-parse/package.json)

because /dist/esm/sync is not exported

To Reproduce

import { parse as csvParse } from 'csv-parse/sync';

Additional context

csv-parse@5.0.1
webpack@5.64.1

[AdamGaskins]

I'm having this exact problem, but in a nodejs app.

My node version is 16.13.0. I'm using require syntax instead of import above, but I'm getting similar error messages.

const parse = require('csv-parse/lib/sync')
// Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/sync' is not defined by "exports" in package.json

const parse = require('csv-parse/sync')
parse( ... )
// TypeError: parse is not a function

[wdavidw]

@AdamGaskins Please refer to the CommonJS documentation of CSV parse.

[wdavidw]

The latest versions shall fix this problem. I have update the browser ESM documentation and a new webpack demo is now available in the repository.

Closing, feel free to re-open if the problem persist.

[CarterLi]

localhost link?

[wdavidw]

@CarterLi comment updated

[richardeschloss]

Hi, I appreciate your help with this. 5.0.3 introduces the following deprecation warning: (tested against Node LTS)

(node:24719) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./browser/esm/" in the "exports" field module resolution of the package at [...] imported from [...] Update this package.json to use a subpath pattern like "./browser/esm/*".

[CarterLi]

Thanks for your help. but the latest change doesn't work well with TypeScript

Compiled with problems:

ERROR in src/views/data-manage/dictionary-manage/create-edit-modal/create-edit-modal.ts:1:35

TS2307: Cannot find module 'csv-parse/browser/esm/sync' or its corresponding type declarations.
  > 1 | import { parse as csvParse } from 'csv-parse/browser/esm/sync';
      |                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 | import { Form } from 'element-ui';
    3 |
    4 | import { DictionaryApi } from '@/apis';

Can be work around with:

declare module 'csv-parse/browser/esm/sync' {
  export * from 'csv-parse/dist/esm/sync';
}

Why not export csv-parse/dist/* directly?

[moltar]

Same issue as @CarterLi :/

Cannot get this to work with TS.

[richardeschloss]

For what it's worth, would it be useful to add to the github workflows to check for typescript compilation errors?

[wdavidw]

@richardeschloss every package has a ./test/api.types.ts and a ./test/api.types.sync.ts test file.

[wdavidw]

This thread is not TypeScript related. Please open another issue of TS.

[wdavidw]

Does anyone still has issue with webpack and JavaScript or is that part now working (despite the ./browser/esm/* deprecation warning)?

[CarterLi]

It should work with pure JavaScript + webpack. I'm closing this

[ahwitz]

One note to anyone still running into this: the documentation still says:

import {stringify} from 'csv-stringify/browser/esm/index.js';
// Or
import {stringify} from 'csv-stringify/browser/esm/sync.js';

...and including the .js bit at the end will cause Webpack to complain in some cases, because package.json exports it without the .js suffix.

[wdavidw]

Please propose enhancements to our webpack demos if you believe we missed something: https://github.com/adaltas/node-csv/tree/master/demo

[douglasg14b]

import { parse } from 'csv-parse/dist/esm/sync.js';

Just results in:

12:31:50 PM [vite] Internal server error: Missing "./dist/esm/sync.js" export in "csv-parse" package

It doesn't work :tm: