Non-Critical Error when using react-time-picker

[atengberg]

I needed a time input so initially was going to use: https://www.npmjs.com/package/react-time-picker however, when I try to do the basic example I get the following console error:

Uncaught Error: Dynamic require of "~/node_modules/react-clock/dist/Clock.css" is not supported
    __require chunk-ACCAMVX6.js:12
    js entry.js:8
    __require2 chunk-ACCAMVX6.js:18
    <anonymous> react-time-picker:1
[chunk-ACCAMVX6.js:12:9](http://localhost:3000/node_modules/.vite/deps/chunk-ACCAMVX6.js?v=7a9889ac)
    __require chunk-ACCAMVX6.js:12
    js entry.js:8
    __require2 chunk-ACCAMVX6.js:18
    <anonymous> react-time-picker:1
    InnerModuleEvaluation self-hosted:2325
    InnerModuleEvaluation self-hosted:2325
    InnerModuleEvaluation self-hosted:2325
    InnerModuleEvaluation self-hosted:2325
    evaluation self-hosted:2286

Not that this is critical thing, there are many ways to add time inputs, but in case it reflects a more significant issue I thought I'd post the issue here.

[atengberg]

Slightly different, but related, another error of type I get is:

Loading module from “http://localhost:3000/node_modules/.vite/deps/react-rainbow-components.js?v=cbb452ca” was blocked because of a disallowed MIME type (“”).

But this has to do with limitations on how the asset canister can serve?

[MioQuispe]

I needed a time input so initially was going to use: https://www.npmjs.com/package/react-time-picker however, when I try to do the basic example I get the following console error:

Uncaught Error: Dynamic require of "~/node_modules/react-clock/dist/Clock.css" is not supported
    __require chunk-ACCAMVX6.js:12
    js entry.js:8
    __require2 chunk-ACCAMVX6.js:18
    <anonymous> react-time-picker:1
[chunk-ACCAMVX6.js:12:9](http://localhost:3000/node_modules/.vite/deps/chunk-ACCAMVX6.js?v=7a9889ac)
    __require chunk-ACCAMVX6.js:12
    js entry.js:8
    __require2 chunk-ACCAMVX6.js:18
    <anonymous> react-time-picker:1
    InnerModuleEvaluation self-hosted:2325
    InnerModuleEvaluation self-hosted:2325
    InnerModuleEvaluation self-hosted:2325
    InnerModuleEvaluation self-hosted:2325
    evaluation self-hosted:2286

Not that this is critical thing, there are many ways to add time inputs, but in case it reflects a more significant issue I thought I'd post the issue here.

Hey this seems like a problem with the library itself. Found this issue:
wojtekmaj/react-time-picker#125
You could try to do something similar in the vite.config.ts to fix it.

[MioQuispe]

Slightly different, but related, another error of type I get is:

Loading module from “http://localhost:3000/node_modules/.vite/deps/react-rainbow-components.js?v=cbb452ca” was blocked because of a disallowed MIME type (“”).

But this has to do with limitations on how the asset canister can serve?

When does this occur? Are you doing a dynamic import or anything out of the ordinary?

[atengberg]

Ahh thank you! I looked but am not as familiar with configuring vite/webpack etc so thank you.

As for the second thing, I tried two or three time input libraries and actually had that same error. In the code quoted above ("disallowed MIME type), I was using React Rainbow components' time-picker: https://react-rainbow.io/#/TimePicker

To recreate here's what I did: first yarn add react-rainbow-components
Then in React component: import { TimePicker } from 'react-rainbow-components';

Then just try and use <TimePicker ... /> eg something like:

    <TimePicker
        id="time-picker-1"
        value={state.time}
        label="TimePicker Label"
        onChange={value => setState({ time: value })}
        style={containerStyles}
        className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
    />

And then I got the error above (disallowed MIME type). Additionally one or two other time-input libraries I tried also did not work for the same reason--I should have marked which ones, (sorry), but my history makes me think this one of them: https://github.com/arqex/react-datetime that also wouldn't work, doing the basic/minimal example to see if I could get it working, failing with the same error.

Thanks again for pointing out how to get the first one working!

[atengberg]

I don't know if this is the fix, but it seemed to resolve the same issue when I went to use react-collapse. In vite.config.js, editing:

    fs: {
      allow: ["."],
    },

to [".."] seems to have fixed the problem for now. Following from the docs @ https://vitejs.dev/config/#server-fs-allow I tried using rainbow-components again, but this did not fix that for that library.

[atengberg]

I believe the problem may be due to the fact I was using yarn instead of npm.

Switching to a fresh install to see if I could get around the problem I was running into would also fail to build. I double checked and upgraded my dfx version to 0.10.1 yet following the installation instructions it would fail at dfx deploy (after using yarn install). I thought the two were largely interchangeable, but noticing the deploy failed for the same library as the yarn install gave me a warning about, though I should double check it wasn't yarn and that was the issue... using npm works fine, but using yarn instead fails. Specifically, after npx ic-create-app@latest yarn install will output:

yarn install v1.22.19
warning package.json: No license field
info No lockfile found.
warning ic.doyou@0.0.0: No license field
[1/4] Resolving packages...
warning @vitejs/plugin-react-refresh@1.3.6: This package has been deprecated in favor of @vitejs/plugin-react
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > @dfinity/agent@0.11.3" has unmet peer dependency "@dfinity/candid@^0.11.3".
warning " > @dfinity/agent@0.11.3" has unmet peer dependency "@dfinity/principal@^0.11.3".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 10.88s.

will cause dfx deploy to error out with:

Stderr:
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
'PipeArrayBuffer' is not exported by node_modules/@dfinity/candid/lib/esm/index.js, imported by node_modules/@dfinity/agent/lib/esm/canisterStatus/index.js
file: ~/node_modules/@dfinity/agent/lib/esm/canisterStatus/index.js:2:20
1: /** @module CanisterStatus */
2: import { lebDecode, PipeArrayBuffer } from '@dfinity/candid';
                       ^
3: import { Principal } from '@dfinity/principal';
4: import { Cbor, Certificate, toHex } from '..';
error during build:
Error: 'PipeArrayBuffer' is not exported by node_modules/@dfinity/candid/lib/esm/index.js, imported by node_modules/@dfinity/agent/lib/esm/canisterStatus/index.js
    at error (~/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (~/node_modules/rollup/dist/shared/rollup.js:12555:16)
    at Module.traceVariable (~/node_modules/rollup/dist/shared/rollup.js:12914:29)
    at ModuleScope.findVariable (~/node_modules/rollup/dist/shared/rollup.js:11566:39)
    at ReturnValueScope.findVariable (~/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at ChildScope.findVariable (~/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at Identifier.bind (~/node_modules/rollup/dist/shared/rollup.js:7553:40)
    at NewExpression.bind (~/node_modules/rollup/dist/shared/rollup.js:5383:23)
    at CallExpression.bind (~/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at CallExpression.bind (~/node_modules/rollup/dist/shared/rollup.js:9049:15)

Whereas another fresh install using npm install will output:

npm WARN deprecated @vitejs/plugin-react-refresh@1.3.6: This package has been deprecated in favor of @vitejs/plugin-react

added 140 packages, and audited 141 packages in 18s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

And dfx start and successfully deploys. I'm guessing this might be the source of the above problems as well, sorry I didn't specify I was using yarn and hope I didn't cause you wasted time. I'll close out this issue and if a similar problem reappears when using npm I'll start a new one with better record of the steps to reproduce. Thanks again for the awesome starter package library!

[MioQuispe]

I believe the problem may be due to the fact I was using yarn instead of npm.

Switching to a fresh install to see if I could get around the problem I was running into would also fail to build. I double checked and upgraded my dfx version to 0.10.1 yet following the installation instructions it would fail at dfx deploy (after using yarn install). I thought the two were largely interchangeable, but noticing the deploy failed for the same library as the yarn install gave me a warning about, though I should double check it wasn't yarn and that was the issue... using npm works fine, but using yarn instead fails. Specifically, after npx ic-create-app@latest yarn install will output:

yarn install v1.22.19
warning package.json: No license field
info No lockfile found.
warning ic.doyou@0.0.0: No license field
[1/4] Resolving packages...
warning @vitejs/plugin-react-refresh@1.3.6: This package has been deprecated in favor of @vitejs/plugin-react
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > @dfinity/agent@0.11.3" has unmet peer dependency "@dfinity/candid@^0.11.3".
warning " > @dfinity/agent@0.11.3" has unmet peer dependency "@dfinity/principal@^0.11.3".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 10.88s.

will cause dfx deploy to error out with:

Stderr:
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
'PipeArrayBuffer' is not exported by node_modules/@dfinity/candid/lib/esm/index.js, imported by node_modules/@dfinity/agent/lib/esm/canisterStatus/index.js
file: ~/node_modules/@dfinity/agent/lib/esm/canisterStatus/index.js:2:20
1: /** @module CanisterStatus */
2: import { lebDecode, PipeArrayBuffer } from '@dfinity/candid';
                       ^
3: import { Principal } from '@dfinity/principal';
4: import { Cbor, Certificate, toHex } from '..';
error during build:
Error: 'PipeArrayBuffer' is not exported by node_modules/@dfinity/candid/lib/esm/index.js, imported by node_modules/@dfinity/agent/lib/esm/canisterStatus/index.js
    at error (~/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (~/node_modules/rollup/dist/shared/rollup.js:12555:16)
    at Module.traceVariable (~/node_modules/rollup/dist/shared/rollup.js:12914:29)
    at ModuleScope.findVariable (~/node_modules/rollup/dist/shared/rollup.js:11566:39)
    at ReturnValueScope.findVariable (~/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at ChildScope.findVariable (~/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at Identifier.bind (~/node_modules/rollup/dist/shared/rollup.js:7553:40)
    at NewExpression.bind (~/node_modules/rollup/dist/shared/rollup.js:5383:23)
    at CallExpression.bind (~/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at CallExpression.bind (~/node_modules/rollup/dist/shared/rollup.js:9049:15)

Whereas another fresh install using npm install will output:

npm WARN deprecated @vitejs/plugin-react-refresh@1.3.6: This package has been deprecated in favor of @vitejs/plugin-react

added 140 packages, and audited 141 packages in 18s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

And dfx start and successfully deploys. I'm guessing this might be the source of the above problems as well, sorry I didn't specify I was using yarn and hope I didn't cause you wasted time. I'll close out this issue and if a similar problem reappears when using npm I'll start a new one with better record of the steps to reproduce. Thanks again for the awesome starter package library!

Thanks for the info. Seems you need to add @dfinity/candid as a dependency for yarn to work. ill keep it open until I've updated the templates.