I'm writing my first smart contract and I'm trying a few new things at once. One of which is using Yarn 3 (which apparently works very different from the older versions).
When running yarn truffle compile, I get this error:
Using network 'test'.
Compiling your contracts...
===========================
> Compiling ./contracts/HelloWorld.sol
CompileError: ParserError: Source "#openzeppelin/contracts/utils/Strings.sol" not found
--> project:/contracts/HelloWorld.sol:5:1:
|
5 | import "#openzeppelin/contracts/utils/Strings.sol";
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Compilation failed. See above.
at /Users/craig/Code/ethereum-hello-world/.yarn/unplugged/truffle-npm-5.6.8-9c74c1574e/node_modules/truffle/build/webpack:/packages/compile-solidity/dist/run.js:95:1
at Generator.next (<anonymous>)
at fulfilled (/Users/craig/Code/ethereum-hello-world/.yarn/unplugged/truffle-npm-5.6.8-9c74c1574e/node_modules/truffle/build/webpack:/packages/compile-solidity/dist/run.js:28:43)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
When I remove this line, it compiles just fine:
import "#openzeppelin/contracts/utils/Strings.sol";
This is my package.json:
{
"name": "ethereum-hello-world",
"version": "0.0.1",
"packageManager": "yarn#3.3.0",
"scripts": {
"test": "mocha"
},
"dependencies": {
"truffle": "^5.6.8"
},
"devDependencies": {
"#openzeppelin/contracts": "^4.8.0",
"#openzeppelin/test-helpers": "^0.5.16",
"chai": "^4.3.7"
}
}
(To add the openzeppelin/contracts above, I used yarn add -D #openzeppelin/contracts.)
This is my HelloWorld.sol:
// SPDX-License-Identifier: ISC
pragma solidity ^0.8.17;
import "#openzeppelin/contracts/utils/Strings.sol";
contract HelloWorld {
string public text = "Hello World";
constructor() {
// Do nothing
}
}
What am I doing wrong?
Related
I'm using VueJs + Webpack and trying to get Web.js to work.
I installed web.js using npm npm install web3 --save and I'm trying to use it in one of my VueJS components by importing it using import Web3 from 'web3'.
When I load my application I get an error:
app.js:101191 Uncaught TypeError: Class extends value undefined is not a constructor or null
at module.exports (app.js:101191)
at module.exports (app.js:101155)
at Object../node_modules/keccak/js.js (app.js:101140)
at __webpack_require__ (app.js:200063)
...
My package.json looks like:
"private": true,
"scripts": {
...
},
"devDependencies": {
...
},
"dependencies": {
...
"web3": "^1.3.6"
}
Do I need to import it using webpack?
I am learning to create npm packages by creating a session check function sessionFn that will popup a modal 1 minute before the session expires.
The function works as expected on the main app (a nuxtJS app) but when I make use it as an npm module I have to pass moment as an argument even though moment is listed as a dependency and is imported on the module.
I am missing something, why is my module not picking up moment? I want to use the module like sessionFn(this, to.path); instead of sessionFn(this, to.path, moment); moment is undefined when I don't pass it
Package files
package.json
{
"name": "hello-stratech",
"version": "1.0.17",
"description": "Hello Stratech",
"main": "index.js",
"keywords": [
"npm",
"hello",
"stratech"
],
"author": "Simo Mafuxwana",
"license": "ISC",
"dependencies": {
"moment": "^2.22.2"
}
}
index.js (main js file)
import moment from "moment";
module.exports = {
greeting(name) {
alert("Hello.. " + name);
},
department(dev) {
...
},
sessionFn(context) {
const exp = context.$store.state.session.exp;
let userSystemTime = new Date();
userSystemTime = moment.utc(userSystemTime)
const diff = moment(userSystemTime).diff(moment(exp), 'minutes');
if (diff = 1) {
// open modal
}
}
}
Usage
This is how I use the package in the main app
import moment from 'moment';
import { sessionFn } from "hello-stratech";
export default {
...
watch: {
$route(to) {
sessionFn(this, to.path, moment);
}
}
...
}
You dont need to import and pass moment into your function since you are importing it in your function file. You are not even using the passed argument in your function. So you can just safely dont pass it. You are also not using second argument that u pass to.path, so u can omit it too.
As a suggestion you should install and use eslint, which will catch such things. You can setup a nuxt project with eslint using create nuxt app for example.
There is also a bug in esm 3.21-3.22 that prevent commonjs and es6 imports work together https://github.com/standard-things/esm/issues/773 . That should be fixed when a new esm will be released
Try making moment as devDependancy through npm i moment --save-dev instead of dependency.
That way moment will only be needed when the package is development (means when you are developing the project) but not when it is used.
Hope it fixes your issue
for more depth knowledge
Standard fade works if an element has "au-animate" class with the way I configured the plugin. But if app.ts injects VelocityAnimator and a new build is made after that, then there is failed HTTP GET request for "http://localhost:9000/src/velocity.js", JS error "Unhandled rejection Error: Script error for "velocity", needed by: velocity-animate/velocity.ui".
Message repeated twice in the build output:
------- File not found or not accessible ------
| Location: <project folder>/src/velocity.js
| Requested by: <project folder>/src/app.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
Project is configured to use Typescript.
I have installed npm packages "aurelia-animator-velocity" and "velocity-animate". I try to include velocity.ui but I'm only guessing how to do it below.
aurelia.json
{
"name": "velocity-animate",
"path": "../node_modules/velocity-animate",
"main": "velocity"
},
{
"name": "velocity-animate-ui",
"path": "../node_modules/velocity-animate",
"main": "velocity.ui"
},
"aurelia-animator-velocity"
main.ts
aurelia.use
.standardConfiguration()
.plugin('aurelia-animator-velocity')
.feature('resources');
app.ts
import { autoinject } from "aurelia-framework";
import { VelocityAnimator } from "aurelia-animator-velocity";
#autoinject
export class App {
constructor(private animator: VelocityAnimator) {
console.log(this.animator);
}
}
I found the workaround. Also, extra characters.
Basically, the component isn't getting compiled, so I get an Unexpected token < error when it runs into <template>
I've run the following commands:
$ npm install --save-dev jest
$ npm install --save-dev vue-jest
$ npm install --save-dev vue-test-utils
and I've out the following in package.json:
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"test": "jest"
},
...
"jest": {
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/vue"
],
"moduleFileExtensions": [
"js",
"vue"
],
"scriptPreprocessor": "index.js"
}
I created a __test__ folder in the root directory with a simple test:
const Vue = require("vue");
const VueTestUtils = require("vue-test-utils");
Vue.config.debug = true;
Vue.config.async = false;
Vue.use(VueTestUtils.install);
import Hello from '../src/components/Hello.vue'
const Constructor = Vue.extend(Hello)
const vm = new Constructor().$mount()
describe('initial test', () => {
it('should be 1', () => {
expect(1).toBe(1)
})
})
I recently got this error as well, and not quite sure how to configure Vue.js so it will run using the compiler-included build:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
Been looking around for a while, so any help would be appreciated
You need to use a Jest transform to transform Jest Vue files. A Jest transformer is a synchronous function, that takes the file and path as input and outputs transpiled code.
I maintain a npm package that does it for you - vue-jest.
npm install --save-dev vue-jest
You need to add a jest section to your package.json (or in a seperate file with --config). Your config should look something like this:
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "vue-jest"
}
}
This tells jest to use jest-vue as a transform for files with a .vue extension.
You can see a working repo using Vue Test Utils here - https://github.com/eddyerburgh/vue-test-utils-jest-example
I am getting the error:
RelayQL: Unexpected invocation at runtime. Either the Babel transform
was not set up, or it failed to identify this call site. Make sure it
is being used verbatim as Relay.QL
I have the following packages with versions:
"babel-preset-es2015": "^6.14.0",
"babel-relay-plugin": "^0.9.2",
"react-native": "^0.30.0",
"react-relay": "^0.9.2",
"babel-preset-react-native": "^1.9.0"
My babelrc looks like this:
{
"passPerPreset": true,
"presets": [
{
"plugins": [
"./schema/babel-myrelay-plugin.js"
]
},
"react-native",
"es2015"
]
}
My babel-myrelay-plugin.js looks like this:
// `babel-relay-plugin` returns a function for creating plugin instances
const getBabelRelayPlugin = require('babel-relay-plugin');
// load previously saved schema data (see "Schema JSON" below)
const schemaData = require('./schema.json');
// create a plugin instance
const plugin = getBabelRelayPlugin(schemaData.data);
module.exports = plugin
This was working earlier, till I renamed(mv) the main directory of the project. I did a rm -rf node_modules and re-installed. I performed a npm cache clean. I also cleaned the $TMPDIR.
But the error is persistent.
I am able to query/mutate using GraphiQL.
Any help appreciated.
PS: I have also researched the issues logged on relay. The solutions listed there didn't help.