I am creating a react app without using npx create-react-app, i am using webpack, and trying to use the tailwind CSS, with it.
But getting error.
How should I do confugration the to the react app so that I can use tailwind in this ?
error:
ERROR in ./index.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #tailwind base;
| #tailwind components;
| #tailwind utilities;
# ./index.js 4:0-21
webpack 5.75.0 compiled with 1 error in 43 ms
Index.css in react app:
#tailwind base;
#tailwind components;
#tailwind utilities;
index.js of react app
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./src/App";
import "./index.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
my webpack file:
const path = require("path");
/*We are basically telling webpack to take index.js from entry. Then check for all file extensions in resolve.
After that apply all the rules in module.rules and produce the output and place it in main.js in the public folder.*/
module.exports = {
/** "mode"
* the environment - development, production, none. tells webpack
* to use its built-in optimizations accordingly. default is production
*/
mode: "development",
/** "entry"
* the entry point
*/
entry: "./index.js",
output: {
/** "path"
* the folder path of the output file
*/
path: path.resolve(__dirname, "public"),
/** "filename"
* the name of the output file
*/
filename: "main.js",
},
/** "target"
* setting "node" as target app (server side), and setting it as "web" is
* for browser (client side). Default is "web"
*/
target: "web",
devServer: {
/** "port"
* port of dev server
*/
port: "3000",
/** "static"
* This property tells Webpack what static file it should serve
*/
static: ["./public"],
/** "open"
* opens the browser after server is successfully started
*/
open: true,
/** "hot"
* enabling and disabling HMR. takes "true", "false" and "only".
* "only" is used if enable Hot Module Replacement without page
* refresh as a fallback in case of build failures
*/
hot: true,
/** "liveReload"
* disable live reload on the browser. "hot" must be set to false for this to work
*/
liveReload: true,
},
resolve: {
/** "extensions"
* If multiple files share the same name but have different extensions, webpack will
* resolve the one with the extension listed first in the array and skip the rest.
* This is what enables users to leave off the extension when importing
*/
extensions: [".js", ".jsx", ".json"],
},
module: {
/** "rules"
* This says - "Hey webpack compiler, when you come across a path that resolves to a '.js or .jsx'
* file inside of a require()/import statement, use the babel-loader to transform it before you
* add it to the bundle. And in this process, kindly make sure to exclude node_modules folder from
* being searched"
*/
rules: [
{
test: /\.js|\.jsx$/, //kind of file extension this rule should look for and apply in test
exclude: /node_modules/, //folder to be excluded
use: {
loader: "babel-loader", //loader which we are going to use
options: {
presets: ["#babel/preset-react", "#babel/preset-env"],
},
},
},
{
test: /\.(css|sass)$/i,
include: path.resolve(__dirname, "src"),
use: ["style-loader", "css-loader", "sass-loader", "raw-loader"],
},
],
},
};
My package json
{
"name": "package.json",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server .",
"build": "webpack"
},
"author": "Ravi_Bro",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.20.7",
"#babel/eslint-parser": "^7.19.1",
"#babel/plugin-transform-runtime": "^7.19.6",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/runtime": "^7.20.7",
"babel-loader": "^9.1.0",
"css-loader": "^6.7.3",
"eslint": "^8.30.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"json-server": "^0.17.1",
"postcss": "^8.4.20",
"postcss-import": "^15.1.0",
"postcss-loader": "^7.0.2",
"postcss-preset-env": "^7.8.3",
"style-loader": "^3.3.1",
"tailwindcss": "^3.2.4",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"#babel/cli": "^7.20.7",
"#tanstack/react-query": "^4.20.4",
"axios": "^1.2.2",
"babel-preset-es2015": "^6.24.1",
"node-sass": "^8.0.0",
"path": "^0.12.7",
"path-to-regexp": "^6.2.1",
"raw-loader": "^4.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-query": "^3.39.2",
"sass-loader": "^13.2.0"
}
}
Can you also provide the tailwind.config.js?
Also there are postcss library installed in package.json, the doc says there’re no support with postcss library in create react app. Please check here.
https://tailwindcss.com/docs/guides/create-react-app
You have to add postcss loader (which will pick up the config with tailwind) to the use chain of loaders in module.rules with test: /\.(css|sass)$/i.
Related
I am attempting to make a webpack 5 build process to create a react component library I just had a couple of things cannot seem to get working.
#1) The webpack build command works fine, and when using the inline-source-map option I can
SEE the data URL embeded in the outputted build file but when I ever I attempt to publish and test this library on NPM I always get obfuscated errors without original lines of code so I can't even tell where the errors are; what else am I missing to activate source-maps? I am using Chrome dev tools and it doesn't even tell me a source map is available for that code...
#2) Another issue I am having is after building this with webpack into the dist folder; I start another CRA test app and try to pull components out of the built library but all I get are these errors.
./src/dist/index.js
Line 1:1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:112: 'define' is not defined no-undef
Line 1:123: 'define' is not defined no-undef
Line 1:190: Unexpected use of 'self' no-restricted-globals
Line 1:466: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:631: Expected an assignment or function call and instead saw an expression no-unused-expressions
I am aware webpack 5 stopped bundling polyfills for Node but shouldn't this code run
if I place it in the src directory of a CRA application? This is bundled code shouldn't it work in the browser/ in another React application? I targeted UMD so I thought it would work in this environment
here is all the necessary info
Webpack.config.js
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
module.exports = {
entry: "./src/index.js",
devtool: "inline-source-map",
externals: [nodeExternals()],
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
library: {
name: "test",
type: "umd",
},
},
plugins: [new CleanWebpackPlugin()],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
},
},
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "./src"),
},
],
},
};
Package.json
{
"name": "test-lib",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "start-storybook",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"#storybook/addon-knobs": "^6.3.1",
"#storybook/react": "^6.3.10",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0",
"node-sass": "^6.0.1",
"path": "^0.12.7",
"sass-loader": "^12.1.0",
"webpack": "^5.58.0",
"webpack-cli": "^4.9.0",
"webpack-node-externals": "^3.0.0"
}
}
Button.js (sample component)
import React from 'react'
import PropTypes from 'prop-types';
const Button = ({message = 'Hello world'}) => (
<button>{message}</button>
)
Button.propTypes = {
message: PropTypes.string.isRequired
}
export default Button
Build entry point (index.js)
export { default as Button } from "./components/Button";
I have extensive applications in svelte, later I need to attach a sapper to it for further work, it is possibly? I try do it via:
npm i #sapper
but when I try to import something from this package e.q.:
import { goto } from '#sapper/app';
compiler throw me that i have no dependency to this sapper methods :(
I have no idea how to attach sapper to my project
my rollup
import svelte from "rollup-plugin-svelte";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
// library that helps you import in svelte with
// absolute paths, instead of
// import Component from "../../../../components/Component.svelte";
// we will be able to say
// import Component from "components/Component.svelte";
import alias from "#rollup/plugin-alias";
const production = !process.env.ROLLUP_WATCH;
// configure aliases for absolute imports
const aliases = alias({
resolve: [".svelte", ".js"], //optional, by default this will just look for .js files or folders
entries: [
{ find: "components", replacement: "src/components" },
{ find: "views", replacement: "src/views" },
{ find: "assets", replacement: "src/assets" },
],
});
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require("child_process").spawn(
"npm",
["run", "start", "--", "--dev"],
{
stdio: ["ignore", "inherit", "inherit"],
shell: true,
}
);
process.on("SIGTERM", toExit);
process.on("exit", toExit);
},
};
}
export default {
input: "src/main.js",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: "public/build/bundle.js",
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: (css) => {
css.write("bundle.css");
},
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ["svelte"],
}),
commonjs(),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload("public"),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
// for absolut imports
// i.e., instead of
// import Component from "../../../../components/Component.svelte";
// we will be able to say
// import Component from "components/Component.svelte";
aliases,
],
watch: {
clearScreen: false,
},
};
my package.json:
{
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public -s",
"build:tailwind": "tailwind build public/assets/styles/index.css -o public/assets/styles/tailwind.css",
"build:fontawesome": "mkdir -p public/assets/vendor/#fortawesome/fontawesome-free/webfonts && mkdir -p public/assets/vendor/#fortawesome/fontawesome-free/css && cp -a ./node_modules/#fortawesome/fontawesome-free/webfonts public/assets/vendor/#fortawesome/fontawesome-free/ && cp ./node_modules/#fortawesome/fontawesome-free/css/all.min.css public/assets/vendor/#fortawesome/fontawesome-free/css/all.min.css",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf public/build && npm install && npm run build:tailwind && npm run build:fontawesome && npm run dev"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"rollup": "^2.3.4",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-node-polyfills": "^0.2.1",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1"
},
"dependencies": {
"#fortawesome/fontawesome-free": "5.14.0",
"#popperjs/core": "2.5.1",
"#rollup/plugin-alias": "3.1.1",
"#rollup/plugin-replace": "^2.3.4",
"#tailwindcss/custom-forms": "0.2.1",
"body-parser": "^1.19.0",
"chart.js": "2.9.3",
"compression": "^1.7.4",
"express": "^4.17.1",
"express-session": "^1.17.1",
"fontawesome-svelte": "^2.0.1",
"node-fetch": "^2.6.1",
"node-sass": "^5.0.0",
"page": "^1.11.6",
"polka": "^0.5.2",
"rollup-plugin-scss": "^2.6.1",
"session-file-store": "^1.5.0",
"sirv": "^1.0.10",
"sirv-cli": "1.0.6",
"svelte-routing": "1.4.2",
"tailwindcss": "1.8.10"
}
}
I was looking for this answer, I think the #Romain Durand answer is the closest, I don't think we can add ssaper to an existing svelte project. I would have to initialize project in ssaper and use svelte.
I am trying to include my css in the server hosted by webpack-dev-server. For that to happen, I apparently have to use style-loader and css-loader together, in order to bundle the css into the JavaScript.
I can't get it to work.
I follow the instructions here, yet I get the following error:
ERROR in ./src/index2.js
Module not found: Error: Can't resolve 'main.css' in C:\Users\magnusga\Downloads\Programming\TestPrograms\test\src'
# ./src/index2.js 1:0-27
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index2.js
I know for certain that main.css is in the same folder as index2.js
My Settings
index2.js
import css from 'main.css';
// ...much more code
webpack.config.js
module.exports = {
entry: {
app: './src/index2.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development',
template: 'src/index.html',
inject: 'head'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index2.js",
"dependencies": {
"rxjs": "^5.5.6"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.1.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"buildb": "babel src --watch --out-dir built --copy-files",
"watch": "webpack --watch",
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
One Fix
One fix is to use import css from './main.css'; instead of import css from 'main.css'; (note the ./ infront of the file name).
That does not feel right though, because the css-loader site shows that it should be the latter, not the former.
Is it a typo in the docs?
Thank you.
It is not really a typo. If you import it like this:
import css from 'main.css';
Webpack thinks, that you want to import a module, and searches for this file under node_modules. This is necessary, when you for example installed the bootstrap package and want to import its css. So when your css file comes from a dependency, you import that dependency like this. But when you want to import a lokal file, always use relative paths.
So it must be: import css from './main.css';
Further Reading:
https://webpack.js.org/concepts/module-resolution/#module-paths
https://webpack.js.org/configuration/resolve/#resolve-modules
Problem
So, i'm working a web app using Webpack and ES6. When I try to run Webpack, it tells me that it can't resolve "app.js". I've looked all across the internet for a solution, but I just couldn't find one, can someone help me?
The Full error is:
ERROR in ./assets/js/main.js
Module not found: Error: Can't resolve 'app.js' in 'C:\Users\sidna\Dropbox\Dev Stuff\Web Apps\Mondrian Generator\assets\js'
# ./assets/js/main.js 4:0-17
webpack.config.js
module.exports = {
entry: './assets/js/main.js',
output: {
filename: 'assets/js/build.js',
},
watch: true,
module: {
loaders: [
{
test: /\.scss$/, loader: "style-loader!css-loader!sass-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
],
}
};
app.js (Empty)
main.js
// SCRIPTS
require("app.js");
// STYLES
require("../css/large.scss");
package.json
{
"name": "mondrian-generator",
"version": "1.0.0",
"description": "Create your own Mondrian",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"dependencies": {
"css-loader": "^0.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.4.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"script-loader": "^0.7.0",
"webpack": "^2.4.1"
}
}
When the import is neither an absolute path (starting with /) nor explicitly a relative path (starting with ./ or ../), it is resolved as a module, which means it's Loading from node_modules Folders.
Your app.js is not in node_modules, so you need to change it to a relative path (assuming it's in the same directory as main.js):
require("./app.js");
Webpack follows the import behaviour of Node.js, but it also allows you to change it with the resolve.modules option.
I'm following a lecture on Angular With Webpack.
I am trying to add the less loader and keep getting an error.
ERROR in ./src/app.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.less in D:\projects\dev\webpack-angular-demo/src
# ./src/app.js 3:0-24
My webpack.config.js is :
module.exports = {
context: __dirname + '/src',
entry:'./app.js',
module:{
loaders:[
{
//create working environment for es6 need to npm i babel-loader babel-core babel-preset-es2015 -D
//https://github.com/babel/babel-loader
test:/\.js$/,
exclude:'/node_modules',
loader:'babel',
query: {
presets: ['es2015']
}
},
{
//take less convert to css and inject to style tag need to: npm i css-loader less-loader less style-loader -D
//https://github.com/webpack/less-loader
test:/\.less$/,
exclude:'/node_modules',
loader:"style!css!less"
}
]
}
};
My app.js is:
import '../style.less';
class Log{
constructor(){
console.log("sdfsdf");
}
}
new Log();
Inside the src directory i have the app.js , index.html and style.less files.
finally , this is my package.json file:
{
"name": "webpack-angular-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"css-loader": "^0.23.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
any idea why i'm getting this error ?
Thanks
i had the exact same problem like you. i managed to solve that with tiny change.
path.join(__dirname, 'src')
instead of using:
__dirname + '/src/
now, make sure that your webpack.config.js look like:
var path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
...
and when I import the style.less i used like above
import './style.less';
If all files are in the same directory (src), the first line in app.js should be:
import './style.less';