stylelint-processor-styled-components | Lint your styled components with stylelint | Code Analyzer library

I am trying to setup Storybook from scratch for a new project. I am hitting a wall and finding no useful information online around a babel/webpack issue that appears during build.

Note that I am able to correctly run Storybook locally, this issue only happens during build time.

The project has no webpack.config.js file as none came via the following commands.

How to diagnose further and fix the build issues?

Initial Set-up

• React Boilerplate: https://react-boilerplate.github.io/react-boilerplate-cra-template/
• Storybook out of the box set-up: https://storybook.js.org/docs/react/get-started/install

No issue running storybook locally

npm run storybook --debug-webpack

Im using style-lint for linting Scss files and styled-components (by using different styleint.config files).

Stylint seems to have an open issue when valid css is commentted out (https://github.com/styled-components/stylelint-processor-styled-components/issues/299).

Im ok with not using double-slash comments but the block comments instead ( /* block comment */ ) but I want consistency: css in styled-components and Scss files sharing same css syntax.

My thinking was to disallow double-slash comments for styled-component and Scss files.

I am seeing this issue 100% of the attempts at building webpack for production. I've tried the approach mentioned on the other similar StackOverflow issues which is NODE_OPTIONS=--max_old_space_size=8192

my build command is:

My work is making a React UI Kit/Component Library to be used internally for our products. Everything is working fine while developing and displaying on Storybook.

While testing the library in a generic project out-of-the-box from create-react-app, importing and implementing the components made without React Hooks are alright, but soon as we use the ones made with Hooks - the Invalid Hook Call error shows: https://reactjs.org/warnings/invalid-hook-call-warning.html

Have tried everything listed there(and read and tried the github thread solutions linked on the page), and the component simply used useRef() and nothing else so we know no rules were broken, React and React-dom versions are up to date, and running npm ls react and npm ls react-dom in the project results in react@16.10.2 and react-dom@16.10.2 and nothing else... So it doesn't seem like we have multiple React's?

Any help would be much appreciated!!

This is the UI Kit's package.json

Newbie here, so apologies in advance if I am overlooking something obvious or missed a duplicate posting (and also for not posting directly on styled-components, apparently I need a rep for that...) .

The closest I found to my problem was in this resolved issue, at the bottom of the thread: https://github.com/styled-components/styled-components/issues/213

The guy had a very similar problem, but the solution was brief and Typescript specific.

BACKGROUND: I have an index file that imports my components from all over, and exports them under a webpack alias. Whenever I need to import elsewhere I just declare:

I have an issue with reading Draft.js raw content from localStorage.

I would like to use previously stored rawContent as my initialState for the reducer.

I think convertFromRaw function is my problem. I does crush silently (does not log to the console) and I don't know how to troubleshoot this.

I'm persisting Draft.js raw content in localStorage:

I have a React.js project based on React-Boilerplate 3.7.0 and I'm using its own webpack configurations files, that is to say webpack.base.babel.js, webpack.dev.babel.js and webpack.prod.babel.js. I've been looking for a solution in the web for a while and I was unable to find a way to solve this. In https://gitter.im/webpack/webpack there is a banner saying:

For questions please post on Stack Overflow and use the 'webpack' tag

So here I'm, once again. Webpack compiles the project with no errors and no warnings in development (if I run npm start), but if I run npm run build or npm run-script build it tells me:

I'm installing stylelint-config-styled-components on a react project.

When I execute npm run lint:css (or use the stylelint command directly through the CLI) I don't get any results. I have intentionally put in extra spaces and duplicate style declarations, so there should definitely be some feedback from stylelint that I've broken rules. However, I'm getting nothing, not even an error message. Any ideas?

I have installed the following packages:

• stylelint 9.1.3
• stylelint-config-recommended 2.1.0
• stylelint-config-styled-components 0.1.1
• stylelint-processor-styled-components 1.3.1

I am using the following script in package.json: