Here is the package.json
{
"name": "webpack-threejs",
"version": "1.0.1",
"description": "Keivan Sina personal website.",
"keywords": [
"three.js",
"webpack",
"glsl",
"glslify"
],
"author": {
"name": "Keivan Sina",
"url": "http://k1sina.com"
},
"license": "MIT",
"sideEffects": false,
"scripts": {
"build": "webpack --mode production --config config/prod.js",
"start": "webpack serve --config config/dev.js"
},
"dependencies": {
"#brunoimbrizi/controlkit": "^0.1.93",
"#fancyapps/fancybox": "^3.5.7",
"animate.css": "^4.1.0",
"browser-detect": "^0.2.28",
"domready": "^1.0.8",
"glsl-noise": "0.0.0",
"gsap": "^2.1.3",
"imagesloaded": "^4.1.4",
"isotope-layout": "^3.0.6",
"jquery-bridget": "^2.0.1",
"odometer": "^0.4.8",
"stats.js": "^0.17.0",
"swiper": "^6.1.1",
"three": "^0.98.0",
"wow.js": "^1.2.2"
},
"devDependencies": {
"#babel/core": "^7.0.0-beta.52",
"#babel/plugin-syntax-dynamic-import": "^7.0.0-rc.1",
"#babel/polyfill": "^7.0.0-beta.55",
"#babel/preset-env": "^7.0.0-beta.52",
"babel-loader": "^8.0.0-beta.4",
"bootstrap": "^4.4.0",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"glslify": "^6.2.1",
"glslify-import-loader": "^0.1.2",
"glslify-loader": "^1.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^5.5.0",
"imports-loader": "^0.8.0",
"jquery": "^3.4.1",
"mini-css-extract-plugin": "^2.7.2",
"node-sass": "^6.0.1",
"raw-loader": "^0.5.1",
"sass": "^1.58.1",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^4.1.3"
}
}
Here is the common webpack rules:
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const variables = require('./variables.js');
const __root = path.resolve(__dirname, '../');
module.exports = {
entry: {
index: ['#babel/polyfill', './src/scripts/index.js'],
// index: '/src/scripts/index.js'
},
output: {
path: path.resolve(__root, 'dist'),
filename: 'scripts/[name].[chunkhash].js',
chunkFilename: 'scripts/[name].[chunkhash].js',
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-syntax-dynamic-import'],
},
},
exclude: /node_modules/,
},
{
test: /\.(glsl|frag|vert)$/,
use: ['glslify-import-loader', 'raw-loader', 'glslify-loader'],
},
{
test: /three\/examples\/js/,
use: 'imports-loader?THREE=three',
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
interpolate: true,
},
},
},
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
output: 'images',
esModule: false
},
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: 'file-loader',
},
],
},
resolve: {
alias: {
'three-examples': path.join(__root, './node_modules/three/examples/js'),
},
},
plugins: [
new CleanWebpackPlugin(['dist'], { root: __root }),
new CopyWebpackPlugin([
{
from: path.resolve(__root, 'static'),
},
]),
new HtmlWebpackPlugin({
template: './src/index.html',
inject: true,
chunks: ['index'],
filename: 'index.html',
}),
new HtmlWebpackPlugin({
template: './src/cases.html',
inject: true,
chunks: ['index'],
filename: 'cases.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/iransalary.html',
inject: true,
chunks: ['index'],
filename: 'iransalary.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/safarmarket.html',
inject: true,
chunks: ['index'],
filename: 'safarmarket.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/rideradar.html',
inject: true,
chunks: ['index'],
filename: 'rideradar.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/logodesign.html',
inject: true,
chunks: ['index'],
filename: 'logodesign.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/artvan.html',
inject: true,
chunks: ['index'],
filename: 'artvan.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/orugso.html',
inject: true,
chunks: ['index'],
filename: 'orugso.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/navaaz.html',
inject: true,
chunks: ['index'],
filename: 'navaaz.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/iotanalytic.html',
inject: true,
chunks: ['index'],
filename: 'iotanalytic.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/smartdent.html',
inject: true,
chunks: ['index'],
filename: 'smartdent.html',
templateParameters: variables,
}),
new HtmlWebpackPlugin({
template: './src/ledgercover.html',
inject: true,
chunks: ['index'],
filename: 'ledgercover.html',
templateParameters: variables,
}),
new webpack.ProvidePlugin({
THREE: 'three',
}),
new MiniCssExtractPlugin({
filename: '[name].[contentHash].css',
}),
],
};
And here is the index.js
import ready from 'domready';
import App from './App';
import './agansy';
import './../sass/style.scss';
ready(() => {
window.app = new App();
window.app.init();
});
I have a Webpack project and it used to work before. I upgraded my dependencies and now the scss is not being compiled. I checked the compiled files and there is no sign of css code.
I als tried to replace
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
}
with
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
but still no luck.
{
test: /\.(scss|css)$/,
use: [
// "style-loader",
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: true,
},
},
{
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: true,
},
},
{ loader: "sass-loader", options: { sourceMap: true } },
],
},
then import the main scss file in the app.js or bootstrap file of your project.
Related
I'm trying to build my Vue app on Node 13 and Webpack 4. For this I'm using this webpack.config.js
const { VueLoaderPlugin } = require("vue-loader");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
mode: 'development',
entry: {
main: "./src/main.js",
},
output: {
filename: "[name].[contenthash:12].js",
path: path.resolve(__dirname, "dist"),
chunkFilename: "[name].[contenthash:12].js",
},
module: {
rules: [
{
test : /\.(jsx?)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.(eot|ttf|woff|woff2|txt)(\?\S*)?$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
},
},
{
test: /\.(png|jpe?g|gif|webm|mp4|svg|ico)$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
outputPath: "assets/img",
esModule: false,
},
},
{
test: /\.(css)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
],
},
{
test: /\.(s(c|a)ss)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true,
importLoaders: 2,
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
"sass-loader",
{
loader: "sass-loader",
options: {
sourceMap: true,
implementation: require("sass"),
sassOptions: {
//fiber: require("fibers"),
prependData: `#import "app/javascript/manager/styles/main.scss"`,
//indentedSyntax: true
}
}
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[contenthash:8].css",
chunkFilename: "[name].[contenthash:8].css",
}),
new htmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
favicon: path.resolve(__dirname, "public", "favicon.ico"),
}),
],
resolve: {
alias: {
vue$: "vue/dist/vue.runtime.esm.js",
},
extensions: ["*", ".js", ".jsx", ".css", ".scss", ".vue"],
modules: [
"node_modules",
]
},
optimization: {
moduleIds: "hashed",
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
priority: -10,
chunks: "all",
},
},
},
},
devServer: {
historyApiFallback: true,
},
}
And this is my package.json
{
"name": "my-app-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/compiler-sfc": "^3.1.4",
"axios": "^0.21.1",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"core-js": "^3.6.5",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue": "^2.6.11",
"vue-axios": "^3.2.4",
"vue-router": "^3.5.2",
"vuetify": "^2.5.6",
"webpack-war-plugin": "^1.0.0-beta.3"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.2.0",
"sass": "1.32.13",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue-cli-plugin-vuetify": "~2.4.1",
"vue-loader": "^16.3.0",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.5.6",
"vuetify-loader": "^1.7.0",
"webpack": "^4.42.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
After struggling with the sass-loader I reduced the list of errors, but this one is significant and I haven't found a way to remove it:
ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ref--5-3!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
╷
1 │ #charset "UTF-8";
│ ^
╵
No sass-node, just sass was used. Uncommenting indentedSyntax: true will simply drop another error saying that semicolons are not allowed. Upgrading versions will return other set of error. Fibers is out of scope (it just improves processing of certain async calls to my knowledge). Upgrading to Webpack5 adds a pletora of new problems as the json structure is quite different.
I'm totally stack at this point. There must be something else to work on the sass loader nut I'm not an expert on webpack so it's taking simply too long. Any help would be greatly appreciated at this point. I cannot believe none is having the same issue. I see many related answers but everyone seem to be doing fine just adding indentation. Thanks!
<link rel="stylesheet" type="text/css" href="scss/styles.scss">
<link rel="stylesheet" type="text/css" href="css/styles.css">
/*webpackconfig.js*/
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
app:'./src/index.js'
},
output: {
path: path.join(__dirname, "/dist"),
publicPath:'',
filename: "main.js"
},
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
// compress: true,
writeToDisk: true,
open:true,
port: 58134,
},
module: {
rules: [
{//require("expose-loader?jquery!jquery"),
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: ["$", "jQuery"],
},
},
{ // /\.css$/,
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath:'../'
}
},
"css-loader",
'sass-loader',
/*{
loader: "sass-loader",
options: {
implementation: require("sass"),
sassOptions: {
fiber: false,
},
},
}, */
],
},
{
test: /\.(png|svg|jpe?g|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "images",
}
}
]
},
{
test: /\.(svg|eot|woff|woff2|ttf)$/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "fonts",
esModule: false,
}
}
]
},
{
test: /\.html$/,
use:[
{
loader: 'html-loader',
options: {
minimize: true,
},
},
]
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html",
}),
new HtmlWebpackPlugin({
filename: "toursTourkey.html",
template: "./src/toursTourkey.html",
}),
new HtmlWebpackPlugin({
filename: "toursEygpt.html",
template: "./src/toursEygpt.html",
}),
new HtmlWebpackPlugin({
filename: "registeraccount.html",
template: "./src/registeraccount.html",
}),
new HtmlWebpackPlugin({
filename: "registerinto.html",
template: "./src/registerinto.html",
}),
new MiniCssExtractPlugin({filename:"css/style.css"}),
new OptimizeCssAssetsPlugin({}),
],
};
````````
````````
/*package.json*/
{
"name": "saferny",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.2.0",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.3.0",
"jquery": "^3.6.0",
"mini-css-extract-plugin": "^1.4.0",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"popper.js": "^1.16.1",
"style-loader": "^2.0.0",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#laylazi/bootstrap-rtl-scss": "^4.6.0-1",
"bootstrap": "^4.6.0",
"bootstrap-v4-rtl": "^4.6.0-2",
"expose-loader": "^2.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"jquery.animate": "^1.8.9",
"resolve-url-loader": "^3.1.3",
"sass": "^1.32.12",
"sass-loader": "^11.0.1"
}
}
import './scss/styles.scss';
import './css/style.css';
//import '../node_modules/#laylazi/bootstrap-rtl-scss/scss/bootstrap-rtl.scss';
import 'bootstrap-v4-rtl/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min';
import 'bootstrap/dist/js/bootstrap.min.js';
import '#fortawesome/fontawesome-free/js/all.min';
import 'jquery.animate';
import 'jquery';
ERROR in Error: Child compilation failed:
No template for dependency: CssDependency
CodeGenerationError: No template for dependency: CssDependency
Compilation.js:2623
[safernyy]/[webpack]/lib/Compilation.js:2623:18
Cache.js:91
[safernyy]/[webpack]/lib/Cache.js:91:34
MemoryCachePlugin.js:45 Array.
[safernyy]/[webpack]/lib/cache/MemoryCachePlugin.js:45:13
Cache.js:91
[safernyy]/[webpack]/lib/Cache.js:91:19
Cache.js:75 Cache.get
[safernyy]/[webpack]/lib/Cache.js:75:18
CacheFacade.js:117 ItemCacheFacade.get
[safernyy]/[webpack]/lib/CacheFacade.js:117:15
Compilation.js:2608 Compilation._codeGenerationModule
[safernyy]/[webpack]/lib/Compilation.js:2608:9
Compilation.js:2534
[safernyy]/[webpack]/lib/Compilation.js:2534:10
async.js:3467 arrayIterator
[safernyy]/[neo-async]/async.js:3467:9
No template for dependency: CssDependency
CodeGenerationError: No template for dependency: CssDependency
Compilation.js:2623
[safernyy]/[webpack]/lib/Compilation.js:2623:18
Cache.js:91
[safernyy]/[webpack]/lib/Cache.js:91:34
MemoryCachePlugin.js:45 Array.
[safernyy]/[webpack]/lib/cache/MemoryCachePlugin.js:45:13
Cache.js:91
[safernyy]/[webpack]/lib/Cache.js:91:19
Cache.js:75 Cache.get
[safernyy]/[webpack]/lib/Cache.js:75:18
CacheFacade.js:117 ItemCacheFacade.get
[safernyy]/[webpack]/lib/CacheFacade.js:117:15
Compilation.js:2608 Compilation._codeGenerationModule
[safernyy]/[webpack]/lib/Compilation.js:2608:9
Compilation.js:2534
[safernyy]/[webpack]/lib/Compilation.js:2534:10
async.js:3467 arrayIterator
[safernyy]/[neo-async]/async.js:3467:9
child-compiler.js:169
[safernyy]/[html-webpack-plugin]/lib/child-compiler.js:169:18
Compiler.js:534
[safernyy]/[webpack]/lib/Compiler.js:534:11
Compiler.js:1087
[safernyy]/[webpack]/lib/Compiler.js:1087:17
Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[safernyy]/[tapable]/lib/Hook.js:18:14
Compiler.js:1083
[safernyy]/[webpack]/lib/Compiler.js:1083:33
Compilation.js:2424
[safernyy]/[webpack]/lib/Compilation.js:2424:11
Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[safernyy]/[tapable]/lib/Hook.js:18:14
Compilation.js:2417
[safernyy]/[webpack]/lib/Compilation.js:2417:38
2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.30.0 compiled with 7 errors in 5684 ms
i ｢wdm｣: Failed to compile.
MiniCssExtractPlugin expects the CSS imported within the JavaScript file. If you have your stylesheets as links within the HTML, you need the (sadly unmaintained) extract-loader. It's important to use esModule: false, otherwise extract-loader fails.
{
test: /\.css$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css",
outputPath: "css",
esModule: false,
}
},
{
loader: "extract-loader",
},
{
loader: "css-loader",
options: {
esModule: false,
}
}
]
},
Works for me with extract-loader#5.1.0, file-loader#6.2.0 and webpack#5.53.0.
Webpack only understands Javascript and JSON - you extend it using loaders, but that happens outside of the HTML page
https://blog.jakoblind.no/css-modules-webpack/
Version
2.5.11
Reproduction link
https://jsfiddle.net/ranjs/eh10wju7/
Steps to reproduce:
In Google Chrome this works fine but in Firefox I get the error:
'TypeError: undefined is not a constructor[Learn More]
and nothing is displayed on the screen.
[Show/hide message details.] TypeError: undefined is not a constructor[Learn More] build.js:1:182494
<anonymous>
http://localhost:25555/static/dist/build.js:1:182494
<anonymous>
http://localhost:25555/static/dist/build.js:1:181955
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:4377
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:247068
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:457
<anonymous>
http://localhost:25555/static/dist/build.js:1:2
What is expected?
App shows normaly
What is actually happening? Getting the error and nothing is displayed.
I upload my main.js and this is my package.json:
'{
"name": "chatbotmariana",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "Ranieri Abreu Silva Junior <rabreu#indracompany.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"prod": "cross-env NODE_ENV=development webpack-dev-server --port 80 --hot --host 0.0.0.0"
},
"dependencies": {
"axios": "^0.18.0",
"compression": "^1.7.3",
"express-minify": "^1.0.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.4",
"vue": "^2.5.17",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.7.3",
"vue-template-compiler": "^2.5.17",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.11.3"
}
}
I'm using JavaScript and I dont have tsconfig.
.bablrc :
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
},{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
],
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ] // <= Order is very important
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
i found.
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = "pt-BR";
recognition.interimResults = false;
recognition.maxAlternatives = 1;
This code don't works in firefox
I'm attempting to use a dynamic import to plug our server-generated config.js file into our production build of our app.
I attempt to use it in this way:
import('./config').then(function(config){
//create a global config variable
config = config;
})
(for now)
When I run webpack, I get the following error
Module build failed: SyntaxError: Unexpected token, expected { (1:6)
Research has led me to believe that this has something to do with babel-loader perhaps not playing nice with dynamic import, but I thought that had already been "solved" with a newer version.
Solutions seem to potentially have been to install Syntax Dynamic Import or maybe babel-plugin-dynamic-import-node, but it's not clear to me which one or why.
Relevant bits of my package.json:
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"build": "node config/webpack/build.js",
},
"dependencies": {
"amdi18n-loader": "^0.6.2",
"async": "^2.6.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-istanbul": "^4.1.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.3.0",
"css-loader": "^0.28.10",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^3.2.0",
"less": "^3.0.1",
"less-loader": "^4.0.6",
"promise-polyfill": "^7.1.0",
"raw-loader": "^0.5.1",
"style-loader": "^0.20.2",
"webpack": "^4.5.0"
},
"devDependencies": {
"autoprefixer": "^7.2.3",
"chromedriver": "^2.34.0",
"copy-webpack-plugin": "^4.3.0",
"cross-env": "^5.1.1",
"cross-spawn": "^5.1.0",
"eslint": "^4.13.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.1",
"friendly-errors-webpack-plugin": "^1.6.1",
"inject-loader": "^3.0.1",
"madge": "^2.0.0",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.9",
"rimraf": "^2.6.2",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"source-map-support": "*",
"uglifyjs-webpack-plugin": "^1.1.4",
"url-loader": "^0.6.2",
"uuid": "^3.1.0",
"webpack-bundle-analyzer": "^2.9.1",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "^4.1.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
}
We split our webpack.conf.js into webpack.base.conf
'use strict';
const path = require('path');
const utils = require('./utils');
const config = require('../');
function resolve(dir) {
return path.join(__dirname, '../..', dir);
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
});
module.exports = {
context: path.resolve(__dirname, '../../'),
entry: {
app: './public/js/ide.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
resolve: {
extensions: ['.js', '.json', '.less'],
alias: {
'#': resolve('public/js'),
},
modules: ['less', 'node_modules']
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('public/js'), resolve('test')],
exclude: [
path.resolve(__dirname, "public/js/config.js")
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.hbs$/,
use: ['raw-loader']
}
]
},
node: {
setImmediate: false,
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
};
...and webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'public/html/ide.html'
: config.build.index,
template: 'public/html/ide.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../../public/fonts'),
to: config.build.assetsFonts,
},
{
from: path.resolve(__dirname, '../../public/img'),
to: config.build.assetsImg,
}
])
]
});
In 1, a user indicated that babel-loader should "just work" with dynamic imports now, so I'm not sure what I'm missing. Something out of date? Something weird in my config?
There are a couple of things you need to do.
First, like some people in the comments mentioned, you need to use a different variable name for your config. Also, if you use import this way, the object you get is a ES6 exported object, so your data will be in default
import('./config').then(function(localConfig){
//create a global config variable
config = localConfig.default;
})
Next, the error you are getting is the result of babel not using the correct preset. You need to be at least on stage-2 for this to work.
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['es2015','stage-2']
}
include: [resolve('public/js'), resolve('test')],
exclude: [
path.resolve(__dirname, "public/js/config.js")
],
},
This will solve your error, but is still not what you want. All that is happening now is that webpack will split your config file into its own chunk, making a new http request on runtime to get this file. But it will not use the config file that is on the server, but the generated chunk from the build.
To load the actual config that you have on the server on runtime, you need to make a normal http request in your app.
Here is a good stackoverflow answer about this.
https://stackoverflow.com/a/36725115/9083959
I'm using eslint-loader (for webpack 2) in my application, and I have this error:
./src/index.js
Module parse failed: /home/brenopolanski/github/saiku/srep-ui/saiku-report-viewer-ui/node_modules/eslint-loader/index.js!/home/brenopolanski/github/saiku/srep-ui/saiku-report-viewer-ui/src/index.js Unexpected token (28:4)
You may need an appropriate loader to handle this file type.
| const renderApp = (NewRoot) => {
| render(
| <AppContainer>
| <NewRoot />
| </AppContainer>,
# multi react-hot-loader/patch webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./src/index
well... if I remove the eslint-loader in my webpack, my application work correctly, but I need the eslint-loader working in my webpack.
package.json
{
"scripts": {
"start": "webpack-dashboard -- node server.js",
"build": "npm run clean && npm run build:webpack",
"build:webpack": "cross-env NODE_ENV=production webpack --progress --config ./config/webpack.prod -p",
"test": "jest --coverage",
"test:watch": "npm run test -- --watch",
"storybook": "start-storybook -p 6006 -c storybook",
"build-storybook": "build-storybook -c storybook",
"clean": "rimraf build"
},
"devDependencies": {
"#kadira/storybook": "^2.35.3",
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-jest": "^18.0.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"chai": "^3.5.0",
"cross-env": "^3.1.4",
"css-loader": "^0.26.1",
"deepmerge": "^1.3.2",
"eslint": "^3.15.0",
"eslint-loader": "^1.6.1",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
"eslint-plugin-react": "^6.9.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.28.0",
"jest-cli": "^18.1.0",
"json-loader": "^0.5.4",
"postcss-loader": "^1.2.2",
"react-hot-loader": "^3.0.0-beta.6",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"stylus": "^0.54.5",
"stylus-loader": "^2.4.0",
"svg-url-loader": "^2.0.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.3.0",
"webpack-dev-server": "^2.3.0",
"webpack-merge": "^2.6.1"
},
"dependencies": {
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",
"font-awesome": "^4.7.0",
"moment": "^2.17.1",
"pdfjs-dist": "^1.7.246",
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-datepicker": "^0.40.0",
"react-dom": "^15.4.2",
"react-pdfjs": "^1.0.7",
"react-prop-types": "^0.4.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0"
}
}
.babelrc
{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["react-hot-loader/babel"]
}
webpack.core.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
output: {
path: path.join(__dirname, '../build'),
filename: '[name]-[hash].js'
},
plugins: [
new HtmlPlugin({
title: 'Saiku Report Viewer',
template: path.join(__dirname, '../src', 'html', 'template.html')
}),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.core.js'),
useEslintrc: false
},
postcss: () => {
return [autoprefixer];
}
}
})
],
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'eslint-loader'
}
],
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'babel-loader'
},
{
test: /\.styl$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'application/font-woff'
}
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: '10000',
mimetype: 'application/octet-stream'
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'svg-url-loader',
query: {
limit: '10000',
mimetype: 'application/svg+xml'
}
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
query: {
limit: 8192
}
},
{
test: /\.ico(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
}
]
},
node: {
dns: 'empty',
net: 'empty',
tls: 'empty'
},
resolve: {
alias: {
src: path.join(__dirname, '../src'),
components: path.join(__dirname, '../src', 'components')
}
}
};
webpack.dev.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const merge = require('webpack-merge');
const core = require('./webpack.core');
module.exports = merge.smart(core, {
devtool: 'source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, '../src', 'index')
],
output: {
publicPath: ''
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.dev.js')
}
}
})
],
module: {
loaders: [
{
test: /\.css$/,
include: /(node_modules|bower_components|src)/,
loaders: [
'style-loader',
'css-loader'
]
}
]
}
});
src/index.js
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Root from './containers/Root';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './styl/saiku.styl';
const renderApp = (NewRoot) => {
render(
<AppContainer>
<NewRoot />
</AppContainer>,
document.querySelector('[data-js="app"]')
);
};
renderApp(Root);
if (module.hot) {
module.hot.accept('./containers/Root', () => {
const NewRoot = require('./containers/Root').default;
renderApp(NewRoot);
});
}
In your webpack.core.js you define both module.rules and module.loaders. Although the module.loaders is still valid, for compatibility reasons, Webpack seems to ignore it when module.rules is present.
To solve your problem you can simply put all loaders in module.rules. Since you're merging the two configs, you also have to update webpack.dev.js to use module.rules, which is also recommend by the official docs: https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules.
webpack.core.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
output: {
path: path.join(__dirname, '../build'),
filename: '[name]-[hash].js'
},
plugins: [
new HtmlPlugin({
title: 'Saiku Report Viewer',
template: path.join(__dirname, './src', 'html', 'template.html')
}),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.core.js'),
useEslintrc: false
},
postcss: () => {
return [autoprefixer];
}
}
})
],
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'eslint-loader'
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'babel-loader'
},
{
test: /\.styl$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'application/font-woff'
}
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: '10000',
mimetype: 'application/octet-stream'
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'svg-url-loader',
query: {
limit: '10000',
mimetype: 'application/svg+xml'
}
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
query: {
limit: 8192
}
},
{
test: /\.ico(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
}
]
},
node: {
dns: 'empty',
net: 'empty',
tls: 'empty'
},
resolve: {
alias: {
src: path.join(__dirname, './src'),
components: path.join(__dirname, './src', 'components')
}
}
};
webpack.dev.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const merge = require('webpack-merge');
const core = require('./webpack.core');
module.exports = merge.smart(core, {
devtool: 'source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, './src', 'index')
],
output: {
publicPath: ''
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.dev.js')
}
}
})
],
module: {
rules: [
{
test: /\.css$/,
include: /(node_modules|bower_components|src)/,
use: [
'style-loader',
'css-loader'
]
}
]
}
});