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.
Related
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...
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 am new to Jest and am trying to run a simple unit test just to ensure everything is set up correctly and have been running in to lots of issues troubleshooing errors during compile time.
When running the testing suite, Jest is successfully finding the file I am trying to test and generates the following Unexpected Identifier error message on line 1.
Any idea why this is? is something missing? I have been trying to troubleshoot this for quite some time.
/Users/foo/Sites/test/Test.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Test from './Test.vue';
^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Note, removing the import statements altogether runs the test successfully. However, the whole reason I set up Jest was to test vue components.
Test.vue
<template>
<div class="test">
</div>
</template>
<script>
export default {
name: 'test',
components: { },
data() {
return {
}
},
methods: {
helloWorld() {
return 'hello world';
}
}
}
</script>
Test.spec.js
import Test from './Test.vue'
describe('Test',() => {
it('test', () => {
expect(true).toBe(true);
});
});
package.json
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.25",
"axios": "^0.18.0",
"babel-core": "^6.26.0",
"babel-jest": "^23.6.0",
"babel-loader": "^7.1.2",
"cross-env": "^5.1.1",
"file-loader": "^2.0.0",
"jest": "^23.6.0",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.14.3",
"source-map-support": "^0.5.9",
"vue": "^2.5.7",
"vue-jest": "^3.0.0",
"vue-test-utils": "^1.0.0-beta.11",
"webpack": "^3.8.1"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "babel-jest"
}
}
You are using ES6 features in your test, namely the import statement, so you need to compile them down to ES5 using a preset.
Create a babel.config.js and add #babel/preset-env, like so,
//babel.config.js
module.exports = {
presets: ["#babel/preset-env"]
};
Next, in your package.json under the jest setting, let jest know where the root of your test code is located, and the module directories that will be recursively searched by jest, like so,
//package.json
"roots": [
"test"
],
"moduleDirectories": [
"test",
"node_modules"
],
I am trying to install new react project but have encountered some issues.
Now after resolving many issues, I'm stuck with this issue:
ERROR in ./script.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\react_project\node_modules\babel-preset-es2015\lib\index.js
I have encountered this issue after installing #babel/core version 7.
Here's my package.json:
{
"name": "react_project",
"version": "1.0.0",
"description": "first project on react",
"main": "index.js",
"scripts": {
"it": "webpack-dev-server --hot"
},
"author": "azima",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.17.1",
"webpack-dev-server": "^3.1.7"
},
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"webpack-cli": "^3.1.0"
}
}
webpack.config.js:
var path = require('path');
module.exports = {
entry: './script.jsx',
output: {
path: path.resolve(__dirname,''),
filename: 'transpiled.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
loaders: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
}
What does the error mean and how can I resolve it?
Sorry I didn't see this question earlier, but here is the problem and the solution for it:
"babel-loader": "^8.0.1" works with "#babel/core": "^7.0.0". Babel 7 moved to scoped packages and introduced some changes in the plugin API, so your problem is you are mixing old and new babel.
babel-preset-es2015 is no longer needed, since there is a #babel/preset-env which takes care of all the new features you may need based on the target platform (see the link for configuration options).
babel-preset-react (which is a babel v6 preset) is now #babel/preset-react (a v7 preset).
And your webpack loader configuration should now look like this:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
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.