Errors when importing DeferredContent, Inplace and Chart

[christian-hess-94]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
Please fork the codesandbox below and create a case demonstrating your bug report. Issues without a codesandbox have much less possibility to be reviewed.

https://codesandbox.io/s/primereact-test-nlegb

Current behavior
I'm experiencing the bugs described below in any project that I use PrimeReact. Currently I'm trying to use the quickstart project. I have posted this in the quickstart github but I noticed that there are very few posts there. I have imported these same features on other starter projects and recieved the same errors. I tried cloning the quickstart and the errors kept coming so I will post the same thing I posted in the quickstart github page.

NodeJS version: 10.15.1
Primereactimport.js is a file I created with all the exports for primereact. I know it is not recomended but I'm doing this to ease my learning into primereact. The contents of the file are at the end of this message.
I had problems with fullcalendar, inplace, but currently the bug says this:

./src/primereactimport.js
Cannot find file: 'DeferredContent.js' does not match the corresponding name on disk: '.\node_modules\primereact\deferredcontent.js'.

Upon inspecting my node_modules folder, there is no "deferedcontent" inside, which triggers the error.
Line that calls DeferredContent:

export { DeferredContent } from 'primereact/DeferredContent';

##################################################
If I comment the line that exports the DefferedContent, I get this error:

./node_modules/primereact/components/chart/Chart.js
Module not found: Can't resolve 'chart.js/src/chart.js' in 'C:\Users\christian.hess\Documents\Projects\siga\primereact-quickstart-master\node_modules\primereact\components\chart'

In this case there is a folder inside primereact/component/chat, with a Chat.js file inside. I have manually installed chat.js as described in my package.json file below.

Line that calls Chart:

export { Chart } from 'primereact/chart';

Solution:

Following the steps on #913 and reinstalling chart.js did the trick.
##################################################
If I also comment the Chart line, I get an error with Inplace:

./src/primereactimport.js
Module not found: Can't resolve 'primereact/inplace' in 'C:\Users\christian.hess\Documents\Projects\siga\primereact-quickstart-master\src'

Line that calls Inplace:

export { Inplace } from 'primereact/inplace';

##################################################
If I comment all these lines, the project compiles.

This is my ** package.json** file:

{
  "name": "primereact-quickstart",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "chart.js": "^2.7.1",
    "classnames": "^2.2.6",
    "fullcalendar": "^3.10.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "primeflex": "^1.0.0-rc.1",
    "primeicons": "1.0.0",
    "primereact": "3.0.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.3",
    "react-transition-group": "^1.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Primereactimport.js is a file I created with all the exports for primereact. I know it is not recomended but I'm doing this to ease my learning into primereact.

//Inputs
export { AutoComplete } from 'primereact/autocomplete';
export { Checkbox } from 'primereact/checkbox';
export { Chips } from 'primereact/chips';
//export { Editor } from 'primereact/editor';
export { InputText } from 'primereact/inputtext';
export { MultiSelect } from 'primereact/multiselect';
export { RadioButton } from 'primereact/radiobutton';
export { SelectButton } from 'primereact/selectbutton';
export { Spinner } from 'primereact/spinner';
export { ToggleButton } from 'primereact/togglebutton';
export { Calendar } from 'primereact/calendar';
export { ColorPicker } from 'primereact/colorpicker';
export { Dropdown } from 'primereact/dropdown';
export { InputMask } from 'primereact/inputmask';
export { InputSwitch } from 'primereact/inputswitch';
export { InputTextarea } from 'primereact/inputtextarea';
export { ListBox } from 'primereact/listbox';
export { Password } from 'primereact/password';
export { Rating } from 'primereact/rating';
export { Slider } from 'primereact/slider';
export { TriStateCheckbox } from 'primereact/tristatecheckbox';

//Button
export { Button } from 'primereact/button';
export { SplitButton } from 'primereact/splitbutton';

//Data
export { DataView, DataViewLayoutOptions } from 'primereact/dataview';
export { DataScroller } from 'primereact/datascroller';
export { FullCalendar } from 'primereact/fullcalendar';
export { OrganizationChart } from 'primereact/organizationchart';
export { PickList } from 'primereact/picklist';
export { TreeTable } from 'primereact/treetable';
export { DataTable } from 'primereact/datatable';
export { GMap } from 'primereact/gmap';
export { OrderList } from 'primereact/orderlist';
export { Paginator } from 'primereact/paginator';
export { Tree } from 'primereact/tree';

//Panel
export { Accordion, AccordionTab } from 'primereact/accordion';
export { DeferredContent } from 'primereact/DeferredContent';
export { Panel } from 'primereact/panel';
export { ScrollPanel } from 'primereact/scrollpanel';
export { Toolbar } from 'primereact/toolbar';
export { Card } from 'primereact/card';
export { Fieldset } from 'primereact/fieldset';
export { TabView, TabPanel } from 'primereact/tabview';

//Overlay
export { Dialog } from 'primereact/dialog';
export { OverlayPanel } from 'primereact/overlaypanel';
export { Lightbox } from 'primereact/lightbox';
export { Sidebar } from 'primereact/sidebar';

//File
export { FileUpload } from 'primereact/fileupload';

//Menu
export { TabMenu } from 'primereact/tabmenu';
export { TieredMenu } from 'primereact/tieredmenu';
export { ContextMenu } from 'primereact/contextmenu';
export { Steps } from 'primereact/steps';
export { SlideMenu } from 'primereact/slidemenu';
export { Menu } from 'primereact/menu';
export { Breadcrumb } from 'primereact/breadcrumb';
export { Menubar } from 'primereact/menubar';
export { PanelMenu } from 'primereact/panelmenu';
export { MegaMenu } from 'primereact/megamenu';

//Chart
export { Chart } from 'primereact/chart';

//Messages
export { Messages } from 'primereact/messages';
export { Message } from 'primereact/message';
export { Growl } from 'primereact/growl';

//Misc
export { ProgressBar } from 'primereact/progressbar';
//export { Inplace } from 'primereact/inplace';
export { Captcha } from 'primereact/captcha';
export { ProgressSpinner } from 'primereact/progressspinner';

Expected behavior
I would like the project to build fully.

Minimal reproduction of the problem with instructions
Simply installed ReactJS from the official guide, using chocolatey, then cloning the react-quickstart repository. After that, installing the dependencies with npm install --save and npm start to run.

Please tell us about your environment:
Windows 10,
VSCode
Behind a proxy but I have access through it as I'm a developer in my company.

• React version:
  As stated in my package.json file, the version for ReactJS is 16.8.6

• PrimeReact version:
  As stated in my package.json file, the version for PrimeReact is 3.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Currently only tested in Google Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  ES6 only

[mertsincan]

Please try the latest PrimeReact version.

Similar issue; #913

Best Regards,

[christian-hess-94]

@mertsincan

Please try the latest PrimeReact version.

Similar issue; #913

Best Regards,

Thank for the quick reply. I looked for the line that was mentioned in the post, but I couldn't find it.
The only line remotely alike is this one:

var _chart = _interopRequireDefault(require("chart.js/src/chart.js"));

which I changed to:

var _chart = _interopRequireDefault(require("chart.js/dist/chart.js"));

The error still appears:

./node_modules/primereact/components/chart/Chart.js
Cannot find file: 'chart.js' does not match the corresponding name on disk: '.\node_modules\chart.js\dist\Chart.js'.

I noted that the version used by OP in #913 is 2.0.1, and I'm using version 3.0.0.

[christian-hess-94]

Actually nevermind, I reinstalled chart.js again, and it worked for some reason.

However there are still the erros when importing Inplace and DeferredContent. Could you help me with those aswell?

[mertsincan]

Thanks a lot for the update!

Please use export { DeferredContent } from 'primereact/deferredContent'; instead of export { DeferredContent } from 'primereact/DeferredContent';

[mertsincan]

We don't have a shortcut for inplace. For now, please use;
export { Inplace } from 'primereact/components/inplace/Inplace';

I'll fix it for next release.

[mertsincan]

Issue #943

Best Regards,