I'm trying to migrate some all projects to a monorepo with pnpm.
Here's the structure of my repo:
project1/
project2/
package.json
pnpm-workspace.yaml
...
Here's the content of project1/package.json
...
"devDependencies": {
"grunt": "^1.5.3",
"grunt-babel": "^8.0.0",
"grunt-cli": "^1.4.3",
"grunt-contrib-watch": "^1.1.0",
"grunt-exec": "^3.0.0",
"grunt-karma": "^4.0.2",
"istanbul-combine": "^0.3.0",
"jasmine": "^4.5.0",
"karma": "^6.4.1",
"karma-chrome-launcher": "^3.1.1",
"karma-cli": "^2.0.0",
"karma-coverage": "^2.2.0",
"karma-jasmine": "^5.1.0",
"karma-replacer-preprocessor": "0.0.2",
"karma-spec-reporter": "0.0.36"
}
project1/karma.conf.js
module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: ['*/*.js'],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'./*.js': ['replacer', 'coverage'],
},
replacerPreprocessor: {
replacer (file, content) { /* ... */ },
},
// ...
});
};
If I run cd project1 && npm i, I can run the tests from the root with npm --prefix project1 run test.
However, if I remove the node_modules and use pnpm i instead of npm i, when i run the tests, I get a few errors:
Cannot load "replacer", it is not registered!
and
Server start failed on port 9876: Error: No provider for "framework:jasmine"! (Resolving: framework:jasmine)
I tried pnpm i --shamefully-hoist and adding auto-install-peers=true to ./npmrc but in vain... How can I fix this?
I am trying to deploy my Vue app to Vercel but encounter an error when I do. I do not think that the error is caused by Vercel per se, but something in the prod build causes a problem and I can't find what or why.
App is SSR enabled on Vite JS (Vue 3), using this boilerplate: https://github.com/frandiox/vitesse-ssr-template
After build and deployment, opening the / URL shows this error:
ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
at Store.install (/var/task/node_modules/vuex/dist/vuex.cjs.js:911:50)
at Object.use (/var/task/node_modules/#vue/runtime-core/dist/runtime-core.cjs.prod.js:3031:28)
at /var/task/api/renderer/main.js:2694:7
at /var/task/api/renderer/main.js:2098:44
at module.exports (/var/task/api/index.js:16:28)
at Server.<anonymous> (/var/task/___vc_helpers.js:813:19)
at Server.emit (events.js:376:20)
at parserOnIncoming (_http_server.js:896:12)
at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17)
Also, putting this in my main.ts file (trying to avoid problem), doesn't change anything:
app.config.devtools = false;
app.config.debug = false;
app.config.silent = true;
Content of my package.json that is used in the serverless deploy, in cas it's useful:
{
"private": true,
"dependencies": {
"node-fetch": "*",
"#vueuse/core": "^4.9.1",
"#vueuse/head": "^0.5.1",
"nprogress": "^0.2.0",
"vue": "^3.0.11",
"#vue/server-renderer": "^3.0.11",
"vue-i18n": "^9.1.6",
"vue-router": "^4.0.6",
"axios": "^0.21.1",
"#headlessui/vue": "^1.2.0",
"vuex": "^4.0.1"
}
}
Any idea of what I should look for?
Found it, seems like Vuex sets DevTools to true by default, just had to ste it to false:
const store = createStore({
devtools: false,
})
Edit [23-7-2019]
After further research, I found that not ALL .vue files have this problem. Some do still show the original source code.
It looks like one of the loaders that is used, might be the culprit for the problems (with "vue-loader" as my first 'target').
In files that DO show the source code, the relevant part of the source map file looks like this:
Whereas the same part of the source map in the files without the source code, looks like this:
So for some reason, the "harmony default export" of the vue-loader seems to be missing for the latter type of files.
Previous issue text
Since a few days, the source maps for my .vue files no longer contain the original code (sourcesContent).
A number of source map files are generated by Webpack, but none of them contain the actual code: only minified or otherwise 'compressed' versions of the code, which are not very usable. They look like this:
The Typescript (.ts) files in my project, look almost correct, but still contain some minor forms of modification, e.g.:
What I have tried:
- I have searched Stackoverflow, and found a number of similar questions (e.g. like WebPack sourcemaps confusing (duplicated files)) with possible fixes, but none of them fixed my problem;
- I have compared my latest (Webpack) changes with that of about a week (and 2 weeks) ago, when all was working okay. And I have compared it also to a very
similar project that still produces correct source maps, including
for .vue files.
- I have tried various settings for the "devtool" setting in the Webpack config, but nothing helped.
- I am not using Uglify (which is mentioned a lot when people have a problem with source maps), so that cannot be the problem;
- I have tried updating a number of build related packages, so that they are equal to those of the project which is still working correctly, but the problem remains.
- I checked different browsers, but the problem occurs both in Chrome and Firefox (and I checked that their source map settings are set to 'on', which they have to be as the other project is working with the same settings). I even tried IE11, but that didn't help either.
My starting scripts in package.json look like this:
"build-watch": "webpack -d --watch true --config webpack.dev.config.js",
"build-release": "webpack -p --config webpack.production.config.js",
"build-dev": "webpack -d --config webpack.dev.config.js",
The devDependencies look like this:
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-typescript": "^7.3.3",
"#types/bootstrap": "^4.3.1",
"#types/jest": "^24.0.15",
"#types/jquery": "^3.3.30",
"#types/webpack": "^4.4.35",
"#vue/cli-plugin-e2e-cypress": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.2",
"#vue/cli-plugin-typescript": "^3.9.0",
"#vue/cli-plugin-unit-jest": "^3.9.0",
"#vue/cli-service": "^3.9.3",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/eslint-config-typescript": "^4.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"assets-webpack-plugin": "^3.9.10",
"babel-loader": "^8.0.6",
"babel-preset-vue": "^2.0.2",
"cache-loader": "^4.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.1.0",
"cssnano": "^4.1.10",
"cypress": "^3.4.0",
"es6-promise": "^4.2.8",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"globule": "^1.2.1",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-increase-specificity": "^0.6.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"ts-jest": "^24.0.2",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"url-loader": "^2.0.1",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.36.1",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.6" },
And the most relevant parts of my Webpack development config (excluding stuff like those related to webfonts) are these:
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
const NODE_PATH = path.join(__dirname, "node_modules");
const CACHE_PATH = path.join(NODE_PATH, '.cache/vue');
const VUE_VERSION = require('vue/package.json').version;
const VUE_LOADER_VERSION = require('vue-loader/package.json').version;
const bundleConfig = require('./bundles.config.js');
const buildId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
const config = {
entry: bundleConfig.entries,
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
exclude: [
path.resolve(__dirname, "wwwroot", "Content"),
path.resolve(__dirname, "src", "common")
],
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.css$/,
include: [
path.resolve(__dirname, "wwwroot", "Content"),
path.resolve(__dirname, "src", "common")
],
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
cacheDirectory: CACHE_PATH,
cacheIdentifier: [
'development',
webpack.version,
VUE_VERSION,
VUE_LOADER_VERSION
].join('|')
}
},
{
test: /\.tsx$/,
loaders: 'babel-loader',
include: /src/
},
{
test: /\.ts$/,
loaders: 'ts-loader',
include: /src/,
options: {
appendTsSuffixTo: [
/\.vue$/
]
}
}, ...
]
},
devtool: "cheap-module-eval-source-map",
resolve: {
extensions: [
'.js',
'.vue',
'.tsx',
'.ts'
],
alias: {
'~#': path.resolve('src'),
'vue$': 'vue/dist/vue.esm.js',
'bootstrap-vue$': 'bootstrap-vue/dist/bootstrap-vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
'Promise': 'es6-promise'
}),
new CleanWebpackPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new MiniCssExtractPlugin({ filename: "[name].css" }),
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: false } }],
}
}),
new webpack.WatchIgnorePlugin([
/\.d\.ts$/
]),
new AssetsPlugin({
filename: 'webpack.assets.json',
path: bundleOutputDir,
prettyPrint: true,
metadata: { buildId: buildId }
})
],
stats: {
modules: false,
entrypoints: false,
children: false
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
}
}
} };
I have totally run out of clues, so if anyone can give some, that would be great!
In the end, it turned out to be a source maps caching issue...! Which seems like a "duh!" solution to the problem, but it is not, really.
Because, it turns out that Chrome is very persistent with the caching of the source maps (at least, so it seems to me).
Whenever I start debugging, I use the Debug option of Visual Studio 2019. Which will then launch a new Chrome instance to do the debugging/testing in. I always assumed that this was done, to make sure you were using a 'fresh' version of the browser (e.g. with an empty cache, and the like). It turns out that this does not apply to the source maps of this browser instance...!
I found out that caching was the problem, because I had a window open in my 'regular' Chrome, which was also set to the local development environment. And I decided to see how the source maps where shown there, more to sort of amuse myself and less because I thought that would lead to anything. And in that browser, the correct source maps were & are shown.
So I went back to my (still open) development instance of Chrome. And in that, I already had disabled the cache in the devtools, both in the settings, and via the checkbox on the network tab. But still the source maps remained cached. So I emptied the browser cache via the regular settings of Chrome. But still the source maps remained cached. I changed the settings in Visual Studio to open an incognito version of Chrome for debugging. And even now, I still see the incorrect/old source maps there (while they show up just fine in the regular browser instance)...
Very weird all of this, but at least I can now start working/debugging again!
I am try to run jest test case in react native and it always fails. Terminal print this error "Jest encountered an unexpected token". I'm really new to jest, I have tried several hours to solve this problem, but couldn't find a way. Please help me to solve this.
Here is my code: -
import 'react-native';
import React from 'react';
import LoginScreen from '../pages/LoginScreen'
import renderer from 'react-test-renderer';
// snapshot testing
// update snapsshot to use npm test -- -u
// test('MainScreen snapShot', ()=>{
// const snap = renderer.create(
// <MainScreen />
// ).toJSON();
// expect(snap).toMatchSnapshot();
// });
it('fucntion test', () =>{
let MainData = renderer.create(<LoginScreen />).getInstance();
MainData.change(2)
expect(MainData.change(2)).toEqual(20)
})
Package.json :
{
"name": "App_name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-fcm": "^16.0.0",
"react-native-loading-spinner-overlay": "^0.5.2",
"react-native-looped-carousel": "^0.1.13",
"react-native-navigation": "^1.1.469",
"react-native-pathjs-charts": "0.0.34",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.6.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
},
"devDependencies": {
"babel-jest": "23.0.1",
"babel-preset-react-native": "4.0.0",
"jest": "^23.1.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
Error is :
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
15 |
16 | it('fucntion test', () =>{
> 17 | let MainData = renderer.create(<LoginScreen />).getInstance();
| ^
18 | MainData.change(2)
19 |
20 | expect(MainData.change(2)).toEqual(20)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 6.807s
Ran all test suites.
npm ERR! Test failed. See above for more details.
Thanks.
I saw something similar, try creating a .babelrc in the root of your project with this:
{
"presets": ["react-native"]
}
I get error when using react test utils. Following this blog post: http://blog.sodhanalibrary.com/2016/11/reacttestutils-tutorial-with-examples.html#.WoVNkqhl8dU . Can you advise what's wrong?
My test class:
import AzSearch from '../components/AzSearch'
import { render } from 'enzyme';
//import ReactTestUtils from 'react-dom/test-utils';
import TestUtils from 'react-addons-test-utils';
describe('AzSearch', () => {
it('should render wihtout problems', () => {
//define component
//var root = TestUtils.renderIntoDocument(<AzSearch />);
//Check it exists
//expect(root).toExist();
var shallowRenderer = TestUtils.createRenderer();
shallowRenderer.render(<AzSearch/>);
expect(shallowRenderer.getRenderOutput()).toExist();
});
});
My package:
{
"name": "npmsharepoint",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "browserify -t [ babelify --presets [ react ] ] src/app/scripts/main.js -o src/scripts/app.js",
"clean": "gulp clean",
"test": "mocha src/webparts/User Web Parts/src/webparts/azSearch/tests/AzSearch.test.js --require src/webparts/User Web Parts/src/webparts/azSearch/tests/testHelpers.js --require src/webparts/User Web Parts/src/webparts/azSearch/tests/dom.js --recursive"
},
"dependencies": {
"#microsoft/sp-core-library": "~1.1.0",
"#microsoft/sp-lodash-subset": "~1.1.0",
"#microsoft/sp-office-ui-fabric-core": "~1.4.0-0",
"#microsoft/sp-webpart-base": "~1.1.0",
"#types/jquery": "^2.0.48",
"#types/jqueryui": "https://registry.npmjs.org/#types/jqueryui/-/jqueryui-1.11.37.tgz",
"#types/react": "0.14.46",
"#types/react-addons-shallow-compare": "0.14.17",
"#types/react-addons-test-utils": "0.14.15",
"#types/react-addons-update": "0.14.14",
"#types/react-dom": "0.14.18",
"#types/webpack-env": ">=1.12.1 <1.14.0",
"babel-preset-react": "^6.24.1",
"babelify": "^8.0.0",
"bootstrap": "^4.0.0-beta.2",
"browser-router": "^0.2.0",
"jquery": "^2.2.4",
"jqueryui": "https://registry.npmjs.org/jqueryui/-/jqueryui-1.11.1.tgz",
"prop-types": "^15.6.0",
"react": "15.4.2",
"react-autosuggest": "^9.3.2",
"react-bootstrap": "^0.31.5",
"react-bootstrap-table": "^4.3.1",
"react-dom": "15.4.2",
"react-responsive-modal": "^2.0.0",
"react-select": "^1.1.0",
"reactstrap": "^5.0.0-alpha.4",
"sp-pnp-js": "^3.0.3"
},
"devDependencies": {
"#microsoft/sp-build-web": "~1.1.0",
"#microsoft/sp-module-interfaces": "~1.1.0",
"#microsoft/sp-webpart-workbench": "~1.1.0",
"#types/chai": ">=3.4.34 <3.6.0",
"#types/material-ui": "^0.20.0",
"#types/mocha": ">=2.2.33 <2.6.0",
"#types/react-tap-event-plugin": "0.0.30",
"ajv": "~5.2.2",
"gulp": "~3.9.1",
"chai": ">=3.4.34 <3.6.0",
"mocha": ">=2.2.33 <2.6.0"
}
}
Error:
Module parse failed: C:\Users/React Projects/Web Parts/b2\SPWPTest\src\webparts\User Web Parts\lib\webparts\azSearch\tests\AzSearch.test.js Unexpected token (33:25)
You may need an appropriate loader to handle this file type.
|
| var shallowRenderer = TestUtils.createRenderer();
| shallowRenderer.render(<AzSearch/>);
| expect(shallowRenderer.getRenderOutput()).toExist();
| });
at C:/Users/React Projects/Web Parts/b2/SPWPTest/src/webparts/User Web Parts/temp/tests.js:109
Finished in 0.249 secs / 0 secs
SUMMARY:
√ 0 tests completed
15 02 2018 09:39:27.572:DEBUG [karma]: Run complete, exiting.
15 02 2018 09:39:27.573:DEBUG [launcher]: Disconnecting all browsers
Finished in 0.249 secs / 0 secs
SUMMARY:
√ 0 tests completed
15 02 2018 09:39:27.589:DEBUG [karma]: Run complete, exiting.
15 02 2018 09:39:27.590:DEBUG [launcher]: Disconnecting all browsers
Am I missing some import or module or running incorrect version of something?
Your are missing compilers config at mocha.
The possible missing part is:
--compilers js:babel-core/register
See this link.