Build a Modern JS Project - #7 Components & Styling

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@cristianscript5649]

which is the page to see the pros and cost for styling strategies?

[@byurhanbeyzat]

When will come next video with MERN + Graphql stack?

[@CodeRealm]

This weekend.

[@magnifico689]

👍before watch 💪

[@hamodeyDooba]

why u use rollup not webpack ?

[@CodeRealm]

Rollup is better suited for libraries.

[@Richard-pp9jr]

rollup-plugin-string install
-------------------------------------------
npm i -D rollup-plugin-string
npm WARN @typescript-eslint/parser@1.10.2 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-import@2.17.3 requires a peer of eslint@2.x - 5.x but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react@7.13.0 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
+ rollup-plugin-string@3.0.0
updated 1 package and audited 2582 packages in 6.031s
found 0 vulnerabilities
Rollup config file
---------------------------------
import babel from "rollup-plugin-babel";
import resolve from "rollup-plugin-node-resolve";
import { terser } from "rollup-plugin-terser";
import string from "rollup-plugin-string";
const disttt = "dist";
const production = !process.env.ROLLUP_WATCH;
export default {
input: "src/index.js",
external: ["react"],
output: [
{
file: `${disttt}/bundle.cjs.js`,
format: "cjs"
},
{
file: `${disttt}/bundle.esm.js`,
format: "esm"
},
{
name: "ReactCssSpinners",
file: "dist/bundle.umd.js",
globals: {
react: "React"
},
format: "umd"
}
],
plugins: [
resolve,
babel({
exclude: "node_modules/**"
}),
string({ include: "**/*.css" }),
production && terser()
]
};
Errors from npm run build
-----------------------------------------
> rollup -c
[!] TypeError: string is not a function
TypeError: string is not a function
at Object. (CXXX
eact-css-myspinner
ollup.config.js:40:5)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.require.extensions..js (C:\XXXreact-css-myspinner
ode_modules
ollup\bin
ollup:1036:24)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at rollup__default.rollup.then.then (C:XXXreact-css-myspinner
ode_modules
ollup\bin
ollup:1043:32)
at process._tickCallback (internal/process/next_tick.js:68:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-css-myspinner@1.0.0 build: `rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-css-myspinner@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users
icki\AppData\Roaming
pm-cache\_logs\2019-06-23T13_08_58_339Z-debug.log
This is the index.js file
-----------------------------------
export * from "./ripple";
export * from "./ring";
export * from "./ellipsis";
Why on earth is it saying string is not defined. I think it is because the plugin has not been installed properly because of dependancies but I am not sure. Thanks for your time in advance.

[@Richard-pp9jr]

that problem I think I solved. import { string } from "rollup-plugin-string"; instead of import string from "rollup-plugin-string";
This is the index.js file
-----------------------------------
export * from "/ripple";
export * from "./ring";
export * from "./ellipsis";
this produce error.
/ripple (imported by src\index.js)
[!] Error: Could not resolve './ring' from src\index.js
Error: Could not resolve './ring' from src\index.js
at error (C:XXX
eact-css-myspinner
ode_modules
ollup\dist
ollup.js:9396:30)
at ModuleLoader.handleMissingImports (C:XXX
eact-css-myspinner
ode_modules
ollup\dist
ollup.js:16394:17)
at ModuleLoader. (C:XXX
eact-css-myspinner
ode_modules
ollup\dist
ollup.js:16445:26)
at Generator.next ()
at fulfilled (C:XXX
eact-css-myspinner
ode_modules
ollup\dist
ollup.js:15426:28)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:832:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-css-myspinner@1.0.0 build: `rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-css-myspinner@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users
icki\AppData\Roaming
pm-cache\_logs\2019-06-23T14_03_48_872Z-debug.log
solved by removing dot export * from "./ripple"; export * from "/ripple";

[@CodeRealm]

Oh yes, since I made the series, Rollup v1 came out, and some plugins changed their API after bumping the major version