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 ?
Related
I use in my project two library:
"leaflet": "^1.0.3",
"react-leaflet": "^1.9.1",
I import following styles in my map.less file:
#import "../../../../../../node_modules/leaflet/dist/leaflet.css";
I see some errors related to png files included in leaflet package. One of them is below:
ERROR in ./node_modules/leaflet/dist/images/marker-icon.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/css-loader?{"minimize":true}!./node_modules/leaflet/dist/leaflet.css 7:6181-6216
# ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??ref--5-3!./node_modules/less-loader/dist/cjs.js??ref--5-4!./src/app/components/toolkit/monitor-management/monitor-management-settings/map.less
This is my webpack config:
const config = {
some aliases outputs, entries etc...
module: {
rules: [
{
test: /\.js$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
use: [{
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/react'
],
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-export-default-from',
'babel-plugin-jsx-remove-data-test-id'
]
}
}]
},
{
test: /\.less$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'modules/src')
],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
{
loader: 'less-loader',
options: {}
}
]
})
},
{
test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
exclude: [
path.resolve(__dirname, 'public/img')
],
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/fonts/',
publicPath: '/login/fonts/'
}
},
{
test: /\.(svg|png|jp(e*)g)$/,
include: [
path.resolve(__dirname, 'public/img')
],
use: [
{
loader: 'url-loader',
options: {
limit: 10, // Convert images to base64 strings
name: '[name].[ext]',
outputPath: '/img/',
publicPath: '/login/img/'
}
}
]
},
],
},
some plugins...
}
In my opinion I would be able to load png thanks to url-loader.
Maybe the reason is in another place. Maybe sould I use file-loader to handle this case?
The problem here is about requiring an image from node_modules specifically in this case node_modules/leaflet/dist/images/marker-icon.png. However, the url-loader is set up just handling this only: path.resolve(__dirname, 'public/img') that's why all images in other places can't be handled.
Normally you can either add more paths into it or completely remove it (this is what I prefer):
{
test: /\.(svg|png|jp(e*)g)$/,
// Remove this
// include: [
// path.resolve(__dirname, 'public/img')
// ],
use: [
// ...
]
},
Bug report on ElementUI
I am using On-demand loading of ElementUI components. I've followed the instructions correctly and it works just fine when running the app.
The problem arises when I try to test with Jest and Vue test utils. None of the components I am importing seem to be found, so I get this error when running my tests:
ReferenceError: _Message is not defined
I get the same error for any of the other components, that my test touches.
On the bug report I mentioned above, I am being suggested that my babel configuration is not being applied in my testing environment? Or its something about my Jest configuration. I've tried various things to fix this:
Doing a manual mocks
Spying on the component
Importing the whole ElementUI package inside my test
Updating Jest configuration
Nothing seems to work and I have no idea what is wrong...
bebel.config.js
module.exports = {
presets: [
'#vue/app',
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk',
},
],
],
};
jest.config.js
module.exports = {
// roots: ['<rootDir>/src/', '<rootDir>/tests/'],
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue',
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
},
transformIgnorePatterns: [
'/node_modules/(?!element-ui)',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
},
snapshotSerializers: [
'jest-serializer-vue',
],
testMatch: [
'**/tests/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
collectCoverage: true,
coverageReporters: ['lcov', 'text-summary'],
};
I have a couple of suggestions for you here:
change this in jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue',
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.(js|jsx)?$': 'babel-jest'
},
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
},
snapshotSerializers: [
'jest-serializer-vue',
],
testMatch: [
'**/tests/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
collectCoverage: true,
coverageReporters: ['lcov', 'text-summary'],
};
and this in babel.config.js
module.exports = {
presets: [
'#vue/app',
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk',
},
],
],
"env": { "test": { "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"] } }
};
Also I believe #babel/plugin-transform-modules-commonjs is needed in yarn.
Let me know if this works.
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?
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.