Update: After downgrading vue-cli to 4.5.19 code is working fine.. So I think it's issue related with vue-cli or its dependency.
I've created simple vue.js project using vue-cli. After adding to the project package timecode by npm install timecode --save and try to use it in Vue component, imported module is undefined. I've a feeling this is problem related with webpack. Timecode package is written in commonJS and when I use it outside this project, it works fine. Any ideas?
#vue/cli v5.0.8,
npm v8.11.0,
node v16.16.0
package.json
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"timecode": "^0.0.4",
"vue": "^3.2.13"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-service": "~5.0.0"
}
}
vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue
<template>
<HelloWorld />
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
};
</script>
<style>
</style>
HelloWorld.vue
<template></template>
<script setup>
import timecode from "timecode";
console.log(timecode); // { }
const timeCode = timecode.Timecode; // undefinied
const tc = timeCode.init({ framerate: "29.97", timecode: "01:00:00:00" }); // Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'init')
tc.add(4);
tc.add("00:02:03:00");
console.log(tc.toString());
</script>
<style>
</style>
Output in console
app.js:167 Uncaught TypeError: Cannot read properties of undefined (reading 'init')
at setup (HelloWorld.vue?e90b:7:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:7186:1)
at setupComponent (runtime-core.esm-bundler.js?d2dd:7140:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5493:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5468:1)
at patch (runtime-core.esm-bundler.js?d2dd:5058:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5607:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5714:1)
When I use this package, without vue, by simple npm init, npm install timecode --save and call it form node node index.js I don't have this problems.
index.js
const timecode = require("timecode").Timecode; // all fine
const tc = timecode.init({ framerate: "29.97", timecode: "01:00:00:00" });
tc.add(4)
tc.add("00:02:03:00");
tc.toString();
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"timecode": "^0.0.4"
}
}
If you are using Vue 3 Composite API you can register the package locally and use it
<template>
</template>
<script setup>
import timecode from 'timecode'
//create the constant value and assign it with the imported timecode
const timeCode = timecode.Timecode;
const tc = timeCode.init({ framerate: "29.97", timecode: "01:00:00:00" });
tc.add(4);
tc.add("00:02:03:00");
console.log(tc.toString());
</script>
<style>
</style>
If you are using Vue 3 Optional API you can try like this.
<template>
</template>
<script>
import timecode from 'timecode'
export default {
data: () => ({
timeCode: timecode.Timecode
}),
methods: {
//create a function to use your time code
useMyTimeCode() {
let tc = this.timeCode.init({ framerate: "29.97", timecode: "01:00:00:00" });
tc.add(4);
tc.add("00:02:03:00");
console.log(tc.toString());
}
},
created() {
//you can use you function anywhere and you can even modify the function to pass parameters
this.useMyTimeCode();
}
}
</script>
<style>
</style>
Remember to install the package as
npm i timecode
Related
I'm trying to use FontAwesome with NuxtJS but it doesn't work for unknown reasons.
Here is my package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"nuxt": "3.0.0-rc.6",
"sass": "^1.54.0",
"sass-loader": "^13.0.2"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.2",
"#fortawesome/free-regular-svg-icons": "^6.1.2",
"#fortawesome/free-brands-svg-icons": "^6.1.2",
"#fortawesome/free-solid-svg-icons": "^6.1.2",
"#fortawesome/vue-fontawesome": "^3.0.1",
"#nuxtjs/fontawesome": "^1.1.2"
}
}
Here is my nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
buildModules: ['#nuxtjs/fontawesome'],
fontawesome: {
icons: {
solid: ['faHome']
}
}
})
Now pages/index.vue:
<template>
<div>
Hello
</div>
</template>
As you can see I'm not even using any icon in this example, yet my app cannot start due to the following error in the Terminal (when I run npm run dev).
ℹ Vite client warmed up in 440ms 12:52:57
ℹ Vite server warmed up in 113ms 12:52:57
✔ Vite server built in 812ms 12:52:58
✔ Nitro built in 178 ms
[h3] [unhandled] H3Error: Cannot read properties of undefined (reading 'component')
at createError (file:///Users/thomasgysemans/Documents/GitHub/vue-portfolio/node_modules/h3/dist/index.mjs:191:15)
at Server.nodeHandler (file:///Users/thomasgysemans/Documents/GitHub/vue-portfolio/node_modules/h3/dist/index.mjs:381:21) {
statusCode: 500,
fatal: false,
unhandled: true,
statusMessage: 'Internal Server Error'
}
I don't understand this error and it seems like I am the only one to have it. Also, I'm new to NuxtJS and Vue.
I am following the documentation of #nuxtjs/fontawesome, and if I understand it well, I'm doing nothing wrong... Well I hope I made a simple mistake that will be solved lol. I really want to use FontAwesome, and it should work as FontAwesome itself provides a documentation on how to use their icons with Vue (but nothing related to NuxtJS).
Edit
Also, the app shows this as plain text, in a black background, but it doesn't show my beautiful "Hello".
{
"statusCode": 404,
"statusMessage": "Not Found",
"stack": []
}
Here is how to setup this
yarn add #fortawesome/fontawesome-svg-core #fortawesome/vue-fontawesome#latest-3
In a new /plugins/fontawesome.js file, put the following
import { library, config } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { fas } from '#fortawesome/free-solid-svg-icons'
// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false
// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas)
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})
Inside of nuxt.config.ts
export default defineNuxtConfig({
css: [
'#fortawesome/fontawesome-svg-core/styles.css'
]
})
You should now be able to use it like this
<template>
<div>
<font-awesome-icon icon="fa-solid fa-user-secret" />
</div>
</template>
More info is available here: https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt
The configuration for the project. Currently using jest-expo for testing in this project. The version of jest-expo in the project is 39.0.0. Version of Jest installed globally is 26.6.3
package.json :
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest",
"type": "module"
},
...
"devDependencies": {
"#babel/core": "^7.12.3",
"babel-preset-expo": "^8.3.0",
"jest-expo": "^39.0.0",
"react-test-renderer": "^17.0.1"
},
"jest": {
"preset": "jest-expo"
}
jest.config.js:
module.exports = {
setupFilesAfterEnv: [
'./setup-tests.js',
],
"transformIgnorePatterns": [
"/node_modules/#codler/react-native-keyboard-aware-scroll-view/lib/index.js",
"/node_modules/#react-native-community/async-storage/(?!(lib))",
"/node_modules/native-base-shoutem-theme/.*",
"node_modules/native-base/.*",
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*|native-base-*|native-base-shoutem-*)"
],
verbose : true
};
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['inline-dotenv'],
};
};
I am trying to render a snapshot for a login page that is react-native:
The error is caused by the below import module inside LoginScreen.js
import {
Content,
Container,
H2,
Form,
Item,
Input,
Button,
Text,
View,
} from "native-base";
Test case inside LoginScreen.test.js
import LoginScreen from './LoginScreen';
import React from 'react';
import renderer from 'react-test-renderer';
it('renders LoginScreen correctly', () => {
const tree = renderer.create(<LoginScreen />).toJSON();
expect(tree).toMatchSnapshot();
});
Test case is throwing the error
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import connectStyle, { clearThemeCache } from "./src/connectStyle";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1258:14)
at Object.<anonymous> (node_modules/native-base/src/index.js:1:1)
I have tried other similar answers available on Stack Overflow. But none of them applied to the current project on which I am working with.
I have added connectStyle to the Jest transformIgnorePatterns but still it is throwing that error.
Current Project :
React native mobile application developed using expo.
Using jest-expo for testing.
Configuration of the project.
Tried uninstalling and re-installing all the npm and expo modules, that didn't help either.
This is an open issue on the Native base end. Further details can be found on this ticket :
https://github.com/GeekyAnts/NativeBase/issues/3105
I've created my own Vue.js npm library to help me with my personal projects. Everything works fine except when trying to import a Class
I've defined the class as so:
import Vue from 'vue'
export default class Foo {
constructor () {
...
}
}
my npm packages.json:
"main": "./dist/my-custom-lib.common.js",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-bundle": "vue-cli-service build --target lib --name my-custom-lib ./index.js",
"test:unit": "vue-cli-service test:unit"
},
"files": [
"dist/my-custom-lib.common.js",
"src/components/*",
"src/controllers/*",
"src/mixins/*",
"src/utilities/*"
],
To publish I do a yarn build-bundle followed by npm publish.
When I try to import it from my other project:
import { Foo } from '#username/my-custom-lib'
I get the following error:
global-plugin.js?3d38:9 Uncaught TypeError: _username_my_custom_lib__WEBPACK_IMPORTED_MODULE_2__.Foo is not a constructor
I'm able to use all other functions/mixins/vue components but not this class.
EDIT: Here is the partial contents of the common.js file:
var foo_Foo =
/*#__PURE__*/
function () {
function Foo(router) {
_classCallCheck(this, Foo);
}
_createClass(Foo, [{
...source contents...
}]);
return Foo;
}();
/* concated harmony reexport foo */__webpack_require__.d(__webpack_exports__, "foo", function() { return foo_Foo; });
index.js which is called as part of yarn build-bundle contains the following:
import * as components from '#/components'
const VueComponents = {
install (Vue) {
for (const plugin in components) {
Vue.component(plugin, components[plugin])
}
}
}
export * from '#/mixins'
export * from '#/utilities'
export * from '#/controllers'
export default VueComponents
inside #/controllers/index.js:
import foo from './foo'
export {
foo
}
Not sure why it's complaining on this line:
const wrapper = shallow(<BitcoinWidget {...props} />);
/Users/leongaban/projects/match/bitcoin/src/components/bitcoinWidget.test.js: Unexpected token (17:26)
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://jestjs.io/docs/en/configuration.html
Details:
15 |
16 | describe('when rendering', () => {
>17 | const wrapper = shallow(<BitcoinWidget {...props} />);
18 | ^
19 | it('should render a component matching the snapshot', () => {
20 | const tree = toJson(wrapper);
Entire test:
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
// Local components
import BitcoinWidget from './bitcoinWidget';
const props = {
logo: 'foobar',
coin: {
price: 0
},
refresh: jest.fn()
}
describe('when rendering', () => {
const wrapper = shallow(<BitcoinWidget {...props} />);
it('should render a component matching the snapshot', () => {
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
expect(wrapper).toHaveLength(1);
});
});
The component
import React from 'react';
const BitcoinWidget = ({ logo, coin : { price }, refresh }) => {
return (
<div className="bitcoin-wrapper shadow">
<header>
<img src={logo} alt="Bitcoin Logo"/>
</header>
<div className="price">
Coinbase
${price}
</div>
<button className="btn striped-shadow white" onClick={refresh}>
<span>Refresh</span>
</button>
</div>
);
}
export default BitcoinWidget;
And my package.json
{
"name": "bitcoin",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "yarn run test-jest:update --verbose --maxWorkers=2",
"test-jest:update": "jest src --updateSnapshot",
"test-jest": "jest src"
},
"now": {
"name": "bitcoin",
"engines": {
"node": "8.11.3"
},
"alias": "leongaban.com"
},
"jest": {
"verbose": true,
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/client/assetsTransformer.js"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"devDependencies": {
"enzyme": "^3.4.4",
"enzyme-to-json": "^3.3.4",
"jest": "^23.5.0"
}
}
Add this in your package.json jest config.
"transform": {
"\\.js$": "<rootDir>/node_modules/babel-jest"
},
Let me know if the issue still persists.
For anyone using create-react-app, only certain jest configurations can be changed in package.json when using create-react-app.
I have issues with Jest picking up an internal library, Jest would display 'unexpected token' errors wherever I had my imports from this library.
To solve this, you can change your test script to the below:
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<your-package-goes-here>)/)'",
For anyone who struggled with this issue and none of the above answers worked for them.
After a long time of searching, I reached for this solution:
edit your jest.config.js to add transformIgnorePatterns
//jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
testMatch: ["**/__tests__/**/*.ts?(x)", "**/?(*.)+(test).ts?(x)"],
transform: {
"^.+\\.(js|ts)$": "ts-jest",
},
transformIgnorePatterns: [
"/node_modules/(?![#autofiy/autofiyable|#autofiy/property]).+\\.js$",
"/node_modules/(?![#autofiy/autofiyable|#autofiy/property]).+\\.ts$",
"/node_modules/(?![#autofiy/autofiyable|#autofiy/property]).+\\.tsx$",
],
}
put the packages that you want to ignore inside [] and separate them by |
in my case [#autofiy/autofiyable|#autofiy/property]
I also encountered the same error while setting up Jest in my React app created using Webpack. I had to add #babel/preset-env and it was fixed. I have also written a blog article about the same.
npm i -D #babel/preset-env
And then add this in "presets" in .babelrc file. E.g.
{
"presets": ["#babel/react", "#babel/env"]
}
https://medium.com/#shubhgupta147/how-i-solved-issues-while-setting-up-jest-and-enzyme-in-a-react-app-created-using-webpack-7e321647f080?sk=f3af93732228d60ccb24b47ef48d7062
I added the jest update to my package.json
"jest": {
"transformIgnorePatterns": [
"node_modules/(?!(<package-name>|<second-package-name>)/)"
]
},
Feel free to remove the |<second-package-name> if not required.
You can also do it as part of your script as mentioned #paulosullivan22
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<package-name>)/)'"
In my case, the issue was that I was importing the original module in the mocked module:
import urlExist from "url-exist";
async function stubbedUrlExist(): Promise<boolean> {
// do something
}
export default stubbedUrlExist;
The solution was to not import url-exist in the url-exist mock. This might have lead to a circular import. Jest was perhaps catching this error in a generic try<>catch block dealing with the loading of modules.
Below works for me.
Create babel.config.js file.
module.exports = {
presets: [
[ '#babel/preset-env', { targets: { esmodules: true } } ],
[ '#babel/preset-react', { runtime: 'automatic' } ],
],
};
I updated some dependencies (react, jest and others), and I also got the error:
Jest encountered an unexpected token - SyntaxError: Cannot use import statement outside a module
I had dev dependencies with needed to be transpiled.
What I did first was start all over:
$ jest --init
A jest.config.js is now generated (before I just had Jest configuration in my package.json).
In the error message under details you can see the reporting module, for me it looked like this:
Details: /<project_root>/node_modules/axios/index.js:1
Adding the following transform ignore in jest.config.js solved my problem:
transformIgnorePatterns: [
"node_modules/(?!axios.*)"
],
The axios module was now nicely transpiled and gave no more problems, hope this helps!
https://jestjs.io/docs/27.x/getting-started
Below works for me
module.exports = {
presets: [
["#babel/preset-env", { targets: { node: "current" } }],
"#babel/preset-typescript", "#babel/react"
]
};
could not get it working with transforms, I ended up mocking the dependency:
Create a file: <path>/react-markdown.js
import React from 'react';
function ReactMarkdown({ children }){
return <>{children}</>;
}
export default ReactMarkdown;
On jest.config.js file add:
module.exports = {
moduleNameMapper: {
'react-markdown': '<path>/mocks/react-markdown.js',
},
};
credits to juanmartinez on https://github.com/remarkjs/react-markdown/issues/635
I am a beginner in ReactJS and was just exploring it and trying to configure it with Webpack and Babel when I experienced an error when I run the application using npm start.
Following are some of files:-
package.json
{
"name": "reactstarter",
"version": "1.0.0",
"description": "A basic React application to explore its state and beauty",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [
"reactjs"
],
"author": "user1705",
"license": "MIT",
"dependencies": {
"debug-log": "^1.0.1",
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"devDependencies": {
"webpack": "^1.13.2"
}
}
There are two directories src directory and dist directory inside the root folder.
File: src/index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "/app/bundle.js"></script>
</body>
</html>
File:- src/app/App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
File:- src/app/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
And webpack.config.js:-
var webpack= require(webpack);
var path= require(path);
var DIST_DIR=path.resolve(__dirname,"dist");
var SRC_DIR= path.resolve(__dirname,"src");
var config={
entry:SRC_DIR+"/app/index.js",
output:{
path:DIST_DIR+"/app",
fileName:bundle.js,
publicPath:"/app/",
},
devServer: {
inline: true,
port: 7777
},
modules:{
loaders:[
{
test:/\.js?/,
include:SRC_DIR,
loader:"babel-loader",
query:{
presets:["react","es2015","stage-2"]
}
}
]
}
};
module.exports=config;
So now whenever I run the command npm start,it gives the following error:-
Being a beginner I have no idea as what is the issue?? If anyone has come across this similar issue or knows about the error,please contribute your knowledge and show me the right path.
change
output:{
path:DIST_DIR+"/app",
fileName:bundle.js,
publicPath:"/app/",
},
to
output:{
path:DIST_DIR+"/app",
fileName:"bundle.js",
publicPath:"/app/",
},
It seems that you forgot the quotes when you were requiring the npm modules:
var webpack= require('webpack');
var path= require('path');