I have created a react app using create-react-app and I am using less for css. My app builds correctly, but none of the less files are loaded in build/static folder
I am using customize-cra with react-app-rewired to add a loader for less files.
config-overrides.js file
const {
override,
addLessLoader
} = require('customize-cra');
const path = require('path');
module.exports = override(
addLessLoader({
paths: [path.resolve(__dirname, 'src/')],
javascriptEnabled: true,
sourceMap: true,
})
);
scripts in package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --passWithNoTests",
"eject": "react-scripts eject",
"release": "CI=true react-app-rewired test --coverage && npm run build && npm run package && npm run posttest",
},
dependencies
"less": "^4.1.1",
"less-loader": "^8.0.0",
"react-scripts": "4.0.2",
"webpack": "4.44.2",
"customize-cra": "^1.0.0"
The error that I was getting was
Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function
Referred this post and lowered the version of less-loader to 5.0.0 and it started working
Related
I have created the react application using npx create-react-app task-tracker and this is my package.json file when ever I run npm start it shows error. As I am new to React I hardly have any knowledge about it.
this the error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASUS\AppData\Roaming\npm-cache\_logs\2021-04-19T15_13_05_651Z-debug.log
package.json:
{
"name": "task-tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.3"
}
}
It seems like create-react-app did not add the "scripts" field to the package.json object. I would try adding this field to package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
If that doesn't work, try running create-react-app again
In my React app, I am getting the following error during compilation:
Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled:
1 | export default from './CustomIcon'
|
I have already installed a couple of babel packages, but it did not help. Here is a part of my package.json:
...
"devDependencies": {
"#babel/plugin-proposal-export-default-from": "^7.12.1",
"#babel/plugin-syntax-export-default-from": "^7.12.1",
"#babel/plugin-syntax-jsx": "^7.12.1",
"#babel/preset-react": "^7.12.7",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
...
And this is the content of my babel.config.json file:
{
"presets": ["#babel/preset-react"],
"plugins": [
"#babel/plugin-syntax-jsx",
"#babel/plugin-proposal-export-default-from"
]
}
What am I doing wrong? Why is my babel configuration ignored? Are there any other steps I need to do?
In case of using create-react-app (CRA), you can't simply add the babel.config.js like that since it has been wrapped by CRA.
But we can achieve that by using package react-app-rewired which is able to modify configuration of CRA.
Here are a few steps you would follow up:
Install deps:
yarn add -D react-app-rewired customize-cra
Add the configuration file at root dir config-overrides.js:
const { useBabelRc, override } = require('customize-cra');
module.exports = override(
useBabelRc(),
);
Test your script by switching to react-app-rewired in your package.json:
{
"start": "react-app-rewired start", // Replace `react-scripts`
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
That's it!
App was made by "create-react-app" command. Bundled (by webpack) JavaScript code is working properly in my React App, but it does not seem to get any styling from SASS. There are no errors in console or anywhere, it's just being ignored. To start webpack I am running "npm run start".
Repo just in case: https://github.com/ankeris/challengefriend
This is the code:
package.json
"scripts": {
"start": "webpack-dev-server --open --mode development --hot | react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './styles/scss/index.scss';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
To make it worked, I followed this link it tells you how to add css preprocessor in react-create-app, here are the commands to run :
npm install --save node-sass-chokidar
npm install --save npm-run-all
then add these lines in your package.json (in the scripts section) :
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
in your file index.js replace import './styles/scss/index.scss'; by import './styles/scss/index.css';
Finally you can start your app by running npm start
As I said in comment, react-create-app uses its own webpack config, so your webpack.config.js is useless you can remove it from your project
If you really want to import the scss file, then you need to modify the default react-create-app webpack config, you need to run npm run eject to extract the config, then modify the files /config/webpack.config.{env}.js
It should be loaders because you are using Webpack 4.
Please add below rule in Webpack and try
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
I am building a react application and I want to copy all image files from the source destination to the build destination. I am following some tutorials and so far managed to use react-app-wired and the CopyWebpackPlugin
I am getting no errors and no files are being copied.
This is my config-overrides.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = function override(config, env) {
if (!config.plugins) {
config.plugins = [];
}
config.plugins.push(
new CopyWebpackPlugin(
[
{
from: 'src/images',
to: 'public/images'
}
])
);
return config;
};
This is my package.json
{
"name": "public",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-app-rewired": "^1.5.2",
"react-axios": "^2.0.0",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-slick": "^0.23.1",
"slick-carousel": "^1.8.1",
"typeface-montserrat": "0.0.54",
"webfontloader": "^1.6.28"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-app-rewired start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-app-rewired build",
"build": "npm-run-all build-css build-js",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"npm-run-all": "^4.1.3",
"style-loader": "^0.22.1"
}
}
My folder structure is
src/images
src/images/file.jpg
src/images/slider/1.png
src/images/slider/2.png
public/images (empty) so far
Assuming you just want to move files from -/src/<somewhere> to ./<somewhereElse> at build time.
You could just add an extra step to your build script in package.json. The step below is completely in your control and does not mess with any create-react-app scripts or configuration.
For example, I used the ncp package, but if you want more granular control, you can also create your own "step" with ncp or even with raw node fs api.
Here is a way to replicate what I did:
Setup
npx create-react-app img-upload
cd img-upload/
yarn add --dev ncp
Test Data
create src/images/ folder structure and put in files
ls -R src/images/
src/images/:
badge.jpg folder1
src/images/folder1:
applause.gif blank.png
Package.json
I only edited the part: "build": "ncp './src/images' './public/images' && react-scripts build",
{
"name": "img-upload",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "ncp './src/images' './public/images' && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"ncp": "^2.0.0"
}
}
Test:
Before running build:
ls public
favicon.ico index.html manifest.json
After running build: yarn build
ls public
favicon.ico images index.html manifest.json
ls -R public/images
public/images/:
badge.jpg folder1
public/images/folder1:
applause.gif blank.png
ls build
asset-manifest.json favicon.ico images index.html manifest.json service-worker.js static
ls -R build/images
build/images/:
badge.jpg folder1
build/images/folder1:
applause.gif blank.png
Suggestion
I am assuming you ultimately need these files in build directory. If so, you can just switch your build script.
"build": "react-scripts build && ncp './src/images' './build/images'",
That way you won't pollute your public folder, which you may want to keep in your source control.
It is definitely not recommended to modify the node_modules/react-scripts/config/webpack.config.dev.js file as this will break when this particular package is updated. Also most probably you would be having node_modules ignored in your version control system, meaning this config wont be shared across developers or backed up.
Although I haven't tried myself personally you could use something like this : https://github.com/timarney/react-app-rewired to override the Webpack config.
You can have a look at the tutorial here : https://medium.com/#timarney/but-i-dont-wanna-eject-3e3da5826e39
Mine worked like this:
const { override, addWebpackPlugin } = require('customize-cra');
module.exports = {
webpack: override(
addWebpackPlugin(
new CopyWebpackPlugin({
patterns: [
{ from: 'src/config', to: 'config' }
],
})
)
)
With that, I'm taking the contents of my config folder and creating an equal one in the build also called config.
I think the problem is because you are using webpack-dev-server together with copy-webpack-plugin. If that's true, the copy-webpack-plugin will copy files to virtual directory which webpack-dev-server works. So that, In this situation, you need to add one more plugin to make it happen
If you want webpack-dev-server to write files to the output directory
during development, you can force it with the
write-file-webpack-plugin.
import WriteFilePlugin from 'write-file-webpack-plugin';
webpack config:
config.plugins.push(
new CopyWebpackPlugin(
[
{
from: 'src/images',
to: 'public/images'
}
])
);
config.plugins.push(new WriteFilePlugin());
You can visit the official document for more information: https://webpack.js.org/plugins/copy-webpack-plugin/
Hope this works!
I have a basic React app. No backend. I want to set it up on github pages. I followed this article, twice. https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089
Both times, Github Pages displays the README.md file instead of the index.html file in my public folder. Here is an image of the file directory for the app. Any thoughts?
Here is what I have in package.json if it matters:
{
"name": "react-blog",
"version": "0.1.0",
"private": true,
"homepage": "https://jackseabolt.github.io/react-blog/",
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy" : "npm run build&&gh-pages -d build"
},
"devDependencies": {
"gh-pages": "^1.0.0"
}
}
Your issue is likely that you are using your master branch as the source. In the settings tab on your Github project page, change the source to use the gh-pages branch.
See https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#step-4-ensure-your-projects-settings-use-gh-pages