webpack error when trying to load a Bootstrap js file - javascript

I have a gridsome project (v0.7.23). I load the Bootstrap framework via npm.
Im using node v14.18.0 via nvm.
When I import a Bootstrap JS component (collapse) :
import Collapse from 'bootstrap/js/src/collapse'
webpack fails to build and returns this error :
Module parse failed: Identifier directly after number (8:17)
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
| */
|
> const MAX_UID = 1_000_000
| const MILLISECONDS_MULTIPLIER = 1000
| const TRANSITION_END = 'transitionend'
# ./node_modules/bootstrap/js/src/collapse.js 8:0-14:21 71:23-45 182:4-10 188:22-44 216:20-30 232:23-45 288:19-41 300:0-18
# ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/gridsome/node_modules/vue-loader/lib??vue-loader-options!./src/components/Nav.vue?vue&type=script&lang=js&
# ./src/components/Nav.vue?vue&type=script&lang=js&
It's like webpack was not able to parse/read the const keyword.
Here is my package.json dependencies (up to date) :
"dependencies": {
"#gridsome/plugin-sitemap": "^0.4.0",
"#popperjs/core": "^2.9.2",
"bootstrap": "^5.0.1",
"gridsome": "^0.7.0",
"gridsome-plugin-gtm": "^0.1.1",
"gsap": "^3.6.1"
},
"devDependencies": {
"node-sass": "^5.0.0",
"sass-loader": "^13.2.0",
"css-loader": "^6.7.2",
"postcss-loader": "^7.0.2",
"sass": "^1.56.1",
"style-loader": "^3.3.1"
}
Any idea?
thanks

you just need to add following code in your webpack.config.js file in rules array.
first add babel-loader and #babel/preset-react in your devDepencies
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['#babel/preset-react']
}
}
}
hope this will help you...

Related

Module parse failed: Unexpected character '#'

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.

Webpack creating separate JS files for few imports

I am trying to build a custom webpack configuration for a complex project. While building I have observed that webpack is generating separate JS file when I import babel-runtime/core-js/json/stringify. Can someone help me understand what's happening here and why webpack is generating a separate JS file.
package.json
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "A boilerplate for large scale react apps",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "sh -ac 'webpack --mode production ${DEPLOY_TARGET:+--env.target $DEPLOY_TARGET}'",
"build:production": "DEPLOY_TARGET='production' yarn build",
"build:staging": "DEPLOY_TARGET='staging' yarn build"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"#typescript-eslint/eslint-plugin": "2.x",
"#typescript-eslint/parser": "2.x",
"babel-eslint": "10.x",
"babel-loader": "^8.0.6",
"babel-preset-react-app": "^9.0.2",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"dotenv": "^8.2.0",
"eslint": "6.x",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "^3.0.2",
"eslint-plugin-flowtype": "3.x",
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-react": "7.x",
"eslint-plugin-react-hooks": "1.x",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"react-hot-loader": "^4.12.15",
"stylelint": "^11.1.1",
"stylelint-config-standard": "^19.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-custom-processor-loader": "^0.6.0",
"stylelint-processor-styled-components": "^1.8.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2",
"webpack-merge": "^4.2.2",
"workbox-webpack-plugin": "^4.3.1"
},
"dependencies": {
"lodash": "^4.17.15",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-router-dom": "^5.1.2",
},
"peerDependencies": {
"stylelint": "^11.1.1"
}
}
webpack.config.js
const { DefinePlugin } = require('webpack');
const path = require('path');
// Webpack plugins
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWepackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { rootDir } = require('./utils');
const {
entryPath,
getEnvJson,
htmlTemplatePath,
outputDir,
publicDir,
sourceDir,
} = require('./utils');
module.exports = env => ({
// Configure's our app entry points
entry: {
main: entryPath,
},
// Configure's loaders to let webpact know how different extension should be
// loaded when bundling
module: {
rules: [
// Configure's babel loader for transpiling javascript, eslint loader
// for linting javascript, stylelint loader for css linting
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'stylelint-custom-processor-loader',
options: {
configPath: path.resolve(rootDir, '.stylelintrc.js'),
},
},
'eslint-loader',
]
},
// Configure's loaders for images
{
test: /.(png|jpg|jpeg|svg|gif)/,
use: 'file-loader'
},
]
},
// Configure's destination for the bundled code
output: {
path: outputDir,
},
// Configure's additions plugins to be used by webpack
// Order of plugins is important
plugins: [
// Removes all the contents of output folder(but not the folder itself)
// before every webpack build
new CleanWebpackPlugin(),
// Copies all contents of public folder as it is excluding index.html file
new CopyWepackPlugin([
{
from: publicDir,
to: outputDir,
ignore: ['index.html']
}
]),
// Injects target specific enviroment variables
new DefinePlugin({
'process.env': getEnvJson(env.target)
}),
// Uses `public/index.html` and creates a `index.html` file for the app
// by injecting the generated bundles javascript files
new HtmlWebpackPlugin({
template: htmlTemplatePath
}),
],
// Configure's custom behavior for how modules are resolved by webpack
resolve: {
modules: [sourceDir, 'node_modules']
}
});
.babelrc
{
"presets": ["react-app"]
}
That is because of your entryPath.
module.exports = {
entry: {
bundle1: '.src/fileForBundle1.js',
bundle2: '.src/fileForBundle2.js'
},
This would generate two bundles.
Make sure entryPath is not an object of multiple values.
Issue was with the file-loader regex which was incorrectly configured and which resulted in matching babel-runtime/core-js/json/stringify. So file-loader was being used to load it.

Webpack dev server throws error - Refused to execute script because its MIME type ('text/html') is not executable

I use Webpack bundler and Webpack dev server for local development. The front-end is in React.js+Redux and the back-end in Node.js and koajs.
In back-end, I use passportjs library for user authentication and other libraries koa-passport, passport-facebook, passport-google-auth for authentication through Facebook or Google. Basically, I implemented koa-passport-example.
If my application wants to redirect user to Facebook or Google login page, Webpack dev server throws error:
GET http://localhost:8090/auth/bundle.js net::ERR_ABORTED
Refused to execute script from 'http://localhost:8090/auth/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
If I generate bundle by Webpack and host it on Node.js server, I don't get this error. I need to find out how to set up Webpack dev server to get rid of this error message.
package.json
"scripts": {
"debug": "./node_modules/nodemon/bin/nodemon.js --inspect ./script/server.js",
"webpack": "npm run serve | npm run dev",
"start": "node ./script/server.js",
"serve": "./node_modules/.bin/http-server -p 8080",
"dev": "webpack-dev-server -d --progress --colors --port 8090 --hot --inline",
},
"dependencies": {
"#koa/cors": "^2.2.1",
"actions": "^1.3.0",
"aws-s3-form": "^0.3.5",
"aws-sdk": "^2.165.0",
"axios": "^0.16.2",
"bootstrap": "^3.3.7",
"bootstrap-timepicker": "github:janzenz/bootstrap-timepicker#feature/compatibility-es6",
"d3-ease": "^1.0.3",
"d3-selection": "^1.1.0",
"d3-shape": "^1.2.0",
"d3-transition": "^1.1.0",
"font-awesome": "^4.7.0",
"http-server": "^0.10.0",
"immutable": "^3.8.2",
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"jquery.panzoom": "^3.2.2",
"jsonwebtoken": "^8.1.0",
"juration": "^0.1.0",
"knex": "^0.14.2",
"koa": "^2.3.0",
"koa-body": "^2.5.0",
"koa-bodyparser": "^4.2.0",
"koa-logger": "^3.1.0",
"koa-passport": "^4.0.1",
"koa-ratelimit": "^4.0.0",
"koa-router": "^7.2.1",
"koa-send": "^4.1.1",
"koa-session": "^5.5.1",
"koa-static": "^4.0.2",
"moment": "^2.18.1",
"objection": "^0.9.2",
"oembed-auto": "0.0.3",
"passport": "^0.4.0",
"passport-facebook": "^2.1.1",
"passport-google-oauth": "^1.0.0",
"passport-jwt": "^3.0.1",
"pg": "^7.4.0",
"probe-image-size": "^3.1.0",
"puppeteer": "^0.12.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-dropzone": "^4.2.1",
"react-facebook-login": "^3.6.2",
"react-google-login": "^3.0.2",
"react-modal": "^3.1.2",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-share": "^1.17.0",
"react-transition-group": "^1.2.1",
"react-twitter-widgets": "^1.7.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"request": "^2.83.0",
"request-promise-native": "^1.0.5",
"select2": "^4.0.4",
"select2-bootstrap-theme": "0.1.0-beta.10",
"shave": "^2.1.3",
"sqlite3": "^3.1.13",
"sugar-date": "^2.0.4",
"svg-url-loader": "^2.3.0",
"twitter": "^1.7.1",
"twitter-widgets": "^1.0.0",
"unfluff": "^1.1.0"
},
"devDependencies": {
"autoprefixer": "^7.1.4",
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"duplicate-package-checker-webpack-plugin": "^2.0.2",
"eslint": "^4.7.2",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
"favicons-webpack-plugin": "0.0.7",
"file-loader": "^0.11.2",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"node-sass": "^4.5.3",
"nodemon": "^1.12.1",
"npm-install-webpack-plugin": "^4.0.5",
"postcss": "^6.0.11",
"postcss-loader": "^2.0.6",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"webpack-notifier": "^1.5.0"
}
webpack.config.js
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const path = require('path');
const WebpackNotifierPlugin = require('webpack-notifier');
const autoprefixer = require('autoprefixer');
const TARGET = process.env.npm_lifecycle_event;
console.log(`target event is ${TARGET}`);
let outputFileName = 'app';
outputFileName += TARGET === 'prod' ? '.min.js' : '.js';
const common = {
entry: {
app: './index.jsx',
},
module: {
rules: [
{
test: /\.js[x]?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader?presets[]=es2015&presets[]=react',
},
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /\.less$/,
loaders: ['style-loader', 'css-loader', 'less-loader'],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|ttf|svg|gif|png|jpg|otf|woff|woff2)$/,
loader: 'url-loader',
},
],
},
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: ['last 3 versions'],
}),
],
},
}),
new WebpackNotifierPlugin(),
],
};
if (TARGET === 'dev' || !TARGET) {
module.exports = webpackMerge(common, {
devtool: 'eval-source-map',
output: {
filename: 'bundle.js',
sourceMapFilename: '[file].map',
},
devServer: {
contentBase: path.resolve(__dirname), // New
historyApiFallback: true,
},
});
}
login.jsx
...
Login
...
server.js
const Koa = require('koa');
const Router = require('koa-router');
const logger = require('koa-logger');
const cors = require('#koa/cors');
const bodyParser = require('koa-bodyparser');
const serve = require('koa-static');
const path = require('path');
const session = require('koa-session');
const app = new Koa();
// trust proxy
app.proxy = true;
const router = new Router();
// sessions
app.keys = ['your-session-secret'];
app.use(session({}, app));
app.use(logger());
app.use(cors());
app.use(bodyParser());
require('./controllers/auth');
const passport = require('koa-passport');
app.use(passport.initialize());
app.use(passport.session());
app.use(serve(path.join(process.env.PWD, '/dist')));
router
.get('/auth/facebook', passport.authenticate('facebook'))
.get(
'/auth/facebook/callback',
passport.authenticate('facebook', {
successRedirect: '/podcast',
failureRedirect: '/',
}),
);
app.use(router.routes()).use(router.allowedMethods());
// don't listen to this port if the app is required from a test script
if (!module.parent) {
app.listen(process.env.PORT || 1337);
console.log('app listen on port: 1337');
}
Looking into Webpack further we should be clear about what Webpack is and what it is used for. Webpack is front end tool, it will build front end projects and has the capability of managing tasks similar to gulp/grunt. It can be a server to serve static content. But what it is not is a full fledged back end server. You can't easily build back end API and manage complex routing. This includes things like login functionality. Instead of reinventing the wheel, use Webpack as a dev tool to easily modify and see the updated result for web design. And if you need more functionality integrate Webpack by running it in watch mode and run the back end server at the same time and setup a proxy so that Webpack will defer to the back end server for complex routing. You can use any back end technology, though Webpack is built on Common.js library so integrating it into node.js and express seems to be the easiest because they are part of a javascript ecosystem.
If I could comment I would, anyhow, I was reading through the webpack docs for the DevServer and I Think that the server is responding with the incorrect MIME type possibly because it isn't finding the bundle.js script where it is expecting it. I noticed the console output being 'http://localhost:8090/auth/bundle.js' and in the documentation the dev server expects it in the root. I think that if bundle.js is really in the auth directory that you may need to tell the server where it is with the publicPath option.
output: {
filename: 'bundle.js',
sourceMapFilename: '[file].map',
path: path.resolve('build/js/),// moves the bundle.js out of the root
publicPath: '/auth/' // it is recommended that the publicPath is declared in both output and devServer
// publicPath links the path of bundle.js to this path in the html.
},
devServer: {
contentBase: path.resolve(__dirname), // New
historyApiFallback: true,
publicPath: "/auth/" // Both publicPath options should be the same as what is in your html loading the scripts
},
As I understand the webpack dev server, the bundle.js is not written to disc. It is served virtually.
Now with all of this there is a need to either proxy the already built node.js server or build one to handle just the api you need to use. Webpack provides a dev middleware module to use as middleware in a basic node.js express server. You can see the basics of the middleware here. What you really need to start with from the documentation is installing via npm webpack-dev-middleware and express
npm install --save-dev webpack-dev-middleware express
Then create a new server file like index.js in the root of the project because you already have a server.js. Now create the basic server that you need with only the routing and packages you need to handle the api calls.
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
This is from the webpack website and you will need to do your own api routing. And you would run the project like a normal node project and it should handle the bundle.js requests.
And let's not forget that there is a plubin for koa koa-webpack-dev.I haven't personally used koa, but if you need it you can see how to use it here.
i had a similar issue and thought i'd post my solution incase anyone had the same. basically, i was trying to refresh my app on a dynamic subroute, localhost:3000/route/dynamicRoute, and it was throwing a similar error to what's mentioned in the question. i solved my issue by adding publicPath: '/' to my output settings in my webpack config. the following is my webpack.config.js for reference.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: ['babel-polyfill', './src/client/index.js'],
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(pdf|jpg|png|gif|svg|ico)$/,
use: [
{
loader: 'url-loader'
},
]
}
]
},
devServer: {
port: 3000,
open: true,
proxy: {
'/api': 'http://localhost:8080'
},
historyApiFallback: true,
contentBase: './public/index.html',
hot: true
},
plugins: [
new CleanWebpackPlugin([outputDirectory]),
new HtmlWebpackPlugin({
template: './public/index.html',
favicon: './public/favicon.ico'
})
]
};

Webpack vue-loader gives "unexpected token {" for single-page .vue component

I am primarily a C# backend developer and trying to learn Vue.js. I use Visual Studio 2017 + ASP.NET MVC (as API + one layout) + Vue.js + Webpack.
.vue single-page component files are loaded by vue-loader, and .js files are loaded by babel-loader with es2015 preset.
app.js is transpiled successfully into output dist/script.js file by Babel, but .vue files give me syntax errors whichever combinations I use. I have the same error even if my navigation.vue error is absolutely empty:
ERROR in ./assets/component/navigation.vue
Module build failed: SyntaxError: Unexpected token {
Task Runner Explorer content:
nagivation.vue:
<template>
<div>
{{ greeting }}
</div>
</template>
<script>
export default {
data: {
greeting: 'Hello World'
}
}
</script>
app.js:
import Vue from "../vendor/vue.js";
Vue.component("navigation", require("../component/navigation.vue"));
const app = new Vue({
el: "#app"
});
webpack.config.js:
module.exports = {
entry: "./assets/core/app.js",
output: {
filename: "./dist/script.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["es2015"]
}
},
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
resolve: {
extensions: ["*", ".js", ".vue"]
},
plugins: [
new NotifierPlugin()
]
};
package.json:
{
"version": "1.0.0",
"name": "helloworld",
"private": true,
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-vue": "^1.2.1",
"clean-webpack-plugin": "^0.1.17",
"webpack": "^3.8.1"
},
"dependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"eslint": "^4.10.0",
"eslint-cli": "^1.1.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.4.0",
"vue-loader": "^13.5.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.3",
"webpack-notifier": "^1.5.0"
}
}
What can be a cause of such cryptic error? How people usually debug such errors?
The error likely isn't coming from your .vue file but from vue-loader itself. If you are using vue-loader >= 13.1 (and possibly one of the vue-loader 12 versions) then you will need to ensure you have node 6.2 or above on your machine, because vue-loader uses features that only became available in that version. You can check your node version by running:
node --version
If you can't update your node version then try installing one of the earlier releases of vue-loader by doing:
npm install vue-loader#13.0.1 --save-dev
And hopefully the error should go away.
As a side note, you should also start using babel-preset-env rather than babel-preset-2015 as that has now been (or is being) deprecated.

Webpack won't output css file when building less [duplicate]

This is my webpack.config.js file:
var ExtractTextPlugin = require('extract-text-webpack-plugin'),
webpack = require('webpack');
module.exports = {
entry: [
'./src/app.js',
],
output: {
path: __dirname + '/../web/js',
filename: 'build.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url?limit=5000"
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new ExtractTextPlugin('build.css')
]
}
This is my package.json file:
"dependencies": {
"angular": "^1.6.4",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^3.3.7",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"jquery": "^3.2.1",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.4.1"
}
This is my app.js file:
import 'babel-polyfill';
import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap.js';
import 'bootstrap/dist/css/bootstrap.css';
After trying to start the webpack I get an error.
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css Module parse failed:
/var/www/dcracks/app/webpack/node_modules/bootstrap/dist/css/bootstrap.css
Unexpected token (7:5) You may need an appropriate loader to handle this file type.
| */
| /*! normalize.css v3.0.3
| MIT License
| github.com/necolas/normalize.css */
| html {
| font-family: sans-serif;
| -webkit-text-size-adjust: 100%;
# ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-42
# ./src/app.js # multi ./src/app.js
I reread already a bunch of material and shoveled a bunch of posts in various forums.
What am I doing wrong?
The signature of ExtractTextPlugin.extract is:
ExtractTextPlugin.extract(options: loader | object)
As there is no second argument, your css-loader is not being used. The most common configuration is to use css-loader to process the CSS files and style-loader as a fallback, which is used when it shouldn't be extracted (the configured loaders are still applied, but instead of being extracted the fallback loader is used).
You can use the rule that is shown in the Readme - Usage.
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}

Categories

Resources