I am trying to use the Extract Text Webpack Plugin, but I have not been able to generate a new css file for the compiled sass files.
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : './src/app.js',
output : {
filename : './dist/bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename : 'app.bundle.css'
}),
]
}
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}
app.js:
var css = require('../css/app.scss');
console.log("This is a test Hi from webpack !!!");
I able to generate a new css file for the compiled sass files
please go through repo for your reference working example
your configuration looks good only ,my be you miss the path or forgot load css file in index.html or may be you did not create any scss files
live example
Related
I am trying to build and publish a react component to npm. I am using webpack 5 with babel. The build succeeds, but when I try use the component it is aparent that the component is not being exported as I get the following error in the console:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at App.js:41.
at App
My project structure looks like this:
- src/
- components/
- MyComponent.js
- styles/
- MyComponent.css
- index.js
- .babelrc
- package.json
- webpack.config.js
MyComponent.js contains the following:
import '../styles/MyComponent.css'
export default function MyComponentFunction() {
return (
<h1>Hello</h1>
)
}
My index.js file contains the following:
import MyComponentFunction from './components/MyComponent'
export default {
MyComponentFunction
}
My .babelrc file contains the following:
{
"presets": ["#babel/preset-env","#babel/preset-react" ]
}
My webpack.config.js contains the following:
const path = require('path')
module.exports = {
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader:'babel-loader',
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
exclude: /node_modules/
}
]
}
}
And my package.json (which includes lots of unused libraries) contains the following:
{
"name": "my-component",
"version": "0.0.1",
"description": "A react component ...",
"main": "dist/index.bundle.js",
"scripts": {
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
...
},
"keywords": [
],
"author": "<Author>",
"license": "MIT",
"bugs": {
"url": "<github repo>"
},
"homepage": "<github repo>#readme",
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/plugin-proposal-export-default-from": "^7.18.10",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.19.4",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"eslint-webpack-plugin": "^3.2.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"#react-three/drei": "^9.36.0",
"#react-three/fiber": "^8.8.10",
"react": "^18.2.0",
"three": "^0.145.0"
},
"peerDependencies": {
"react": "^18.2.0"
}
}
Why can I not import my component after it has been published? Which i'm trying to do like so:
import {MyComponentFunction} from 'my-component'
function App() {
return (
<>
<MyComponentFunction></MyComponentFunction>
</>
);
}
The reason you are facing this issue is that you have named the package as an exact match for this. The name must be unique.
I am new in PostCSS and I don't know, how to add preCSS plugin. Basically, I am using Tailwind, where is recommend PostCSS. But till today, I always used Sass in my projects. With this preCSS plugin, I can use Sass syntax - that's the goal.
My packagake.json
{
"name": "zs-skalova-layout-only",
"version": "1.0.0",
"description": "",
"main": "tailwind.config.js",
"scripts": {
"dev": "postcss css/tailwind.css -o tailwind-compil.css"
},
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.1.0",
"postcss": "^8.2.1",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.0.2"
},
"devDependencies": {
"precss": "^4.0.0"
}
}
and here is my postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
precss: {},
}
}
No Webpack, Gulp or etc. solutions please.
Thanks for your help
I'm learning Vue.js with Webpack for the first time today and trying to get a router working with lazy/dynamic imports.
I want to use lazy/dynamic imports because I am rebuilding my content management system which has many, many pages that may or may not be used during the user's session, so loading the modules they need dynamically, when they need them, makes more sense with regards to my application.
My very basic router currently looks like this:
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
function loadView(view) {
return () => import(/* webpackChunkName: "view-[request]" */ `#/views/${view}.vue`);
}
export default new Router({
routes: [
{
path: "/",
name: "dashboard",
component: loadView("Dashboard")
},
{
path: "/login",
name: "login",
component: loadView("Login")
}
]
});
However, I run into the following compilation error:
ERROR in ./src/router/index.js Module build failed (from
./node_modules/babel-loader/lib/index.js): SyntaxError:
...../src/router/index.js: Support for the experimental syntax
'dynamicImport' isn't currently enabled
With the additional note:
Add #babel/plugin-syntax-dynamic-import to the
'plugins' section of your Babel config to enable parsing.
And shows me which line is the problem, which is quite obvious anyway:
return () => import(/*..........
^
I recognise this error from when I was playing with Webpack on its own a few months ago, so I knew I had to install the dynamic import plugin to make this work.
This is what I installed:
npm install babel-plugin-syntax-dynamic-import
And I made this plugin available in my babel.rc configuration file and ran npm run dev to recompile everything:
{
"presets": [
[
"#babel/env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
]
],
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
But I'm still getting the error and I still can't use dynamic importing features! Am I doing something wrong? Has anybody else had trouble with getting dynamic imports to work?
My webpack.config file:
'use strict';
const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'development',
entry: [
'./src/app.js'
],
devServer: {
hot: true,
watchOptions: {
poll: true
}
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
outputStyle: 'compressed',
data: `
#import "./src/assets/scss/_variables.scss";
#import "./src/assets/scss/_mixins.scss";
`
}
}
]
}
]
},
resolve: {
alias: {
"#": path.resolve(__dirname, './src'),
"Components": path.resolve(__dirname, './src/components/')
}
},
optimization: {
minimizer: [new UglifyJsPlugin()],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
]
}
My package.json file:
{
"name": "manage_v2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config build/webpack.config.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.22",
"vue-router": "^3.0.2",
"vuex": "^3.1.0"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.5",
"babel-plugin-dynamic-import-webpack": "^1.1.0",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"uglifyjs-webpack-plugin": "^2.1.1",
"vue-loader": "^15.6.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
}
}
I fixed the problem myself after many hours of frustration. I still don't know why the method that's used in the Babel, Webpack and Vue documentation doesn't work but I did get this working:
I first removed the plugin declaration from babel.rc file and then added an option to the babel loader in webpack.config file:
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
plugins: [
"#babel/plugin-syntax-dynamic-import"
]
}
}
}
I hope this helps others.
You have the wrong plugin assignment:
"plugins": ["#babel/plugin-syntax-dynamic-import"]
Would be the correct format for that plugin.
I'm having an issue getting firebase 3.0.1 to work. I have a feeling it's in regards to my webpack setup. My files are below. When running my app with webpack dev server I get the error:
Uncaught TypeError: firebase.initializeApp is not a function
The interesting thing is that if I put a debugger; or breakpoint after var firebase = require('firebase'); it seems to be an empty object.
webpack.config.js
const webpack = require("webpack");
module.exports = {
entry: './src/index.js',
output: {
path: 'public',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}]
},
plugins: process.env.NODE_ENV === 'production' ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
] : []
};
package.json
{
"name": "burn",
"version": "1.0.0",
"description": "burn messaging",
"main": "index.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:dev": "webpack-dev-server --inline --content-base public --history-api-fallback",
"start:prod": "webpack && firebase deploy"
},
"author": "James Gilchrist <james#burn.today>",
"license": "ISC",
"dependencies": {
"compression": "^1.6.2",
"express": "^4.13.4",
"firebase": "^3.0.1",
"if-env": "^1.0.0",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-router": "^2.4.0"
},
"devDependencies": {
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
index.js
var firebase = require('firebase');
var config = {
apiKey: "AIzaSyA9gUmSBu4SZ4P9H_4lXuN1ouD_GBKq3aw",
authDomain: "burn-56840.firebaseapp.com",
databaseURL: "https://burn-56840.firebaseio.com",
storageBucket: "burn-56840.appspot.com"
};
firebase.initializeApp(config);
I had the same problem, there's a simple fix though:
var firebase = require('firebase/app');
This way you get the "real" firebase module. However you must now require each module you'll need so it loads correctly, like so:
var firebase = require('firebase/app');
// all 3 are optional and you only need to require them at the start
require('firebase/auth');
require('firebase/database');
require('firebase/storage');
It seems to me that something is wrong with the current initialisation code, looking at the source it should work; but then again, somewhat like you, I'm using browserify, and haven't tested outside of it, so it might be related.
Clearly I'm missing something incredibly simple here, so I apologize in advance for the dumb question. I have no errors so it's difficult to Google.
I'm trying to export something, anything, from an npm package written in ES6, compiled with babel and webpack.
I followed this http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/ for my webpack setup, leaving it mostly-identical, but find it below for reference. I made a test export repo just to make sure it wasn't anything in the code of the module I was trying to export; find that below as well. Any help would be greatly appreciated; at this point I feel like I'm taking crazy pills.
src/index.js
const test = "test";
export default test;
webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: [
"babel-polyfill",
"./src/index"
],
output: {
//path: path.join(__dirname, "lib"),
//filename: "[name].js"
filename: "./lib/index.js"
},
// import bare, .js, and .jsx files
resolve: {
extensions: ["", ".js", ".jsx"]
},
devtool: "source-map",
module: {
loaders: [
{
loader: "babel-loader",
// only load src
include: [
path.resolve(__dirname, "src")
],
// only compile .js and .jsx files
test: /\.jsx?$/,
query: {
plugins: ["transform-runtime", "transform-decorators-legacy"],
//plugins: ["transform-decorators-legacy"],
presets: ["es2015", "stage-0", "react"]
}
},
]
},
debug: true
};
package.json
{
"name": "test-package",
"version": "0.0.1",
"description": "test",
"main": "lib/index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx/xxx.git"
},
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [
"es6"
],
"author": "me",
"license": "MIT",
"bugs": {
"url": "https://github.com/xxx/xxx/issues"
},
"homepage": "https://github.com/xxx/xxx#readme",
"dependencies": {
"babel-polyfill": "^6.5.0",
"babel-runtime": "^6.5.0"
},
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack -p
other project
npm i ../test-package
(verify actually installed, search for "test" in lib/index.js and find what should be the export)
import test from "test-package";
console.log(test);
console.log(Object.keys(test));
output: empty object, empty array
Why not trying
import * as test from "test-package";
And then
console.log(test);