Unable to import the library in Create React App

[ncnxx]

I came up with this error when trying to start a project from "create-react-app". This has never happened before until I updated the design-system-react to the latest version.

./node_modules/@salesforce/design-system-react/components/index.js
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| /* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
| export SLDSSettings from './settings';
| export Settings from './settings';
|

[interactivellama]

Did you recently switch to the NPM module?

Are you using the CommonJS and the ES6 API from the readme? It looks like you aren't using the CommonJS version. That would give you Unexpected token issues.

[ncnxx]

Thanks for the reply.

I tried using this library with a fresh npx create-react-app my-app project. This is what inside the package.json file.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@salesforce-ux/design-system": "^2.5.2",
    "@salesforce/design-system-react": "^0.8.7",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Then, I imported the Button component the same way as described in the readme.

import { Button } from '@salesforce/design-system-react';

The error showed in the log was:

./node_modules/@salesforce/design-system-react/components/index.js
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| /* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
| export SLDSSettings from './settings';| export Settings from './settings';
|

Thank you.

[ncnxx]

I also tried the ES6 way.

import Button from '@salesforce/design-system-react/components/button';

which gave the result:

./node_modules/@salesforce/design-system-react/components/button/index.jsx
Module parse failed: Unexpected token (228:3)  
You may need an appropriate loader to handle this file type.  
|                               : this.props.iconSize;
|               return (
|                       <ButtonIcon|                               category={this.props.iconCategory}
|                               className={classNames(

[interactivellama]

I'm guessing this is because CRA recently added support for ES6 modules but not other ES2015+ features this library uses, which means that DSR 0.8.7 would work prior to facebook/create-react-app#3776 being merged in. You might try an older version of CRA until I can figure out what to do. CRA can use modules, but not DSR's components/index.js:

our package.json from the npm

"main": "lib/components/index.js", // CommonJS that is compatible with CRA
"module": "components/index.js", // ES6 modules + Stage 1 features, etc.

It's no long term solution, but if you hack it yourself and change module to lib/components/index.js locally in your project I think it will work.

For more info on our NPM module:
#1146 (comment)

[ncnxx]

Thank you interactivellama.

I have found one way to workaround this issue by importing the components with lib as:
import Button from '@salesforce/design-system-react/lib/components/button';

In the meantime, I might find a way to have create-react-app to transpile the node_modules.

[tswardenski]

You can get around this issue entirely by referencing the github repo in your package.json like so:

"@salesforce/design-system-react": "git+ssh://git@github.com:salesforce/design-system-react.git#v0.8.7"

[interactivellama]

Thanks Todd.

To everyone, here's the other code area to add to update https://github.com/salesforce/design-system-react/blob/master/scripts/dist.sh#L95 besides changing the package.module if anyone wants to jump on this before I get around to it.

The main question is where/what folder do we put a third copy or if there is another way around this?/lib-es6?

[interactivellama]

package.json module key was removed and will stay removed until ES6 modules are shipped in NPM.

3c120d4#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

I'm calling this fixed in latest realease, since the CJS modules work, but still looking at #1300 to implement ES6 modules as a feature.

[Randore]

@nutchanon-pho Thank you, now the library is imported but someone please help me how to apply styles to the example button.
I can say that may be good developers have implemented this salesforce lightning and lightning-React frameworks but bad documentation is killing it.
There is no proper import and use cases.

Go and check bootstrap documentation > getting started guide.
And check your getting started section.

After trying many times then only I am writing this post. Even this post is old still you guys didn't fixed this.

[Randore]

This is the worst installation guide I have seen so far for a popular lib.

http://www.lightningdesignsystem.com/downloads/
https://react.lightningdesignsystem.com/getting-started/

[Randore]

This worked for me.
https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app.md

[interactivellama]

@Randore What would help make the CRA readme more obvious? It's in the Table of Contents of the repo readme. Would a link on the doc site getting started page work?

[interactivellama]

@Randore I've taken the getting started page out of the closed-source doc site and put it in this repo, so that it can be iterated on by the community. #1437

Feel free to pull request to my pull request any suggestions you have to make the getting started page better.