Unable to start frontend server for react template

[narayanacharya6]

Following the instructions from the videos here - https://docs.streamlit.io/library/components/create When I try to run the frontend server I run into the error with stacktrace below.

Stack trace:

 npm run start

> [email protected] start
> react-scripts start

(node:30148) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:30148) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Failed to compile.

Attempted import error: 'Type' is not exported from 'apache-arrow' (imported as 'Type').
asset static/js/bundle.js 1.64 MiB [emitted] (name: main) 1 related asset
asset index.html 944 bytes [emitted]
asset asset-manifest.json 190 bytes [emitted]
runtime modules 28.2 KiB 13 modules
modules by path ./node_modules/ 1.52 MiB 107 modules
modules by path ./src/*.tsx 8.37 KiB
  ./src/index.tsx 1.62 KiB [built] [code generated]
  ./src/DocComponent.tsx 4.05 KiB [built] [code generated]
  ./src/EntComponent.tsx 2.7 KiB [built] [code generated]

ERROR in ./node_modules/streamlit-component-lib/dist/ArrowTable.js 83:13-27
export 'Type' (imported as 'Type') was not found in 'apache-arrow' (module has no exports)
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/dist/ArrowTable.js 95:21-31
export 'Table' (imported as 'Table') was not found in 'apache-arrow' (module has no exports)
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/dist/ArrowTable.js 96:22-32
export 'Table' (imported as 'Table') was not found in 'apache-arrow' (module has no exports)
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/dist/ArrowTable.js 97:24-34
export 'Table' (imported as 'Table') was not found in 'apache-arrow' (module has no exports)
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/dist/ArrowTable.js 100:26-36
export 'Table' (imported as 'Table') was not found in 'apache-arrow' (module has no exports)
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/node_modules/apache-arrow/Arrow.dom.mjs 17:0-43
Module not found: Error: Can't resolve './io/adapters' in '/Users/narayan/Documents/dMetrics/Projects/elvis-streamlit-doc/doc_component/frontend/node_modules/streamlit-component-lib/node_modules/apache-arrow'
Did you mean 'adapters.mjs'?
BREAKING CHANGE: The request './io/adapters' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/streamlit-component-lib/dist/ArrowTable.js 17:0-43 83:13-27 95:21-31 96:22-32 97:24-34 100:26-36
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/node_modules/apache-arrow/Arrow.dom.mjs 18:0-42
Module not found: Error: Can't resolve './builder/index' in '/Users/narayan/Documents/dMetrics/Projects/elvis-streamlit-doc/doc_component/frontend/node_modules/streamlit-component-lib/node_modules/apache-arrow'
Did you mean 'index.mjs'?
BREAKING CHANGE: The request './builder/index' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/streamlit-component-lib/dist/ArrowTable.js 17:0-43 83:13-27 95:21-31 96:22-32 97:24-34 100:26-36
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/node_modules/apache-arrow/Arrow.dom.mjs 19:0-49
Module not found: Error: Can't resolve './ipc/reader' in '/Users/narayan/Documents/dMetrics/Projects/elvis-streamlit-doc/doc_component/frontend/node_modules/streamlit-component-lib/node_modules/apache-arrow'
Did you mean 'reader.mjs'?
BREAKING CHANGE: The request './ipc/reader' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/streamlit-component-lib/dist/ArrowTable.js 17:0-43 83:13-27 95:21-31 96:22-32 97:24-34 100:26-36
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/node_modules/apache-arrow/Arrow.dom.mjs 20:0-49
Module not found: Error: Can't resolve './ipc/writer' in '/Users/narayan/Documents/dMetrics/Projects/elvis-streamlit-doc/doc_component/frontend/node_modules/streamlit-component-lib/node_modules/apache-arrow'
Did you mean 'writer.mjs'?
BREAKING CHANGE: The request './ipc/writer' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/streamlit-component-lib/dist/ArrowTable.js 17:0-43 83:13-27 95:21-31 96:22-32 97:24-34 100:26-36
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/node_modules/apache-arrow/Arrow.dom.mjs 21:0-51
Module not found: Error: Can't resolve './io/whatwg/iterable' in '/Users/narayan/Documents/dMetrics/Projects/elvis-streamlit-doc/doc_component/frontend/node_modules/streamlit-component-lib/node_modules/apache-arrow'
Did you mean 'iterable.mjs'?
BREAKING CHANGE: The request './io/whatwg/iterable' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/streamlit-component-lib/dist/ArrowTable.js 17:0-43 83:13-27 95:21-31 96:22-32 97:24-34 100:26-36
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/node_modules/apache-arrow/Arrow.dom.mjs 22:0-62
Module not found: Error: Can't resolve './io/whatwg/builder' in '/Users/narayan/Documents/dMetrics/Projects/elvis-streamlit-doc/doc_component/frontend/node_modules/streamlit-component-lib/node_modules/apache-arrow'
Did you mean 'builder.mjs'?
BREAKING CHANGE: The request './io/whatwg/builder' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/streamlit-component-lib/dist/ArrowTable.js 17:0-43 83:13-27 95:21-31 96:22-32 97:24-34 100:26-36
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/node_modules/apache-arrow/Arrow.dom.mjs 23:0-71
Module not found: Error: Can't resolve './io/whatwg/reader' in '/Users/narayan/Documents/dMetrics/Projects/elvis-streamlit-doc/doc_component/frontend/node_modules/streamlit-component-lib/node_modules/apache-arrow'
Did you mean 'reader.mjs'?
BREAKING CHANGE: The request './io/whatwg/reader' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/streamlit-component-lib/dist/ArrowTable.js 17:0-43 83:13-27 95:21-31 96:22-32 97:24-34 100:26-36
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/node_modules/apache-arrow/Arrow.dom.mjs 24:0-71
Module not found: Error: Can't resolve './io/whatwg/writer' in '/Users/narayan/Documents/dMetrics/Projects/elvis-streamlit-doc/doc_component/frontend/node_modules/streamlit-component-lib/node_modules/apache-arrow'
Did you mean 'writer.mjs'?
BREAKING CHANGE: The request './io/whatwg/writer' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/streamlit-component-lib/dist/ArrowTable.js 17:0-43 83:13-27 95:21-31 96:22-32 97:24-34 100:26-36
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

ERROR in ./node_modules/streamlit-component-lib/node_modules/apache-arrow/Arrow.dom.mjs 29:0-2592
Module not found: Error: Can't resolve './Arrow' in '/Users/narayan/Documents/dMetrics/Projects/elvis-streamlit-doc/doc_component/frontend/node_modules/streamlit-component-lib/node_modules/apache-arrow'
Did you mean 'Arrow.mjs'?
BREAKING CHANGE: The request './Arrow' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/streamlit-component-lib/dist/ArrowTable.js 17:0-43 83:13-27 95:21-31 96:22-32 97:24-34 100:26-36
 @ ./node_modules/streamlit-component-lib/dist/index.js 18:0-42 18:0-42
 @ ./src/DocComponent.tsx 4:0-90 10:27-49 91:20-43
 @ ./src/index.tsx 6:0-42 9:33-45

9 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.65.0 compiled with 14 errors in 5203 ms

If this is helpful:

node --version
v16.13.1
npm --version
8.3.0

[Socvest]

I too am having this issue, any progress on this yet?

[tbhuy]

Me too

[mirfan899]

bump

[pierreHaslee]

I have the same problem, I think we need to downgrade npm quite a bunch to find a version with which these templates work

edit: I got the error after having done 'npm audit fix --force' as prompted by npm after my 'npm install' But if I run 'npm start' directly after the install, without doing the audit fix, then it works.

[asivonen]

I downgraded node to 16.16.0 and npm to 7.24.2 and then ran with --legacy-peer-deps. Worked for me. Hopefully this gets fixed soon, spent a good deal of time on this.

[marcjulianschwarz]

Still getting loads of errors when trying to use this template.

[sfc-gh-kbregula]

We released a new version of Streamlit Component Library v2.0 that addresses this issue Npm registry: https://www.npmjs.com/package/streamlit-component-lib Release notes: https://github.com/streamlit/streamlit/blob/develop/component-lib/RELEASE_NOTES.md