Related
I have two different repos I'm working on, lib and apps.
lib has some React components made with MUI that I want to consume in apps, and that's built with Rollup.
apps is a Lerna monorepo with a Next.js app that imports lib as a dependency to consume its components, which can be customized wrapping them in a <ThemeProvider> with a custom theme.
However, that doesn't work because there are duplicated instances of MUI / ThemeProvider, which I was able to verify by adding this to lib's entry point:
if (process.browser) {
(window as any)._React = React;
(window as any)._ThemeProvider = ThemeProvider;
}
And then this into apps':
if (process.browser) {
const {
_React,
_ThemeProvider,
} = window as any;
console.log(_React ? (_React === React ? "✅ Unique React" : "❌ Duplicate React") : "-");
console.log(_ThemeProvider ? (_ThemeProvider === ThemeProvider ? "✅ Unique ThemeProvider" : "❌ Duplicate ThemeProvider") : "-");
}
Which prints:
✅ Unique React
❌ Duplicate ThemeProvider
lib's component usage in app looks like this:
<ThemeProvider theme={ MY_CUSTOM_THEME }>
<MyComponent{ ...myComponentProps } />
</ThemeProvider>
Where both MyComponent and MY_CUSTOM_THEME are imported from lib, while ThemeProvider is imported from #mui/material/styles, just like it is in lib.
However, all MUI components will be displayed with the default theme.
Here are some of the relevant build files for both repos:
lib > package.json:
{
"name": "#myscope/lib",
"version": "1.0.0-alpha",
"description": "",
"main": "dist/cjs/src/index.js",
"module": "dist/esm/src/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"private": true,
"scripts": {
"build": "rollup -c",
},
"dependencies": {
"#apollo/client": "^3.4.5",
"#apollo/link-context": "^2.0.0-beta.3",
"#hookform/resolvers": "^2.8.5",
"#mui/icons-material": "^5.0.4",
"#swyg/corre": "^1.0.1",
"apollo-upload-client": "^16.0.0",
"atob": "^2.1.2",
"axios": "^0.24.0",
"btoa": "^1.2.1",
"country-codes-list": "^1.6.8",
"country-region-data": "^1.6.0",
"next": "^11.0.1",
"next-images": "^1.8.2",
"openpgp": "^5.0.0",
"react-hook-form": "^7.22.0",
"react-payment-inputs": "^1.1.8",
"react-use-country-region": "^1.0.0",
"styled-components": "^5.3.0",
"use-callback-ref": "^1.2.5",
"uuidv4": "^6.2.12",
"yup": "^0.32.11"
},
"peerDependencies": {
"#mui/material": "^5.0.4",
"react-dom": "^17.0.2",
"react": "^17.0.2"
},
"devDependencies": {
"#auth0/auth0-react": "^1.6.0",
"#babel/preset-react": "^7.16.7",
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#graphql-codegen/cli": "^1.21.5",
"#graphql-codegen/introspection": "^1.18.2",
"#graphql-codegen/typescript-operations": "^1.18.0",
"#graphql-codegen/typescript-react-apollo": "^2.2.5",
"#graphql-codegen/typescript": "^1.22.1",
"#mui/material": "^5.2.8",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^21.0.1",
"#rollup/plugin-node-resolve": "^13.1.2",
"#rollup/plugin-typescript": "^8.3.0",
"#testing-library/dom": "^8.1.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^26.0.24",
"#types/react-dom": "^17.0.11",
"#types/react": "^17.0.16",
"#types/styled-components": "^5.1.12",
"#typescript-eslint/eslint-plugin": "^4.29.0",
"#typescript-eslint/parser": "^4.29.0",
"babel-jest": "^27.0.6",
"babel-plugin-styled-components": "^2.0.2",
"eslint-config-next": "^11.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-unused-imports": "^1.1.2",
"eslint": "^7.32.0",
"graphql": "^16.2.0",
"jest": "^27.0.6",
"prettier": "^2.3.2",
"rollup-plugin-dts": "^4.1.0",
"rollup-plugin-node-externals": "^3.1.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-typescript2": "^0.31.1",
"rollup": "^2.63.0",
"ts-jest": "^27.0.4",
"typescript": "^4.3.5"
}
}
Note that #mui/material appears both in peerDependencies and devDependencies, but not react or rect-dom, which are only listed as peerDependencies. That's because there's #types/react and #types/react-dom, but nothing similar for MUI, so the Rollup build would fail if it can't find the right types.
lib > rollup.config.js:
import commonjs from '#rollup/plugin-commonjs';
import dts from 'rollup-plugin-dts'
import resolve from "#rollup/plugin-node-resolve";
import typescript from 'rollup-plugin-typescript2'
import babel from '#rollup/plugin-babel'
import pkg from "./package.json";
// Extensions handled by babel:
const EXTENSIONS = [".ts", ".tsx"];
// Exclude dev and peer dependencies:
const EXTERNAL = [
...Object.keys(pkg.devDependencies),
...Object.keys(pkg.peerDependencies),
];
export default [{
input: 'src/index.ts',
output: [{
dir: "dist/esm",
sourcemap: true,
format: "esm",
preserveModules: true,
globals: {
react: "React",
},
}, {
dir: "dist/cjs",
sourcemap: true,
format: "cjs",
preserveModules: true,
globals: {
react: "React",
},
}],
external: EXTERNAL,
plugins: [
resolve(),
commonjs({
exclude: "node_modules",
ignoreGlobal: true,
}),
typescript({
useTsconfigDeclarationDir: true,
tsconfig: "rollup.tsconfig.json",
}),
],
}, {
input: './dist/types/src/index.d.ts',
output: [{ file: './dist/index.d.ts', format: "esm" }],
external: EXTERNAL,
plugins: [dts()],
}];
apps > lerna.json:
{
"packages": ["apps/**/*", "packages/**/*"],
"version": "0.0.1",
"npmClient": "yarn",
"useWorkspaces": true
}
apps > package.json:
...
"dependencies": {
"#myscope/lib": "file:../lib"
},
...
Note this is a file: import just to make it easier to develop and test changes.
I've also tried adding resolutions to both apps > package.json and apps > app > package.json, but no luck with that either...:
"resolutions": {
"#mui/material": "5.2.8"
}
It might not be the best solution, but I fixed this by exporting the ThemeProvider from lib:
export { ThemeProvider as MyComponentThemeProvider } from "#mui/material/styles";
Now, when using this one in app:
<MyComponentThemeProvider theme={ MY_CUSTOM_THEME }>
<MyComponent{ ...myComponentProps } />
</MyComponentThemeProvider>
Everything works as expected:
✅ Unique React
✅ Unique ThemeProvider
Also, take a look at https://github.com/facebook/react/issues/19541
I have a problem with importing vue-formio to my vue component.
Can't import FormBuilder without errors :(
After:
import { FormBuilder } from 'vue-formio';
I see in the console:
TypeError: Object prototype may only be an Object or null: undefined
Whole error You can see here: see print screen
TypeError: Object prototype may only be an Object or null: undefined
Main import:
if (document.body.classList.contains("hr:controller-requisition:action-edit")) {
require.ensure([], () => {
require("./views/requisition/edit.es6.js").default;
});
}
My formio.es6.js file:
import Vue from "vue";
import formio from "./show.vue";
import { store } from "HRComponets/store/store.es6";
export default new Vue({
el: "#formio-show",
data: {},
store,
render(h) {
return h(formio);
}
});
My vue component file:
Hi Guys, need help with vue-formio
<script>
import { FormBuilder } from 'vue-formio';
export default {
name: "formioShow",
data() {
return {
schema: {},
}
},
components: {
FormBuilder
},
};
</script>
My package.json file:
{
"name": "core",
"version": "1.0.0",
"description": "ortal",
"main": "index.js",
"directories": {
"test": "tests"
},
"scripts": {
"start": "npm run dev",
"prod": "webpack --config webpack.prod.js",
"dev": "webpack --watch --progress --config webpack.dev.js",
},
"nyc": {
"include": [
"src/**/*.(js|vue)"
],
"instrument": false,
"sourceMap": false
},
"keywords": [
"HR",
"Syrveys"
],
"browserslist": [
"> 2%",
"last 3 versions",
"not ie <= 8"
],
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.18",
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"expect": "^23.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"husky": "^1.0.0-rc.8",
"istanbul-instrumenter-loader": "^3.0.1",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.0",
"mocha": "^5.2.0",
"mocha-webpack": "^2.0.0-beta.0",
"node-sass": "^4.9.0",
"nyc": "^11.8.0",
"prettier-eslint": "^8.8.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"ts-loader": "^5.1.0",
"typescript": "^3.0.3",
"vue": "^2.5.16",
"vue-loader": "^15.0.10",
"vue-template-compiler": "^2.5.16",
"watchfile-webpack-plugin": "0.0.4",
"webpack": "^4.8.1",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"amcharts3": "github:amcharts/amcharts3",
"eslint-plugin-vue": "^4.7.1",
"formiojs": "^3.5.1",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"moment-timezone": "^0.5.17",
"npm": "^6.4.1",
"numeral": "^2.0.6",
"vee-validate": "^2.1.0-beta.8",
"vue-formio": "^3.0.0",
"vue-moment": "^4.0.0-0",
"vue-multiselect": "^2.1.0",
"vue-numerals": "0.0.2",
"vue-pdf": "^3.3.1",
"vue-upload-component": "^2.8.9",
"vue-wysiwyg": "^1.7.2",
"vue2-dropzone": "^3.2.2",
"vuelidate": "^0.7.4",
"vuenut": "^0.2.2",
"vuex": "^3.0.1",
"webpack-node-externals": "^1.7.2"
}
}
My webpack config file:
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: {
core: "./src/AppBundle/VueComponents/main.es6.js",
hr: "./src/HRBundle/VueComponents/main.es6.js",
pm: "./src/PerformanceManagementBundle/VueComponents/main.es6.js"
},
output: {
filename: "[name]-app.js",
path: __dirname + "/web/assets/core/js/",
hotUpdateChunkFilename: "../webpack-hot-reload/hot-update.js",
hotUpdateMainFilename: "../webpack-hot-reload/Updatehot-update.json",
publicPath: "/assets/core/js/"
},
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /.scss$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/,
use: ["vue-style-loader", "css-loader", "less-loader"]
},
{
test: /\.es6.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HTMLWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
externals: {
jquery: "jQuery"
},
resolve: {
alias: {
vue: "vue/dist/vue.js",
HRComponets: path.resolve(__dirname, "./src/HRBundle/VueComponents")
},
extensions: ["*", ".js", ".vue", ".json", ".ts"]
}
};
module.exports = config;
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]',
})
I have an Angular2 webpack project which works fine in local(webpack-dev-server) but once I deploy to my server(Apache), and run "npm run build", the build does not get updated(no errors shown).I tried removing my dist folder but still no change.No changes made to html are shown(it was working perfectly fine before)
webpack.config.js -->
var path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
app: './src/main'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'app.bundle.js'
},
resolve: {
extensions: ['.js', '.ts','.tsx', '.css', '.scss', '.html']
},
module: {
rules: [{
test: /\.ts$/,
use: ['awesome-typescript-loader', 'angular2-template-loader', '#angularclass/hmr-loader', 'angular2-router-loader'],
exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
{
test: /\.scss$/,
exclude: [/node_modules/],
use: [
'raw-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// Or array of paths
resources: [
'./src/assets/sharedStyles/_variables.scss',
'./src/assets/sharedStyles/_mixins.scss'
]
},
}
]
},
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.(eot|ttf|wav|mp3|pdf|woff2|woff|png|svg|gif)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
]
},
// plugins
plugins: [
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)#angular/,
__dirname // location of your src
),
new HtmlWebpackPlugin({
template: './src/index.html',
chunksSortMode: 'dependency'
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new CopyWebpackPlugin([{
from: './src/assets',
to: './assets',
copyUnmodified: true,
force: true
}])
],
devServer: {
contentBase: path.join(__dirname, "src/"),
compress: true,
port: 3000,
historyApiFallback: true,
inline: true
}
};
package.json-->
{
"name": "App",
"version": "1.0.0",
"scripts": {
"postinstall": "typings install",
"typings": "typings",
"start": "webpack-dev-server --public --port 3000 --hot --host 0.0.0.0",
"build": "webpack",
"build-prod": "webpack -p"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/animations": "^4.1.2",
"#angular/common": "^4.1.2",
"#angular/compiler": "^4.1.2",
"#angular/compiler-cli": "^4.1.2",
"#angular/core": "^4.1.2",
"#angular/forms": "^4.1.2",
"#angular/http": "^4.1.2",
"#angular/platform-browser": "^4.1.2",
"#angular/platform-browser-dynamic": "^4.1.2",
"#angular/platform-server": "^4.1.2",
"#angular/router": "^4.1.2",
"#angular/upgrade": "4.1.2",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"d3": "^4.9.1",
"html-webpack-plugin": "^2.28.0",
"jquery": "2.x.x",
"jquery-ui": "^1.10.3",
"jquery-ui-npm": "^1.12.0",
"ngx-bootstrap": "^1.6.6",
"primeui": "^4.1.15",
"reflect-metadata": "0.1.9",
"rxjs": "5.1.0",
"systemjs": "0.19.39",
"typescript": "^2.4.1",
"zone.js": "0.7.2"
},
"devDependencies": {
"#angularclass/hmr-loader": "^3.0.2",
"#types/jquery": "^2.0.33",
"angular2-router-loader": "^0.3.4",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.0.3",
"concurrently": "^3.0.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.10.1",
"google-maps": "^3.2.1",
"lite-server": "^2.2.2",
"ng2-cookies": "^1.0.6",
"ng2-datetime": "1.2.1",
"ng2-popover": "0.0.13",
"node-sass": "^4.5.0",
"primeng": "^4.1.0-rc.2",
"primeui": "^4.1.15",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.0",
"sass-resources-loader": "^1.2.0",
"smartadmin-plugins": "^1.0.15",
"style-loader": "^0.13.2",
"to-string-loader": "^1.1.5",
"ts-loader": "^2.0.0",
"typings": "2.1.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
}
}
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 ?