I want to build my nuxt project with vite and rollup
and after I entered npm run build the build finishes successfully but it prints this warning:
"guardReactiveProps" is imported from external module "vue" but never used in "src/components/MyComponent.vue, and rest of my components!
please help me to fix this warning
here are my configs
package.json
"rollup": "^3.5.1",
"rollup-plugin-visualizer": "^5.8.3",
"vite": "^4.0.0",
vite.config.ts
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
external: [
'bootstrap',
'bootstrap/js/dist/alert',
'bootstrap/js/dist/collapse',
'bootstrap/js/dist/modal',
'bootstrap/js/dist/offcanvas',
'bootstrap/js/dist/popover',
'bootstrap/js/dist/carousel',
'bootstrap/js/dist/dropdown',
'bootstrap/js/dist/tooltip',
'vue',
'#popperjs/core',
'#vueuse/core'
],
output: {
exports: 'named',
assetFileNames: `routaa-ui-kit.[ext]`, //without this, it generates build/styles.css
globals: {
vue: 'Vue',
bootstrap: 'Bootstrap',
'#vueuse/core': 'vueuse',
'bootstrap/js/dist/collapse': 'Collapse',
'bootstrap/js/dist/alert': 'Alert',
'bootstrap/js/dist/carousel': 'Carousel',
'bootstrap/js/dist/dropdown': 'Dropdown',
'bootstrap/js/dist/modal': 'Modal',
'bootstrap/js/dist/offcanvas': 'Offcanvas',
'bootstrap/js/dist/popover': 'Popover',
'bootstrap/js/dist/tooltip': 'Tooltip'
}
}
}
},
})
Thanks.
Related
I'm using Angular 14 ang webpack version: ^5.58.1.
Below is the config:
webpack.congif.js
const webpackPlugin = require('#ngtools/webpack').AngularWebpackPlugin;
module.exports = {
mode: 'development',
devtool: "source-map",
entry: {
main: "./js/main.js",
mainDrawer: "./js/divdrawer/main.ts",
polyfills: "./js/divdrawer/polyfills.ts",
entry: "./js/entry.js",
thirdpartylibs: "./js/thirdpartylibs.js"
},
output: {
path: path.join(__dirname, "build/"),
filename: "[name]bundle.js"
},
module: {
rules: [
{
parser: {
system: true,
}
}
test : /\.(tsx|ts)$/,
use: [
{
loader: '#ngtools/webpack',
options: {
configFile: path.resolve('./js/tsconfig.json')
},
},
]
},
},
plugins: [
new webpackPlugin({
tsconfig: './js/tsconfig.json',
}),
new webpack.ContextReplacementPlugin(
/\#angular(\\|\/)core(\\|\/)esm5/,
path.resolve(__dirname, "./js/divdrawer")
)
]
}
While generating the build I'm getting below error:
ERROR in ./js/divdrawer/filterMappingRemover.ts
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
at D:\MyProject\node_modules\#ngtools\webpack\src\ivy\loader.js:81:18
# ./js/entry.js 10:30-97
ERROR in ./js/divdrawer/main.ts
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
at D:\MyProject\node_modules\#ngtools\webpack\src\ivy\loader.js:81:18
at processTicksAndRejections (internal/process/task_queues.js:95:5)
ERROR in ./js/divdrawer/polyfills.ts
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
at D:\MyProject\node_modules\#ngtools\webpack\src\ivy\loader.js:81:18
ERROR in ./js/divdrawer/renderer.ts
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
at D:\MyProject\node_modules\#ngtools\webpack\src\ivy\loader.js:81:18
# ./js/entry.js 9:18-61
All the entries are throwing the errors with above message. As mentioned in webpack config we have multiple entries.
This is detected when I upgraded our project to angular 14.(Angular upgrade Steps: v10 --> v11--> v12--> v13/v14)
How to configure AngularWebpackPlugin correctly? Is there any alternative way?
For me this solution worked:
go to package.json and change your typescript version, If you want to upgrade your angular project to
Angular 15 (npm install typescript#"~4.8.0" --save-dev)
"devDependencies": {
...
"typescript": "~4.8.0"
}
Angular 14 (npm install typescript#"~4.7.0" --save-dev)
"devDependencies": {
...
"typescript": "~4.7.0"
}
Credit to F.R
yes downgrading typescript version to 4.8.2 resolve the issue.
For me, upgrading node version 16.xx to 18.xx (LTS) fixed the issue.
I'm following the Zustand wiki to implement testing, but the provided solution is not working for a basic test for app rendering. My project is built on top of the Electron React Boilerplate boilerplate project.
Here's the full error. Jest is using node with experimental-vm-modules because I followed the the Jest docs to support ESM modules.
$ cross-env NODE_OPTIONS=--experimental-vm-modules jest
(node:85003) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
jest-haste-map: Haste module naming collision: myproject
The following files share their name; please adjust your hasteImpl:
* <rootDir>/package.json
* <rootDir>/src/package.json
FAIL src/__tests__/App.test.tsx
● Test suite failed to run
TypeError: create is not a function
12 | }
13 |
> 14 | const useNotifs = create<NotifsState>(
| ^
15 | // devtools(
16 | (set) => ({
17 | notifStore: notifsDefault.notifStore,
at src/state/notifs.ts:14:19
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:387:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:408:7)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 11.882 s
Ran all test suites.
error Command failed with exit code 1.
At the top of the notifs.ts file, Zustand is imported normally with import create from 'zustand'.
Jest config in package.json:
...
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy",
"zustand": "<rootDir>/src/__mocks__/zustand.js",
},
"transformIgnorePatterns": [
"node_modules/(?!(zustand)/)",
"<rootDir>/src/node_modules/"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx",
"json"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"extensionsToTreatAsEsm": [
".ts",
".tsx"
],
...
I have left the ./src/__mocks__/zustand.js file exactly the same as from the Zustand wiki Testing page. I receive the same error whether or not I have zustand in the transformIgnorePatterns.
My Babel configuration includes [require('#babel/plugin-proposal-class-properties'), { loose: true }], in the plugins section, and output.library.type is 'commonjs2'
My tsconfig.json has compilerOptions.module set to "CommonJS", and the project's package.json "type" field is set to "commonjs".
Dependency versions:
"#babel/core": "^7.12.9",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/register": "^7.12.1",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"babel-jest": "^27.0.6",
"babel-loader": "^8.2.2",
"jest": "^27.0.6",
"regenerator-runtime": "^0.13.9",
"source-map-support": "^0.5.19",
"typescript": "^4.0.5",
"webpack": "^5.5.1",
"zustand": "^3.5.5"
I don't know what else could be relevant, just let me know if anything else is needed. Any and all help appreciated, thanks for your time.
To do this you should use the actual store of your app
const initialStoreState = useStore.getState()
beforeEach(() => {
useStore.setState(initialStoreState, true)
})
useStore.setState({ me: memberMockData, isAdmin: true })
The documentation seems off. So don't follow it.
use jest 28.0.0-alpha.0 will simply resolve the issue.
I think the problem is zustand uses '.mjs' as the entry point.
This question already has answers here:
Does Jest support ES6 import/export?
(10 answers)
Closed 11 months ago.
How to test ES6 modules with Jest.
Example:
sum.js
const sum = function (a, b) {
return a + b;
}
export default sum;
sum.test.js
import sum from './sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
The only requirement is to config your test environment to Babel, and add the es2015 transform plugin:
Step 1:
Add your test environment to .babelrc in the root of your project:
{
"env": {
"test": {
"plugins": ["#babel/plugin-transform-modules-commonjs"]
}
}
}
Step 2:
Install the es2015 transform plugin:
npm install --save-dev #babel/plugin-transform-modules-commonjs
And that's it. Jest will enable compilation from ES modules to CommonJS automatically, without having to inform additional options to your jest property inside package.json.
The solutions above didn't work for me. I was able to solve with this:
yarn add --dev babel-jest #babel/core #babel/preset-env #babel/preset-typescript
babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
'#babel/preset-typescript'
],
};
where I'm using typescript.
Reference.
Should be able to use any Chai plugin with unit testing with Karma/Mocha and Chai, or does it need to be converted into a special karma compatible plugin?
I'd like to use chai-date-string to do something like expect(requestBody.time).to.be.a.dateString();, but didn't have any luck just installing them as an NPM module and requiring them in my test file.
Then I came across karma-chai-plugins, which I thought was designed to use other chai plugins (even beyond the few that it comes bundled with), but adding that as an NPM module, and then adding the Chai plugin name to the frameworks list, but this didn't work.
My karma.conf.js:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai', 'chai-date-string', 'sinon-chai', 'browserify'],
client: { chai: { includeStack: true } },
files: [ 'playmob.js', 'test/**/*_test.js' ],
preprocessors: {
'test/**/*.js': [ 'browserify' ]
},
browserify: {
debug: true,
},
exclude: [ ],
reporters: ['mocha', 'beep'],
mochaReporter: { ignoreSkipped: true },
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['ChromeHeadless'],
singleRun: false,
concurrency: Infinity
})
}
Versions in package.json (I had to explicitly install a newer version of chai-as-promised to get around a dependency problem):
"devDependencies": {
"browserify": "^14.4.0",
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"chai-date-string": "^0.1.0",
"karma": "^1.7.1",
"karma-beep-reporter": "^0.1.4",
"karma-browserify": "^5.1.1",
"karma-chai-plugins": "^0.9.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.4",
"karma-sinon-chai": "^1.3.2",
"mocha": "^3.5.3",
"sinon": "^2.4.1",
"sinon-chai": "^2.14.0",
"uglifyjs": "^2.4.11",
"url": "^0.11.0",
"watchify": "^3.9.0"
}
Results in the following error:
> playmobjs#0.2.0 test /Users/jschuur/Code/Playmob/js_api_lib
> karma start
/Users/jschuur/Code/Playmob/js_api_lib/node_modules/di/lib/injector.js:9
throw error('No provider for "' + name + '"!');
^
Error: No provider for "framework:chai-date-string"! (Resolving: framework:chai-date-string)
at error (/Users/jschuur/Code/Playmob/js_api_lib/node_modules/di/lib/injector.js:22:12)
When I look at the code of karma-chai-plugins I see a series of hardcoded plugin names. It seems to me that karma-chai-plugins recognizes only those Chai plugins that are hardcoded in its source. So I don't think you can use it for chai-date-string.
Moreover, chai-date-string is not distributed in a format that is readily loadable in a browser. You could use Browserify or Webpack to convert it to a file that exports something like chaiDateString into the global space. Then you'd have to:
Include in files your converted chai-date-string script.
Add another script in files that invokes chai.use(chaiDateString). The example code shown in the repo omits the call to chai.use, but it cannot be omitted.
Ok, I'm lost. Been messing with this for days. I have an app that was working in beta 10 and i'm trying to migrate to RC3. I'm getting the following error
C:\Projects\db>ionic build browser
******************************************************
Dependency warning - for the CLI to run correctly,
it is highly recommended to install/upgrade the following:
Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova`
******************************************************
> dynamicbible#2.0.0 ionic:build C:\Projects\db
> ionic-app-scripts build
[10:33:33] ionic-app-scripts 0.0.45
[10:33:33] build prod started ...
[10:33:33] clean started ...
[10:33:33] clean finished in 5 ms
[10:33:33] copy started ...
[10:33:33] ngc started ...
[10:33:33] copy finished in 192 ms
[10:33:37] can't resolve module ../components/dcl-wrapper/dcl-wrapper.ts from C:/Projects/db/.tmp/app/app.module.ts
[10:33:37] Error: Source file C:/Projects/db/.tmp/components/dcl-wrapper/dcl-wrapper.ts not present in program.,
resolving symbol AppModule in C:/Projects/db/.tmp/app/app.module.ts, resolving symbol AppModule in
C:/Projects/db/.tmp/app/app.module.ts
[10:33:37] ngc failed
[10:33:37] ionic-app-script task: "build"
[10:33:37] Error: Error
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "ionic:build" "--"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! dynamicbible#2.0.0 ionic:build: `ionic-app-scripts build`
npm ERR! Exit status 1
npm ERR!
But the dcl-wrapper.ts file does exist in the exact place its telling me it doesn't. Here is the relevant paths:
C:\Projects\db\src\components\dcl-wrapper\dcl-wrapper.ts
C:\Projects\db\src\app\app.module.ts`
and here is my app.module.ts file
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import {SearchPage} from "../pages/search/search";
import {DclWrapper} from "../components/dcl-wrapper/dcl-wrapper.ts";
#NgModule({
declarations: [
MyApp,
SearchPage,
DclWrapper
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
SearchPage
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }
and my dcl-wrapper.ts
//our root app component
import {Component, Compiler, ViewContainerRef, ViewChild, Input, ComponentRef, ComponentFactoryResolver, ChangeDetectorRef} from '#angular/core'
// Helper component to add dynamic components
#Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
#ViewChild('target', { read: ViewContainerRef }) target;
#Input() type;
#Input() data;
cmpRef: ComponentRef<any>;
private isViewInitialized: boolean = false;
constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler,
private cdRef: ChangeDetectorRef) { }
updateComponent() {
if (!this.isViewInitialized) {
return;
}
if (this.cmpRef) {
this.cmpRef.destroy();
}
let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);
this.cmpRef = this.target.createComponent(factory)
// to access the created instance use
// this.compRef.instance.someProperty = 'someValue';
// this.compRef.instance.someOutput.subscribe(val => doSomething());
this.cmpRef.instance.item = this.data;
this.cdRef.detectChanges();
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if (this.cmpRef) {
this.cmpRef.destroy();
}
}
}
I have verified that the files do exist in the same structure in the .tmp dir that is created during the build process. Any help would be appreciated.
The error is at line:
import {DclWrapper} from "../components/dcl-wrapper/dcl-wrapper.ts";
The correct way is:
import {DclWrapper} from "../components/dcl-wrapper/dcl-wrapper";
(without ".ts")