I'm trying to write tests for my Office Fabric React, initially started using react-scripts-ts, now ejected since I ran into this issue, and I'm running into the following error when using the withResponsiveMode library:
TypeError: Cannot read property 'large' of undefined
13 | const initialState: IAppState = {
14 | isMenuVisible: true,
> 15 | responsiveMode: ResponsiveMode.large
| ^
16 | };
17 |
18 | // Actions
I'm using the moduleNameMapper setting listed here: https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes.
My jest config is below:
module.exports = {
collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
globals: {
"ts-jest": {
tsConfigFile: "C:\\repos\\provider-portal-ui\\tsconfig.test.json"
}
},
moduleFileExtensions: [
"web.ts",
"ts",
"web.tsx",
"tsx",
"web.js",
"js",
"web.jsx",
"jsx",
"json",
"node",
"mjs"
],
moduleNameMapper: {
"^react-native$": "react-native-web",
"office-ui-fabric-react/lib/": "office-ui-fabric-react/lib-commonjs/"
},
setupFiles: ["<rootDir>/config/polyfills.js"],
testEnvironment: "node",
testMatch: [
"<rootDir>/src/**/__tests__/**/*.(j|t)s?(x)",
"<rootDir>/src/**/?(*.)(spec|test).(j|t)s?(x)"
],
testURL: "http://localhost",
transform: {
"^.+\\.css$": "jest-css-modules",
"^.+\\.tsx?$": "ts-jest"
},
transformIgnorePatterns: [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$"
]
};
tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
tsconfig.test.json:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
}
}
I'm guessing this is some sort of configuration issue, as this code works fine when not being tested.
Found the answer to this. It seems to be an issue with Typescript & ts-jest and enums.
https://github.com/kulshekhar/ts-jest/issues/281
Related
Babel was applied as es5 in the stage environment, but es6 is being used in the production environment.
I think it applies the same webpack build.
Haven't reflected the source_map yet.
In the production environment, it comes out with es6 grammar.
I have no idea where to fix it.
A photo is also attached.
please help me!
env.build_production
NODE_ENV=production
env.build_stage
NODE_ENV=stage
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"noImplicitAny": false,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["webpack-env"],
"paths": {
"#/*": ["src/*"],
"tslib": ["path/to/node_modules/tslib/tslib.d.ts"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/types/**/*.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
"exclude": ["node_modules"]
}
package.json
...more
"scripts": {
"serve": "vue-cli-service serve --mode local --port 8081",
"build_stage": "vue-cli-service build --mode build_stage",
"build_production": "vue-cli-service build --mode build_production",
},
"dependencies": {
... more
"babel-plugin-syntax-dynamic-import": "^6.18.0",
... more
},
"devDependencies": {
more ...
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-plugin-router": "~4.5.15",
"#vue/cli-plugin-typescript": "~4.5.15",
"#vue/cli-plugin-vuex": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"#vue/compiler-sfc": "^3.0.0",
more ...
}
babel.config.js
module.exports = {
presets: ['#vue/cli-plugin-babel/preset'],
plugins: ['syntax-dynamic-import'],
};
vue.config.js code
const localEnv = process.env.NODE_ENV === 'local';
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const prdPrefix = `[name].[chunkhash].${new Date().getTime()}`;
const defaultConfig = {
configureWebpack: {
plugins: [
],
resolve: {
alias: {
moment: 'moment/src/moment',
},
},
optimization: {
usedExports: true,
splitChunks: {
chunks: 'all',
},
},
performance: {
hints: false,
},
},
chainWebpack: config => {
config.plugins.delete('prefetch');
config.plugins.delete('preload');
},
};
const prdConfig = {
...defaultConfig,
css: {
extract: {
filename: `css/${prdPrefix}.css`,
chunkFilename: `css/${prdPrefix}.css`,
},
},
configureWebpack: {
...defaultConfig.configureWebpack,
output: {
filename: `js/${prdPrefix}.js`,
chunkFilename: `js/${prdPrefix}.js`,
},
},
};
const localConfig = {
...defaultConfig,
configureWebpack: {
...defaultConfig.configureWebpack,
plugins: [...defaultConfig.configureWebpack.plugins, new BundleAnalyzerPlugin()],
},
devServer: {
proxy: {
'/test': {
target: 'http://test.com/',
ws: true,
changeOrigin: true,
},
},
},
};
const config = localEnv ? localConfig : prdConfig;
module.exports = config;
stage
prodcution
When I changed node_env to prd instead of production, babel was applied.
I don't understand why this situation happened.
i joined a VueJS + nuxt.js project and my vscode detect the whole DOM als error.
Did anyone know how to solve these problem?
Property 'div' does not exist on type 'JSX.IntrinsicElements'.
In project root add tsconfig.json file with the following content :
{
"compilerOptions": {
"jsx": "preserve",
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"#/*": [
"./*"
]
},
"types": [
"#nuxt/types",
"#types/node"
]
},
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}
It just isn't finding the *.svg image, if I add a .TSX file it finds it, however, I already configured the *.svg .d.ts module, what's wrong?
ERROR in ./src/App.tsx 4:0-64
Module not found: Error: Can't resolve '#assets/imgs/teste.svg' in 'APP_NAME\src'
REACT-APP-IMPORT.D.TS
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
TSCONFIG.JSON
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"#/*": ["src/*"],
"#assets/*": ["assets/*"]
},
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src", "src/react-app-import.d.ts", ".eslintrc"],
"exclude": ["node_modules", "dist", "build", "coverage"]
}
APP.TSX
import { ReactComponent as Logo } from '#assets/imgs/teste.svg';
export default function App() {
return (
<h1>
Hello World <Logo />
</h1>
);
}
I've got a dependency I'd like to shim on my react-native project. I currently have the following code on my babel.config.js file:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
],
};
};
I've found the extension babel-plugin-module-resolver which seems to be helpful (any other alternative would work too) and tried to follow their examples but they didn't work
I've tried the following:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
root: ["./src"],
alias: {
'#dependency/to-shim': 'path/to-shimmer',
},
},
],
],
};
};
but that doesn't work
I've got the same error.
The code when running works correctly.
The problem is with build. The path still absolute.
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'#services': './src/services',
},
},
],
'react-native-reanimated/plugin',
],
};
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#services*": ["./src/services"]
},
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"esModuleInterop": true,
"importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": ["esnext"],
"moduleResolution": "node",
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noImplicitUseStrict": false,
"noStrictGenericChecks": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": false,
"target": "esnext"
},
"include": ["src"],
"exclude": [
"node_modules",
"commitlint.config.js",
"metro.config.js",
"jest.config.js",
"babel.config.js"
]
}
screenshot - should be relative after build
I work on Nuxt.js (Vue.js) project that uses TypeScript in VSCode. When importing components I'd like to cut off long paths to them. For example:
Instead of:
<script lang="ts">
import SimpleUtil from '../../../components/helper/utils/SimpleUtil.vue'
I'd like to have:
<script lang="ts">
import SimpleUtil from '#/components/helper/utils/SimpleUtil.vue'
Or:
<script lang="ts">
import SimpleUtil from 'components/helper/utils/SimpleUtil.vue'
But, when I use:
<script lang="ts">
import SimpleUtil from '#/components/helper/utils/SimpleUtil.vue'
There's an error:
The tsconfig.json file looks as following:
{
"compilerOptions": {
"target": "ES2018",
"module": "ES6",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": "./src",
"noImplicitAny": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"types": [
"#types/node",
"#nuxt/types"
],
"resolveJsonModule": true
},
"paths": {
"~/*": [
"src/*"
],
"#/*": [
"src/*"
]
},
"include": [
"src/**/*.ts",
"src/**/*.vue"
],
"exclude": [
"src/node_modules",
"./node_modules",
".nuxt",
"dist"
]
}
The nuxt.config.js file looks as following:
export default {
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'Licota',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: ['~/assets/css/main.sass'],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/typescript
'#nuxt/typescript-build',
// https://go.nuxtjs.dev/stylelint
'#nuxtjs/stylelint-module',
],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'bootstrap-vue/nuxt',
],
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
extractCSS: true,
},
srcDir: 'src/',
vue: {
config: {
productionTip: false,
devtools: true
}
}
}
How can I fix this issue?
This is the way that I declare paths in my jsconfig.json and it works for me:
"compilerOptions": {
"paths": {
"~/*": ["./*"],
"#/*": ["./*"],
"~~/*": ["./*"],
"##/*": ["./*"]
}
},
For more information you can check Nuxt TypeScript