I'm using webpack for bundling react app. Everything works find on my Windows machine. But when I try to run it in the Linux server (centos 6.5) . I got following error:
[root#xxxxx]# webpack
module.js:457
throw err;
^
Error: Cannot find module './Parser.js'
at Function.Module._resolveFilename (module.js:455:15)
at Function.Module._load (module.js:403:25)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (path/to/web/node_modules/htmlparser2/lib/index.js:1:76)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/path/to/web/node_modules/renderkid/lib/tools.js:4:14)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
here is my webpack configure file:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const validate = require('webpack-validator');
const parts = require('./libs/parts');
const PATHS = {
app:path.resolve(__dirname,'shared'),
build:path.resolve(__dirname,'build'),
css:[
//path.join(__dirname,'node_modules','purecss'),
//path.join(__dirname,'client','client.less'),
path.join(__dirname,'client','client.less')
]
};
const common = {
entry:{
app:PATHS.app,
style:PATHS.css
},
output:{
path:PATHS.build,
filename:'[name].js',
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
}
};
var config;
switch (process.env.npm_lifecycle_event) {
case "build":
config = merge(common,
{
devtool: 'cheap-module-source-map',
//stats: 'errors-only',
output: {
path: PATHS.build,
filename: '[name].js',
// This is used for require.ensure. The setup
// will work without but this is useful to set.
chunkFilename: '[chunkhash].js'
}
},
parts.clean(PATHS.build),
parts.setFreeVariable(
'process.env.NODE_ENV',
'production'
),
parts.supportESSix(PATHS.app),
parts.extractBundle({
name: 'vendor',
entries: ['react','react-dom','react-router','react-addons-pure-render-mixin',
'redux','react-redux','immutable',"redux-thunk","superagent","draft-js","react-dropzone","react-modal"]
}),
parts.purifyCSS(PATHS.css),
parts.setupLess(PATHS.css),
parts.minify(),
parts.compressBundle()
);
break;
default:
config = merge(common,
{
devtool: 'source-map',
//stats: 'errors-only',
output: {
path: PATHS.build,
filename: '[name].js',
// This is used for require.ensure. The setup
// will work without but this is useful to set.
chunkFilename: '[chunkhash].js'
}
},
parts.clean(PATHS.build),
parts.setFreeVariable(
'process.env.NODE_ENV',
'production'
),
parts.supportESSix(PATHS.app),
parts.extractBundle({
name: 'vendor',
entries: ['react','react-dom','react-router','react-addons-pure-render-mixin',
'redux','react-redux','immutable',"redux-thunk","superagent","draft-js","react-dropzone","react-modal"]
}),
parts.purifyCSS(PATHS.css),
parts.setupLess(PATHS.css),
parts.minify()
);
}
module.exports = validate(config);
and finally, the package.json file :
{
"name": "bravo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"bootstrap": "^3.3.7",
"clean-webpack-plugin": "^0.1.10",
"compression-webpack-plugin": "^0.3.1",
"css-loader": "^0.24.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"purecss": "^0.6.0",
"purifycss-webpack-plugin": "^2.0.3",
"semantic-ui": "^2.2.4",
"semantic-ui-less": "^2.2.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0",
"webpack-merge": "^0.14.1",
"webpack-validator": "^2.2.7"
},
"dependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"body-parser": "^1.15.2",
"compress": "^0.99.0",
"cookie-parser": "^1.4.3",
"csurf": "^1.9.0",
"draft-js": "^0.9.1",
"es6-promise": "^3.2.1",
"express": "^4.14.0",
"express-jwt": "^5.0.0",
"express-session": "^1.14.1",
"form-data": "^2.0.0",
"history": "^3.2.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"jsonwebtoken": "^7.1.9",
"method-override": "^2.3.6",
"mongoose": "^4.6.0",
"passport": "^0.3.2",
"passport-facebook": "^2.1.1",
"password-hash": "^1.2.2",
"q": "^1.4.1",
"react": "^15.3.2",
"react-addons-pure-render-mixin": "^15.3.1",
"react-dom": "^15.3.1",
"react-dropzone": "^3.6.0",
"react-modal": "^1.5.2",
"react-redux": "^4.4.5",
"react-router": "^2.7.0",
"redux": "^3.6.0",
"redux-immutable": "^3.0.8",
"redux-thunk": "^2.1.0",
"sanitize-html": "^1.13.0",
"superagent": "^2.3.0"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
please point me out why I could not make it run on linux ? is there any platform specific problem that I should be aware of?
Related
I have some problem with my next.js application.
When I use any yarn/npm/next command I'm getting similar error:
> Build error occurred
Error: Cannot find module 'next-pwa/cache'
Require stack:
- D:\Criptic\next.config.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1026:15)
at mod._resolveFilename (C:\Users\carbo\AppData\Roaming\npm\node_modules\next\dist\build\webpack\require-hook.js:23:32)
at Module._load (node:internal/modules/cjs/loader:872:27)
at Module.require (node:internal/modules/cjs/loader:1092:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (D:\Criptic\next.config.js:3:24)
at Module._compile (node:internal/modules/cjs/loader:1205:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
at Module.load (node:internal/modules/cjs/loader:1068:32)
at Module._load (node:internal/modules/cjs/loader:909:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ 'D:\\Criptic\\next.config.js' ]
}
This is my package.json
"scripts": {
"clean": "rimraf \"{node_modules,.next,out.cache}\"",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"prepare": "husky install"
},
"dependencies": {
"#headlessui/react": "^1.7.2",
"#hookform/resolvers": "^2.9.8",
"#tailwindcss/forms": "^0.5.3",
"#tailwindcss/typography": "^0.5.7",
"axios": "^0.27.2",
"classnames": "^2.3.2",
"date-fns": "^2.29.3",
"dayjs": "^1.11.5",
"ethers": "^5.7.1",
"framer-motion": "^7.3.6",
"jotai": "^1.8.4",
"js-cookie": "^3.0.1",
"little-state-machine": "^4.7.0",
"lodash": "^4.17.21",
"next": "12.3.1",
"next-pwa": "^5.6.0",
"next-seo": "^5.5.0",
"next-sitemap": "^3.1.22",
"next-themes": "^0.2.1",
"overlayscrollbars": "^1.13.1",
"overlayscrollbars-react": "^0.3.0",
"rc-slider": "^10.0.1",
"react": "18.2.0",
"react-countdown": "^2.3.2",
"react-dom": "18.2.0",
"react-dropzone": "^14.2.2",
"react-hook-form": "^7.36.0",
"react-query": "^3.39.2",
"react-share": "^4.4.0",
"react-table": "^7.7.0",
"react-use": "^17.3.2",
"recharts": "2.1.12",
"swiper": "^8.4.2",
"tiny-invariant": "^1.2.0",
"uuid": "^9.0.0",
"web3modal": "^1.9.9",
"yup": "^0.32.11"
},
next-pwa is here.
This is my next.config.js
/** #type {import('next').NextConfig} */
const runtimeCaching = require('next-pwa/cache');
const withPWA = require('next-pwa')({
dest: 'public',
disable: process.env.NODE_ENV === 'development',
runtimeCaching,
});
const nextConfig = withPWA({
reactStrictMode: true,
...(process.env.NODE_ENV === 'production' && {
typescript: {
ignoreBuildErrors: true,
},
eslint: {
ignoreDuringBuilds: true,
},
}),
});
module.exports = nextConfig;
If it possible please help me. Thank you in advance for your help
I tried to find something in the documentation about this, however, the only thing that I found approximately correct is the following link, which does not have an exact solution to this problem https://nextjs.org/docs/messages/next-config-error
I use the latest versions of vue-cli3 webpack4 and vue-loader v15.
I want to configure vue-loader, but there is an error:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
vue.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
productionSourceMap: false,
baseUrl: "./",
configureWebpack: {
module: {
rules: [{
test: /\.vue$/,
loader: "vue-loader"
}]
},
plugins: [
new VueLoaderPlugin()
]
}
}
package.js
"dependencies": {
"awe-dnd": "^0.3.1",
"axios": "^0.18.0",
"iview": "^3.1.5",
"lodash": "^4.17.11",
"vue": "^2.5.17",
"vue-router": "^3.0.2"
},
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#vue/cli-plugin-babel": "^3.2.0",
"#vue/cli-plugin-eslint": "^3.2.1",
"#vue/cli-service": "^3.2.0",
"css-loader": "^1.0.1",
"eslint": "^5.9.0",
"eslint-plugin-vue": "^4.7.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"iview-loader": "^1.2.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue-cli-plugin-iview": "^1.0.6",
"vue-hot-reload-api": "^2.3.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.1",
"webpack-chain": "^5.0.1",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
},
I called console.log on vue-loader/plugin.js.
rawRules (line-number 27)
There are 20+ rules.
/\.vue$/ matched the second rule.
But the second rule is url-loader?
What do I do?
I think you should put vue-loader on dependencies. Recently i updated my project: vue, vue-loader, webpack...
this is my package.json
{
"name": "pack",
"private": true,
"version": "0.0.0",
"scripts": {
"build": "webpack --env.prod --config webpack.config.js"
},
"devDependencies": {
"#babel/preset-env": "^7.0.0-rc.2",
"#types/webpack-env": "^1.13.5",
"aspnet-webpack": "^2.0.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"css-loader": "^0.25.0",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^2.0.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.3.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^4.23.1",
"webpack-hot-middleware": "^2.24.3"
},
"dependencies": {
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-3": "^6.24.1",
"chart.js": "^2.7.3",
"downloadjs": "^1.4.7",
"idle-vue": "^2.0.5",
"jwt-decode": "^2.2.0",
"material-design-icons-iconfont": "^3.0.3",
"v-offline": "^1.0.10",
"vue": "^2.5.21",
"vue-analytics": "^5.12.2",
"vue-chartjs": "^3.4.0",
"vue-chartkick": "^0.5.0",
"vue-config": "^1.0.0",
"vue-embed": "^1.0.0",
"vue-google-charts": "^0.3.2",
"vue-json-excel": "^0.2.5",
"vue-loader": "^15.4.2",
"vue-moment": "^4.0.0",
"vue-popperjs": "^1.6.1",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.21",
"vuetify": "^1.3.14"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Your webpack.config it seems fine... but just in case, this is my code:
var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
context: __dirname,
entry: {
main: ['babel-polyfill', './App/index.js']
},
plugins:[
new VueLoaderPlugin()
],
module: {
rules: [{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
...
I was having this same problem and found this thread solved my problem.
Essentially, you do not need to specify the module rules or the loader for vue-loader when using vue-cli to build your app because vue-cli provides vue-loader out of the box.
I do not know why we get the error when we try to specify the module rules, and it is unfortunate that it gives this unhelpful error, but regardless, I hope this helps!
While moving to vue-cli 3 I encountered following problem.
I import a plugin's css to my app.scss.
This line: background-image: url(default-skin.svg); breaks yarn build, which throws this error:
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: navigator is not defined
Here is my vue.config.js:
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
const ASSETS_DIR = 'static'
module.exports = {
assetsDir: ASSETS_DIR,
runtimeCompiler: true,
chainWebpack: config => {
config
.plugin('provide-plugin')
.use(webpack.ProvidePlugin, [{
axios: "axios",
$: "jquery",
jQuery: "jquery",
_: "lodash",
mapGetters: ['vuex', 'mapGetters'],
mapActions: ['vuex', 'mapActions']
}])
.end()
.plugin('copy-plugin')
.use(CopyWebpackPlugin, [
[{
from: path.resolve(__dirname, 'static'),
to: ASSETS_DIR,
ignore: ['.*']
}]
])
.end()
.plugin('sprite-loader-plugin')
.use(SpriteLoaderPlugin)
config.module
.rule('svg')
.test(/\.svg$/)
.use('file-loader')
.loader('svg-sprite-loader')
}
}
Any solution?
update
The css which breaks yarn build
Package.json:
{
"name": "f2c",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Victor Ponamariov <victor.ponamariov#gmail.com>",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"animate.css": "^3.6.1",
"axios": "^0.18.0",
"blueimp-canvas-to-blob": "^3.14.0",
"fabric": "^2.3.3",
"flexboxgrid": "^6.3.1",
"intl-tel-input": "^12.4.0",
"jquery": "^3.3.1",
"libphonenumber-js": "^1.2.21",
"lodash": "^4.17.10",
"masonry-layout": "^4.2.1",
"moment": "^2.22.2",
"nprogress": "^0.2.0",
"perfect-scrollbar": "^1.4.0",
"photoswipe": "^4.1.2",
"portal-vue": "^1.3.0",
"raven-js": "^3.25.2",
"sharer.js": "^0.3.3",
"stickyfilljs": "^2.0.5",
"tippy.js": "^2.5.2",
"vee-validate": "^2.0.6",
"vue": "^2.5.2",
"vue-analytics": "^5.14.0",
"vue-carousel": "^0.9.0",
"vue-clipboard2": "^0.1.1",
"vue-cropperjs": "^2.2.0",
"vue-gtm": "^1.0.2",
"vue-i18n": "^8.0.0",
"vue-infinite-loading": "^2.3.3",
"vue-infinite-scroll": "^2.0.2",
"vue-meta": "^1.5.2",
"vue-mq": "^0.2.1",
"vue-multiselect": "^2.1.0",
"vue-perfect-scrollbar": "^0.1.0",
"vue-popperjs": "^1.2.6",
"vue-router": "^3.0.1",
"vue-select": "^2.4.0",
"vue-slider-component": "^2.7.4",
"vue-social-sharing": "^2.3.3",
"vue-star-rating": "^1.6.0",
"vue-sweetalert2": "^1.5.2",
"vue-tippy": "^2.0.18",
"vue-yandex-metrika": "^1.6.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-rc.5",
"#vue/cli-plugin-eslint": "^3.0.0-rc.5",
"#vue/cli-service": "^3.0.0-rc.5",
"copy-webpack-plugin": "^4.5.2",
"node-sass": "^4.9.2",
"normalize.css": "^8.0.0",
"postcss-import": "^11.1.0",
"postcss-url": "^7.3.2",
"sass-loader": "^7.0.3",
"svg-sprite-loader": "^3.8.0",
"vue-template-compiler": "^2.5.16",
"webpack-svgstore-plugin": "^4.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"globals": {
"$": false,
"jQuery": false,
"_": false,
"axios": false,
"VK": false,
"gapi": false,
"FB": false,
"mapGetters": false,
"mapActions": false
},
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-import": {},
"postcss-url": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
App folder structure:
I don't have a fix or full explanation, but there is a workaround...
The problem seems to be caused by postcss-import when importing the CSS file from inside a <style> tag of an SFC:
// App.vue
<style lang="scss">
#import 'app.scss'; /* imports default.css -> default-skin.svg */
</style>
You can workaround the build error by moving the import into the <script> tag (or to main.js):
// App.vue
<script>
import 'app.scss'; /* imports default.css -> default-skin.svg */
</script>
see GitHub repo
Try Deleting node modules folder and then run yarn install again.
If didn't work try:
global.navigator = {
userAgent: 'node.js'
};
Ref vue-pswipe, GuoQichen uses this config for svg.
config.module
.rule('svg')
.use('file-loader')
.clear()
.loader('url-loader')
.options({
limit: 4 * 1024,
name: 'img/[name].[hash:8].[ext]',
})
babel-loader transpiles same code in windows successfully but can not turn vue-router in es5 in mac .
I rebuilt all the code without using vue-router and everything goes well.
So i just wonder if there has anybody encountered this ?
mac: 10.12.4 (16E195)
node: v8.1.3
package.json:
{
"engines": {
"node": "7.5.0"
},
"dependencies": {
"vue": "^2.3.4",
"vue-router": "^2.6.0",
"vue-template-compiler": "^2.3.4"
},
"devDependencies": {
"autoprefixer": "^6.7.6",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.2",
"babel-loader": "^7.1.0",
"babel-plugin-component": "^0.9.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.4.2",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-1": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",
"babel-preset-stage-3": "^6.22.0",
"css-loader": "^0.27.3",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.1.0",
"exports-loader": "^0.6.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.10.1",
"gulp": "3.9.1",
"gulp-cssnano": "2.1.2",
"gulp-delete-lines": "0.0.7",
"gulp-eslint": "3.0.1",
"gulp-less": "^3.3.0",
"gulp-nodemon": "^2.2.1",
"gulp-replace": "^0.5.4",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.3.11",
"html-webpack-plugin": "^2.28.0",
"imports-loader": "^0.7.1",
"json-loader": "0.5.4",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"node-sass": "^4.5.1",
"postcss-loader": "^1.3.3",
"raw-loader": "0.5.1",
"run-sequence": "1.2.2",
"sass-loader": "^6.0.6",
"script-loader": "^0.7.0",
"style-loader": "^0.15.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.2.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1"
}
}
.babelrc:
{
"presets": [
["es2015", { "modules": false }], "stage-1", "stage-2", "stage-3"
],
"plugins": [
["transform-vue-jsx"],
["transform-object-assign"],
["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}]]
]
}
webpack:
module.exports = {
entry: {
app: `./client/app.js`
},
output: {
path: path.resolve(__dirname, `../../`, config.destination),
filename: `[name].js`
},
module: {
rules: [{
test: /\.vue$/,
loader: `vue-loader`,
options: {
loaders: {
js: 'babel-loader'
}
}
}, {
test: /\.js$/,
loader: `babel-loader`,
exclude: /(node_modules)/
}],
noParse: [/\/dist\/.+/]
},
resolve: {
modules: [rootPath, `node_modules`],
extensions: [`.js`, `.jsx`, `.vue`, `.json`, `less`, `scss`, `css`, `html`],
alias: {
vue: `node_modules/vue/dist/vue.js`,
client: clientPath
}
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
mangle: false,
comments: false,
warnings: false,
sourceMap: !!argv.test
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
],
devtool: `cheap-source-map`
};
Got error: [ 'app.js from UglifyJs\nUnexpected token: keyword (default) [app.js:35217,7]' ]
Edition(2017-07-10 11:38:19)
app.js: import VueRouter from 'vue-router';
package.json of vue-router in node_modules has this:
"main": "dist/vue-router.common.js",
"module": "dist/vue-router.esm.js",
"name": "vue-router",
So how to make babel use the main field rather than the module field ?
I have setup my angular js project with webpack. I am getting below error whenever I try to run in development mode:
"Unknown argument: NODE_ENV".
Below is my package.json. I am already using latest version of webpack-dev-server. Please let me know what went wrong here.
Package.json:
{
"name": "My project",
"version": "0.0.1",
"description": "",
"main": "/",
"author": "",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --config webpack/webpack.dev.js --watch --NODE_ENV=dev",
"test": "karma start --NODE_ENV=test",
"build": "webpack --config webpack/webpack.build.js --NODE_ENV=production"
},
"dependencies": {
"angular": "1.6.3",
"angular-datepicker": "^1.0.5",
"angular-file-upload": "^2.2.0",
"angular-flash-alert": "^2.2.4",
"angular-messages": "^1.5.0",
"angular-repository": "^0.1.8",
"angular-resource": "^1.5.0",
"angular-sanitize": "^1.5.5",
"angular-symfony-acl": "^1.0.9",
"angular-symfony-form": "^3.0.0",
"angular-translate": "^2.11.0",
"angular-ui-bootstrap": "^1.3.2",
"angular-ui-router": "^0.2.18",
"angular-voauth2": "^0.1.16",
"angular-youtube-embed": "^1.2.0",
"angularjs-datepicker": "^2.1.3",
"bootstrap": "^3.3.6",
"bootstrap-sass": "3.3.6",
"dotenv": "^4.0.0",
"font-awesome": "4.5.0",
"jquery": "2.2.0",
"lodash": "^4.0.1",
"moment": "^2.12.0",
"ng-file-upload": "^12.0.4",
"ng-infinite-scroll": "^1.2.1",
"postcss-loader": "^0.9.1",
"ui-select": "^0.19.4"
},
"devDependencies": {
"angular-mocks": "1.5.0-rc.2",
"angular-module-mocks": "1.2.19",
"babel-core": "^6.4.5",
"babel-istanbul": "0.6.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.3.13",
"compression-webpack-plugin": "0.3.0",
"connect-history-api-fallback": "^1.2.0",
"css-loader": "^0.18.0",
"file-loader": "0.8.5",
"html-webpack-plugin": "2.7.2",
"webpack-dev-server": "2.4.2",
"istanbul": "0.4.2",
"istanbul-instrumenter-loader": "0.1.3",
"jasmine": "2.4.1",
"karma": "0.13.19",
"karma-coverage": "0.5.3",
"karma-jasmine": "0.3.6",
"karma-phantomjs-launcher": "1.0.0",
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.23",
"karma-typescript-preprocessor": "0.0.21",
"karma-webpack": "1.7.0",
"lodash": "4.0.1",
"node-sass": "3.4.2",
"phantomjs-polyfill": "0.0.1",
"phantomjs-prebuilt": "2.1.3",
"raw-loader": "0.5.1",
"sass-loader": "3.1.2",
"style-loader": "0.13.0",
"url-loader": "0.5.7",
"webpack": "1.12.12"
}
}
webpack.dev.js:
var loaders = require("./loaders");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
build: './src/app.js',
vendors: ['angular', 'bootstrap', 'angular-ui-router', 'ng-file-upload']
},
output: {
filename: '[name].min.js',
path: 'dist'
},
resolve: {
root: __dirname,
extensions: ['', '.js', '.json']
},
resolveLoader: {
modulesDirectories: ["node_modules"]
},
devtool: "source-map",
devServer: {
port: 8080,
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body',
hash: true
}),
new webpack.ProvidePlugin({
moment: 'moment',
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.jquery': 'jquery'
})
],
module:{
loaders: loaders
}
};
In addition to what #Emre has provided, I had to change the npm start command in package.json to run application in DEV MODE. Then only it worked for me. My package.json now looks as below:
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --config ./webpack/webpack.dev.js --",
"test": "karma start --NODE_ENV=test",
"build": "webpack --config webpack/webpack.build.js --NODE_ENV=production"
},
Thanks.
You need to define your NODE_ENV in your wepack configuration. This should work:
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production') // default value if not specified
}
})
]