Please see https://github.com/gajus/babel-plugin-react-css-modules/issues/162 for full description of issue.
Git repo = https://github.com/basher/react-no-webpack
This is a simple POC / scaffold for a React UI lib without Webpack or Gulp but it must support CSS Modules + Sass.
I'm just trying to use Babel + Browserify.
And executing NPM scripts directly from "package.json".
I have a sample widget component that imports a CSS file, and another that imports a Sass file. The error happens when parsing the content of both CSS + Sass files - e.g. transpiler does not understand "." in the class selector.
Here's the specific error:
$ npm run watch
> react-no-webpack#1.0.0 watch C:\...path-to-project-folder...\react-no-webpack
> watchify ./src/index.js -o ./build/bundle.js -t babelify -v
C:\...path-to-project-folder...\react-no-webpack\src\lib\components\WidgetCSS\WidgetCSS.css:1
.widget {
^
ParseError: Unexpected token
Edit / Update:
I've done some more investigation, and have asked a question in react-css-modules repo too = https://github.com/gajus/react-css-modules/issues/268
ParseError: Unexpected token mean your babel not understand css syntax
react-css-modules module need transpiler css like webpack, read for more detail.
For your case you can use css-modulesify.
1) Install css modulesify
$ npm install --save css-modulesify
2) Update your package json script
"build": "browserify ./src/index.js -p [ css-modulesify -o ./build/main.css ] -o ./build/bundle.js -t babelify",
"watch": "watchify ./src/index.js -p [ css-modulesify -o ./build/main.css ] -o ./build/bundle.js -t babelify -v"
remember to include ./build/main.css to index.html for css.
Thanks #hendrathings - you are correct.
I must have misread the docs, or read about a non-webpack setup somewhere else. I've read so many articles recently that I have probably confused myself!
I have followed your suggestion - I'm now using css-modulesify.
I have a working example POC UI lib with minimal React + CSS Modules config, with both CSS and Sass syntax (using a couple of example PostCSS plugins). This can be found in my updated https://github.com/basher/react-no-webpack repo.
Related
I have sample installation of react-app and I got the following
Error: Failed to load parser '#typescript-eslint/parser' declared in '.eslintrc » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
after running
npm run lint -> eslint .
I don't use typescript in this project.
I tried to install it from scratch and got it again.
also tried to remove tslint from vscode plugin
You can add this to your .eslintignore file in the root of your project.
node_modules
create-react-app team will release a new version with that fix also
https://github.com/facebook/create-react-app/pull/8376
I had the same issue when trying to create a new react app today.
You can try the following steps:
Make sure you update your nodejs to the latest version
Make sure your folder path is short and does not contain spaces
Run: npm install -g create-react-app
Run: npm i --save-dev typescript #typescript-eslint/parser
Run: create-react-app my-app
Create React App adds eslint config to package.json, so you just have to add eslintIgnore with node_modules in package.json. A cleaner alternative to creating a separate file .eslintignore
// package.json
// ...
"eslintConfig": {
"extends": "react-app"
},
"eslintIgnore": [
"node_modules",
"build/*"
],
Most likely, you have this in your .eslintrc:
extends: react-app
It means the following rule is applied:
files: ['**/*.ts?(x)'],
parser: '#typescript-eslint/parser',
Which probably means you have *.ts/*.tsx files in your root folder. But maybe it's the vscode-eslint. Did you try to run yarn lint from the terminal?
Your error message says eslint is looking for typescript because of a setting in the file .eslintrc so try looking in that file for #typescript-eslint/parser and remove it.
I was removing typescript from a project and I got the same error because I had forgotten a typescript definition somewhere under the src folder... deleting the file fixed the issue.
In my case, I wanted typescript, but didn't get it installed.
This question still helped me figure out my problem which is described below.
I was watching a YouTube video, React Typescript Tutorial that explained how to get started with typescript and react, and the video said to run:
npx create-react-app cra-ts --typescript
This didn't work (but I didn't know it). As soon as I created a hello.ts file, I got the error the OP describes.
Error: Failed to load parser '#typescript-eslint/parser' declared in 'package.json » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
The fix was to use the command:
npx create-react-app myappts --template typescript
This used create-react-app#4.0.0 and react-scripts#4.0.0.
ProTip: If your newly created React App doesn't have a file named App.tsx, then you haven't actually created it correctly.
I am following this example for a quick intro to postcss:
https://www.sitepoint.com/an-introduction-to-postcss/
After installing postcss and autoprefixer globally, creating a styles.css file in the root of my project and running the following command:
postcss -u autoprefixer styles.css -d public
I get the error:
Plugin Error: Cannot find module 'styles.css'
Why does it think it is is a plugin error?
Had the same issue & found this related post: Autoprefixer errors with NPM (✖ Plugin Error: Cannot find module )
The command I ran is
postcss styles.css -d dist -u autoprefixer
As the related answer shows, -u now takes multiple plugins so the order has to be modified.
Also if you use that tutorial, the example of "display: flex;" is no longer useful as it will work "as is" across browsers. Instead use
::placeholder {
color: gray;
}
to test autoprefixer
As I'm using PropTypes from the react.js library and CreateClass i'm a bit worried that those 2 are deprecated on the next major version of react.js.
After updating to react v15 I'm getting the warnings about it. I've read that there is a script that can auto refactor it (extracting PropTypes to the new library) but can't find it now.
anyone tried that script and can share his / her experience with it? (and know where can i find it of course)
And how safe is it to keep my current syntax? what are the downsides beside losing the ability to migrate to v16 (fiber)
I believe you're looking for react-codemod which utilizes jscodeshift.
I just ran through this the other day, and here's the distilled version of what you'd need to do:
Install jscodeshift globally:
npm install -g jscodeshift
Clone the react-codemod repository:
git clone https://github.com/reactjs/react-codemod.git
Install the dependencies for react-codemod:
cd ./react-codemod
npm install
Change directories to your project:
cd ../my-project
Execute the code shift by specifying a transformation file:
Say we want to fix PropTypes, and our components are located in /my-project/src
jscodeshift -t ../react-codemod/transforms/React-PropTypes-to-prop-types.js ./src
To also include JSX extensions, use the extensions options:
jscodeshift -t ../react-codemod/transforms/React-PropTypes-to-prop-types.js ./src --extensions js,jsx
If all goes well, you should see jscodeshift processing N files:
I am trying for a jsx transformation. I've installed react-tool, react and reactify. I think reactify is a plugin for browserify and we don't need to install browserify if we have reactify. But when running the command browserify -t reactify public/js/flux/index.js > public/js/build/index.js , I'm getting an error of "browserify is not an internal or external command."
What would be the solution for this?
I've been trying to create a project that utilizes AngularJS, Browserify and Gulp for an excellent developer experience, one that produces a distributable 'module' (in Angular parlance). The idea being to have a self-documented project, like Angular Bootstrap, that also produces a consumable distribution for use in another application.
We've had great results with Gulp, but we're having trouble with browserify/browserify-shim. Also, unfortunately, most of the examples out there either don't use gulp, or use gulp-browserify, which has been blacklisted/ended.
We're including AngularJS and JQuery from Google CDN as <script> tags and have declared "angular" : "global:angular" and "jquery" : "global:$" in our browserify-shim config in package.json, but we're getting "cannot find module" when we try to user var angular = require('angular') and var $ = require('jquery') inside of our browserified-code (once it runs in the browser).
I've created a sample project that distills this down close to the minimum.
A sample repository of the code is available at
Once cloned, you would run 'npm install', then 'bower install', then 'gulp' from the root of the multi-browserify folder to generate the files and run the test server.
With gulp running, you can access the live HTML at http://:4000/gulp.html
Any help would be greatly appreciated - I'm wondering if we've come across a bug/issue with the intersection of gulp, browserify, vinyl-source-stream, etc, or more likely, we just don't quite get it yet.
Is retrieving your dependencies from a CDN a requirement? If not, you could use npm for your dependencies and let browserify magic them up for you.
JQuery and Angular are available via npm, so using jquery as an example you could just declare it in your package.json, like so:
...
"dependencies": {
"jquery": "^1.11.1"
},
...
Alternatively, running npm install <package> -s from the directory containing your package.json will install the specified module and save it as a dependency in your package.json file.
Once you have installed this dependency (and any others you desire), you can go ahead and use them in your app.js as follows:
var $ = require('jquery');
$('<div>Hello World, I\'m using JQuery!</div>').appendTo('body');
Simple as that, and no need to use bower or browserify-shim - browserify will look through your node_modules folder and find them. I haven't tried this with angular (I had an issue trying to install it) - but it is available through npm, so it should work.
# assuming you have installed jquery locally instead of globally
npm install jquery -s # without -g flag
instead of require("jquery"), give relative path from source directory
require("./node_modules/jquery/dist/jquery.min.js");
Try the following:
<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>
OR
<script>var $ = jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>