I'm trying to run my VueJS + Nuxt app on IE and get the following error:
'Unable to get property 'call' of undefined or null reference'
This happens in the following line:
modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
when moduleID = "./node_modules/webpack-hot-middleware/client.js?name=client&reload=true&timeout=30000&path=/__webpack_hmr"
I think it has something to do with the way I configure my presets when using Nuxt.
This is currently how nuxt.config.js build part looks like:
build: {
vendor: ['vuetify', 'babel-polyfill', 'vued3tree', 'vue2-editor','lodash'],
extractCSS: true,
babel: {
presets: [
['es2015'],
[
'vue-app',
{
useBuiltIns: true,
targets: { ie: 11, uglify: true },
},
],
],
},
How do I need to configure my presets in order for my app to run on IE?
solved that as well by removing a library called vue2-hammer. Now I have one issue in Chrome and in IE: 'regeneratorRuntime is not defined'. tried every solution in Google and no solution. Now my Nuxt.config.js looks like this:
const polyfill = require('#babel/polyfill');
module.exports = {
entry: [polyfill],
build: {
extractCSS: true,
extend(config, ctx) {
if (ctx.isDev && ctx.isClient) {
config.module.rules.push(
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
plugins: [
[
'#babel/plugin-transform-runtime',
{
corejs: false,
helpers: true,
regenerator: true,
useESModules: false,
},
],
[
'#babel/plugin-transform-regenerator',
{
asyncGenerators: false,
generators: false,
async: false,
},
],
'babel-plugin-transform-es2015-shorthand-properties',
'#babel/plugin-transform-exponentiation-operator',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-transform-arrow-functions',
],
},
},
);
}
},
},
babel: {
presets: [
[
'es2015',
'stage-0',
],
],
exclude: ['transform-regenerator'],
},
Ant idea what can cause this?
Related
I am integrating a package with flowtype for the purpose of that in my webpack file added dependency to webpack as follows
module: {
rules: [
{
test: /\.js?$/,
// exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: [
["#babel/preset-env"],
["#babel/preset-react"],
[
require.resolve("babel-preset-react-app/dependencies"),
{ helpers: true },
],
],
plugins: [
[
"#babel/plugin-proposal-class-properties",
{
loose: true,
},
],
["transform-flow-strip-types"],
],
},
},
},
],
},
now all the flow type errors have been solved but many other new errors are introduced like
Module not found: Error: Can't resolve
in import statements where the statement is like
import Button from './Libraries/Components/Button';
any idea on what might be causing these issues ?
I am trying to create code coverage for VUE files using typescript in karma and webpack.
I am using istanbul-instrumenter-loader as a post process after but keep getting.
Everything works okay for pure .ts files, but when incluiding vue files I get
build failed (from ./node_modules/istanbul-instrumenter-loader/dist/cjs.js):
TypeError: Cannot read property 'fileCoverage' of undefined
When debugging istanbul-instrumenter-loader I noticed that
ee.exit(path); is undefined because the VUE files are being instrumented 3 times, the first two work okay but the third one is the one that crashes.
this is my webpack config
module.exports = {
node: {
fs: 'empty'
},
mode: 'development',
devtool: 'inline-source-map',
stats: 'verbose',
resolve: {
alias: {
Home: path.resolve( __dirname ),
Client: path.resolve( __dirname, 'client/' ),
ClientUtils$: path.resolve( __dirname, 'client/utils/index.utils.client.ts' ),
Views: path.resolve( __dirname, 'client/views/' ),
Components: path.resolve( __dirname, 'client/components/' ),
Constants$: path.resolve( buildPath, 'shared/constants.js' )
},
extensions: [
'.scss',
'.js',
'.ts',
'.vue'
]
},
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.ts?$/,
exclude: /node_modules/,
use: [
{
loader: 'cache-loader'
},
{
loader: 'thread-loader',
options: {
workers: Math.max(require('os').cpus().length - 1, 1)
}
},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
happyPackMode: true,
appendTsSuffixTo: [/\.vue$/]
}
}
]
},
{
test: /\.js$/,
exclude: [/dist/, /node_modules/, /coverage_server/, /coverage_client/],
loader: 'babel-loader'
},
{
test: /\.ts$/,
include: [/client/],
exclude: [
/node_modules/,
/\.spec\.ts$/,
/server/
],
enforce: 'post',
loader: 'istanbul-instrumenter-loader',
options: {
esModules: true
}
},
{
test: /\.(s*)css$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
};
and my karma.conf is
module.exports = function(config) {
let files = [];
if (config.grep) {
files.push({ pattern: config.grep, type: 'module' });
} else {
files.push('client/index.client.spec.ts');
}
config.set({
frameworks: ["mocha", "chai", "sinon"],
files,
preprocessors: {
'client/**/*spec.ts': ['webpack', 'sourcemap']
},
webpack: require('./webpack.test.js'),
reporters: ['spec', 'dots', 'html', 'coverage-istanbul'],
browsers: ['ChromeHeadless'],
coverageReporter: {
dir: './coverage_client',
includeAllSources: true,
reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text' }]
},
coverageIstanbulReporter: {
reports: ['text', 'lcov' ],
dir: './coverage_client',
fixWebpackSourcePaths: true,
'report-config': {
html: { outdir: 'html' }
}
},
htmlReporter: {
outputDir: 'karma_client_html', // where to put the reports
templatePath: null, // set if you moved jasmine_template.html
focusOnFailures: true, // reports show failures on start
namedFiles: false, // name files instead of creating sub-directories
pageTitle: null, // page title for reports; browser info by default
urlFriendlyName: false, // simply replaces spaces with _ for files/dirs
reportName: 'report_summary_filename', // report summary filename; browser info by default
// experimental
preserveDescribeNesting: false, // folded suites stay folded
foldAll: false // reports start folded (only with preserveDescribeNesting)
}
});
};
and my tsconfig is
{
"compilerOptions": {
"incremental": true,
"outDir": "./build/",
"target": "es2018",
"module": "CommonJS",
"lib": ["es2018", "dom", "dom.iterable"],
"allowSyntheticDefaultImports": true,
"inlineSourceMap": true,
"sourceMap": false,
"noImplicitAny": false,
"strict": true,
"alwaysStrict": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"types": [ "node", "mocha", "chai" ],
"baseUrl": ".",
"paths": {
"type-graphql": ["./node_modules/type-graphql/dist/browser-shim.ts"],
"Client/*": ["./client/*"],
"ClientUtils": ["./client/utils/index.utils.client.js"],
"Views/*": ["./client/views/"],
"Components/*": ["./client/components/*"],
"Constants": ["./shared/constants.ts"]
}
},
"include": [
"./client/**/*.ts",
"./client/**/*.vue",
"./server/**/*.ts",
"./shared/**/*.ts"
],
"exclude": [
"**/*.spec.ts",
"node_modules"
],
"files": ["./vue-shims.d.ts"]
}
when running
npm run build
I encounter an es6 related syntax error from uglify, so I'm guessing babel isn't handling the node module (sec-to-min) properly.
My .babelrc
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"test": {
"plugins": [ "istanbul" ]
}
}
}
My Webpack config:
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var env = process.env.NODE_ENV
// check env & config/index.js to decide whether to enable CSS source maps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue', '.json'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: [
path.join(projectRoot, 'src')
],
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: [
path.join(projectRoot, 'src')
],
exclude: /node_modules/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: [
path.join(projectRoot, 'src'),
'node_modules/sec-to-min'
],
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
eslint: {
formatter: require('eslint-friendly-formatter')
},
vue: {
loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
}
& the ERR:
ERROR in static/js/vendor.8d64852626f0513309d9.js from UglifyJs
SyntaxError: Unexpected token: operator (>)
[./~/sec-to-min/index.js:3,0]
How can I direct babel to compile this module?
please note that on Windows the slashes in the path will be \ so the above solution would have to be changed to exclude: /node_modules\\(?!(sec-to-min)\/).*/
This was the solution that worked for me, with webpack 4.3 and babel-loader 8.0.5, and using the recommended #babel/preset-env, adapted from here https://github.com/webpack/webpack/issues/2031#issuecomment-283517150
{
test: /\.(js|jsx|mjs)$/,
include: [paths.appSrc, paths.appNodeModules],
exclude: function(modulePath) {
return (
/node_modules/.test(modulePath) &&
!/node_modules\\react-dev-utils/.test(modulePath)
);
},
loader: require.resolve('babel-loader'),
options: {
compact: true,
presets: ['#babel/preset-env']
}
},
I found it helpful to use the function for exclude as I was able to add console logs within the function to check which modules were being matched by the regex.
In babel section of webpack config change to this :
{
test: /\.js$/,
loader: 'babel',
include: [
path.join(projectRoot, 'src')
],
exclude: /node_modules\/(?!(sec-to-min)\/).*/
}
Looks like exclude has priority over include.
Install following packages
npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev
Add es2015 and stage-0 in your babel presets
{
"presets": ["es2015", "stage-0"],
}
UPDATE
Try this
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'stage-0'],
},
},
include: [
path.join(projectRoot, 'src'),
'node_modules/sec-to-min'
],
exclude: /node_modules/
},
Work for me in Webpack v4:
rules: [{
include: [
path.resolve(__dirname, 'src'),
/node_modules\/(dom7|swiper)/
],
loader: 'babel-loader',
presets: [['#babel/preset-env', {
'modules': false
}]]
},
test: /\.(js)$/
}]
I am using Karma and PhantomJS for a headless browser. For some reason, I keep getting an error saying window is not defined.
My karma.conf.js
var path = require('path');
var webpack = require('webpack');
var webpackConfig = require('./config/webpack/webpack.config');
webpackConfig.module = {
loaders: [
{
test: /\.js$/,
loader: 'babel',
include: path.join(__dirname, 'app/frontend')
},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.css$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]' },
{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]!resolve-url!sass?outputStyle=expanded' },
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' } // inline base64 URLs for <=8k images, direct URLs for the rest
],
noParse: [
/node_modules\/sinon\//
]
};
module.exports = function (config) {
config.set({
browsers: [ 'PhantomJS' ],
singleRun: true, //just run once by default
frameworks: [ 'mocha' ], //use the mocha test framework
files: [
'app/frontend/.config/karma/test.bundle.js' //just load this file
],
preprocessors: {
'app/frontend/.config/karma/test.bundle.js': [ 'webpack', 'sourcemap' ] //preprocess with webpack and our sourcemap loader
},
reporters: [ 'dots' ], //report results in this format
webpack: webpackConfig,
colors: true,
webpackServer: {
noInfo: true
},
phantomjsLauncher: {
exitOnResourceError: true
}
});
};
And here's the error I get:
I'm not sure why window object is not available even though I use PhantomJS as the launcher. Any help would be greatly appreciated.
I am trying to use Karma, Jasmine, JSPM, and Babel all together. It seems I am getting an error I am not sure how to trace:
12 04 2016 19:59:04.407:ERROR [preprocessor.babel]: [BABEL] /Users/allen/work/twentytwenty.qualboard/src/TwentyTwenty.QualBoard.Web/wwwroot/config.js: Unknown option: base.preset. Check out http://babeljs.io/docs/usage/options/ for more info
It barks about config.js and the option base.preset. I am not sure why thought I have done a complete project search for base.preset and cannot find its existence.
Karma Config:
module.exports = function(config) {
config.set({
autoWatch: false,
babelPreprocessor: {
options: {
preset: ['es2015'],
sourceMap: 'inline',
},
},
basePath: '',
browsers: [
'PhantomJS',
],
colors: true,
concurrency: Infinity,
coverageReporter: {
type: 'html',
dir: 'converage/',
},
exclude: [],
files: [],
frameworks: [
'jspm',
'jasmine',
],
jspm: {
config: './wwwroot/config.js',
packages: './wwwroot/jspm_packages',
loadFiles: [
'test/**/*.js',
],
serveFiles: [
'test/**/*.js',
],
},
logLevel: config.LOG_INFO,
plugins: [
'karma-babel-preprocessor',
'karma-coverage',
'karma-jasmine',
'karma-jspm',
'karma-phantomjs-launcher',
'karma-spec-reporter',
],
port: 9876,
preprocessors: {
'./wwwroot/config.js': ['babel'],
'./wwwroot/aurelia/**/*.js': ['babel'],
'./wwwroot/test/**/*.js': ['babel', 'coverage'],
},
proxies: {
'/wwwroot/': '/TwentyTwenty.Qualboard.Web/wwwroot/',
'/jspm_packages/': '/wwwroot/jspm_packages',
},
reporters: [
'coverage',
'spec',
],
singleRun: true,
specReporter: {
maxLogLines: 1,
suppressErrorSummary: true,
suppressFailed: false,
suppressPassed: false,
supressSkipped: false,
},
});
};
My BabelRc:
{
"presets": ["es2015"]
}
I am starting Karma in the terminal by doing:
karma start
What am I missing?
You have a typo, it is presets and not preset:
babelPreprocessor: {
options: {
presets: ['es2015'],
sourceMap: 'inline',
},
}