I'm building a website using vuejs and trying to load agile-vue to use globally in the vue app. So I added following code into main.js:
var VueAgile = require('vue-agile');
Vue.use(VueAgile);
Later on I use browserify with babelify and envify to create a bundle.js file. and use the following code to compile:
NODE_ENV=production browserify -g envify -e main.js > bundle.js
with the babelify preset 'babel-preset-env' setup in the package.json file. I got the following error:
import VueAgile from './Agile.vue'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
I got rid of the error with adding esmify:
NODE_ENV=production browserify -g envify -p esmify -e main.js > bundle.js
but I got stuck with a new error:
<template>
^
ParseError: Unexpected token
I've been searching a while for a solution and I think there is something wrong with browserify not transforming all files (only topfiles, not dependencies) but I have not found how to force it.
All help is appreciated.
Related
Am a old dinosaur and trying initiate myself to basic webpack by following this tutorial.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70#6c16
But when i trying to execute Webpack , my terminal give me error!!
./node_modules/.bin/webpack index.js --mode=development
What am do wrong ?
I do those step
Open empty folder project in VsCode
npm init -y
Create a basic file index.js index.html
npm install webpack webpack-cli --save-dev
then am lock here ./node_modules/.bin/webpack index.js --mode=development give error
I try many other syntax but alway not bot work !
What am do wrong ?
thanks in advance
For window, path should not start from ./
Correct:
{
"scripts": {
"build": "node_modules/.bin/webpack index.js --mode=development"
}
}
I have an uncommon webpack error and I don't know how to fix it..
It has something to do with my configuration, but I don't know what it is. A schoolmate of mine can perfectly run webpack in the console with the same project.
Earlier I got the error:
PS E:\HTL\Projects\EasyWater\Software\Beispielprojekte\WebPack_Dummy> webpack
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
then I installed the Webpack CLI globally and now finally I get the error:
PS E:\HTL\Projects\EasyWater\Software\Beispielprojekte\WebPack_Dummy> webpack
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unk
nownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (`NormalModuleFactory`).
I have already reinstalled node js and literally everything, but I am continously get the same error.
As I said, my schoolmate can execute webpack with the same project.
I have installed:
ts-loader -g
webpack -g
webpack-cli -g
typescript -g
I suspect your friend is not using webpack 4 and you are using a webpack.config.js configuration file incompatible with webpack 4. I myself am walking through a tutorial involving webpack and encountered the same error. By uninstalling webpack 4 in favor of webpack 3 (npm install webpack#3 --save-dev), I was able to run my npm build script of webpack --config webpack.config.js without issue and without the need for webpack-cli. An update to the configuration file may be more appropriate, but I am just starting out with webpack and this is the path of least resistance.
When using Webpack v4, change the 'loaders' option into 'rules' e.g
module.exports = {
entry: './your-entry-file',
output: {
...
},
module:{
**rules**: [{
//rules replaces loaders
//all your configuration comes here
}]
}
}
I am trying to include local npm package in a cloud function. I used the following commands:
$ npm pack
$ npm install --save tarball-output.tgz
How do I include a packed npm package in app.js? I used:
let mypackage = require('my_package');
I getting the following error when trying to deploy:
ERROR: (gcloud.beta.functions.deploy) OperationError: code=3,
message=Function load error: Code in file app.js can't be loaded.
Did you list all required modules in the package.json dependencies?
Detailed stack trace: Error: Cannot find module 'my_package'
Your package.json must point to your tarball, like this:
{
"dependencies": {
"my_package": "file:tarball-output.tgz"
}
}
I have a problem with an npm module I've created. It's built using browserify and babelify.
Here is a snippet from the package.json:
"name": "foo",
"main": "index.js",
"scripts": {
"start": "watchify src/foo.js -t babelify -s foo -o ./index.js"
}
Which is basically the entire build process (no minifying or anything). There are also some tests, which run without a problem.
In src/foo.js I import other files, which are located in the same folder.
import bar from './bar';
So, the file structure looks something like:
index.js
package.json
src/
foo.js
bar.js
Now, when I install the module elsewhere, in a completely different project, and import it:
import foo from 'foo';
... and build the new project with
watchify src/app.js -d -t babelify -o js/app.js
I get this error:
Error: Cannot find module './bar' from '[file_path]/node_modules/foo/'
So basically (as I understand it), it looks at the (now) var bar = require('./bar'); and searches in the file path (the same folder) whereas, everything in reality was bundled into one file, everything included.
What am I missing here? How do I build it correctly?
I'm using browserify with brfs (as described here: knockout integration with browserify) and am checking-in to a build controller that doesn't have Node installed, and doesn't have npm installed either. My solution is to check-in node.exe and then do the following to use browserify:
.\node.exe .\browserify\bin\cmd.js index.js -o app.js
Works great. However, I want to use brfs, and browserify expects this as a transform, e.g.
browserify -t brfs main.js > bundle.js
Now I can't figure this out because 'brfs' won't be aliased, and I can't figure out how to use my node.exe trick again. What I think I want is this, which obviously doesn't work because parenthesis don't work like this in cmd:
.\node.exe .\browserify\bin\cmd.js -t (.\node.exe .\brfs\bin\args.js) index.js -o app.js
How can I accomplish this?
I figured it out - once I am running browserify using node.exe with my above method, as long as brfs is in my node_modules folder, node/browserify will search the node_modules folder for brfs. Thus, the following works:
.\node.exe .\browserify\bin\cmd.js -t brfs index.js -o app.js