Works if run from file root folder but on the subfolder, I get a syntax error.
The error is regarding import syntax, failing at first import which is gulp.
If I change to require it works but I need the setup in ES6.
I need to mention again, it works fine if I run the command from a terminal from the folder where gulfile is.
PS: I've updated some babel to 7 - I did not have this problem with babel 6.
Looks like if failing to use .babelrc from the outside root folder.
Everything I could find online.
'use strict';
/**
* Note: I updated most of the theme npm deps including gulp#4
*/
import gulp from 'gulp';
import babel from 'gulp-babel';
import uglify from 'gulp-uglify';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'gulp-autoprefixer';
import revAll from 'gulp-rev-all';
import cleanCSS from 'gulp-clean-css';
import svgSprite from 'gulp-svg-sprite';
import del from 'del';
import merge from 'merge-stream';
import browserify from 'browserify';
import browserSync from 'browser-sync';
import source from 'vinyl-source-stream';
import buffer from "vinyl-buffer";
import babelify from 'babelify';
It should work the same as the task is run from root directory even if is run from the subfolder.
I believe you should update the main parameter of your package.json file.
Please refer to Node.js package.json main parameter for further info.
Hope it helps.
Related
I'm trying to make a package in typescript, this one in particular. But after installing it locally in my project with yarn add file:../parascan-js, I can't import the modules correctly.
I expect import options for my package to be parascan/components/* (name changed from uikit) but what I see are the file/folders in the root such as src, dist, tsconfig etc. I want to be able to import with
import {Table} from "parascan/components/info"
Instead of this
import Table from "parascan/src/components/info/Table"
I've tried building dist folder with tsc and babel. Made some changes to package.json by adding type: module and module: dist/index.js but nothing worked.
Another way to look at this problem is using a generic common package like #chakra-ui/react as example. Text are imported with:
import { Text } from #chakra-ui/react
And not:
import { Text } from #chakra-ui/react/src/index
//or
//import { Text } from #chakra-ui/react/dist/index
I'm new to js/ts, so articles on how to create packages would be helpful.
I create my react npm package using webpack but when i install my npm package to my react project, package styles are not apply on classes. Why this happens
Here is the link of npm package. You can install 0.0.5 version. In my webpack i used style-loader but it shows me document is not defined errors but if enable following line
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Document not defined error resolved but styles not apply on classes in react project
Here is webpack file image
Here is package.json file image
Here is Test.jsx file image
Here is the main.css build file image which webpacks generates
Here is the test.js build file image which webpacks generates
Here is test.scss file image
Your webpack is working fine. You just need to import your styles manually from your build. This usually has to be done for all packages which define styles.
For ReactStrap you have to add this for styles
import 'bootstrap/dist/css/bootstrap.min.css';
For AntDesign you need this
import 'antd/dist/antd.css';
Same way you need to take import your styles from your build. i.e
import "#afiniti/test/build/main.css";
And your styles would start working.
Example code
import Test from "#afiniti/test";
import "#afiniti/test/build/main.css";
export default function App() {
return (
<Test />
}
Here is a link to a simplified working codesandbox. Good Luck!
I've started a project with the new vue-cli 3.0 and I've added the qwery npm module in node package.json
npm i qwery
and in my-file.js which is at same level as main.js I import it the following way:
import {qwery as $q} from "qwery"
The build goes ok however in the browser $q is undefined and webpack has imported it as qwery__WEBPACK_IMPORTED_MODULE_8__.
Clearly I'm not doing it the right way can somebody give me a hint what I'm doing wrong?
You need to import it like this
import $q from 'qwery';
I have two javascript projects in separate directories within a parent directory and I want both of them to be able to import files from a common directory. The structure looks a bit like this:
- parentDir
- project1
- package.json
- webpack.config.js
- src
- index.js
- project2
- package.json
- webpack.config.js
- src
- index.js
- common
- components
- CommonComponent.vue
- application
- app.js
I'd like both project1's index.js and project2's index.js to be able to import CommonComponent.vue and app.js.
Currently this works if I do:
import CommonComponent from ../../common/components/CommonComponent.vue
However those import paths starts to get very messy and hard to maintain the deeper into each tree we go, with huge numbers of ../s, so I'm trying to find a way of making the imports neater and easier to manage and I came across resolve options in webpack. So I've tried adding this to my webpack.config.js:
resolve: {
modules: [
path.resolve("../common/"),
path.resolve("./node_modules")
]
},
so then the import would look like:
import CommonComponent from "components/CommonComponent.vue"
import app from "application/app"
Importing the plain js file works, but when trying to import the .vue file, webpack throws an error:
ERROR in C:/parentDir/common/components/CommonComponent.vue
Module not found: Error: Can't resolve 'vue-style-loader' in 'C:/parentDir/common/components'
So how can I apply webpack loaders to files imported via resolve.modules?
Note: importing .vue files from within a single project works fine, so my module.rules config is correct.
It turns out the common package needed its own node_modules. That doesn't seem to be the case when importing a file from there directly via its path, but it is when using either resolve.modules or resolve.alias in webpack.
So the answer was to npm init in common and then to npm install all the dependencies and devDependencies needed there. e.g (of course these will depend on the project):
npm install --save vue
npm install --save-dev babel-core babel-loader css-loader less-loader vue-loader vue-template-compiler webpack
Once that's done, both of these webpack configs seem to have the same result as far as I can tell:
resolve: {
modules: [
path.resolve("../../common"),
path.resolve("./node_modules")
]
},
and
resolve: {
alias: {
components: path.resolve("../../common/components")
}
}
Both allow a file in project1 or project2 to do an import like:
import CommonComponent from "components/CommonComponent.vue"
I can't seem to inject a module into my angular app.
I am trying to import the following module which is installed through bower using:
bower install angular-pagedown --save
This seems to load fine within the bower-components folder which is in the following folder structure:
clinet
------app
---------bower-components
-------------------angular-pagedown
-------------------pagedown
When I try inject the module as it says in the instructions using 'ui.pagedown' which is indeed the name of the module, I use the following code in app.js:
import _Auth from '../components/auth/auth.module';
import account from './account';
import admin from './admin';
import navbar from '../components/navbar/navbar.component';
import footer from '../components/footer/footer.component';
import main from './main/main.component';
import questionsCreate from
'./questionsCreate/questionsCreate.component';
import questionsShow from './questionsShow/questionsShow.component';
import constants from './app.constants';
import util from '../components/util/util.module';
import socket from '../components/socket/socket.service';
import './app.scss';
angular.module('filQuestionsApp', [ngCookies, ngResource, ngSanitize,
'btford.socket-io', uiRouter,
uiBootstrap, _Auth, account, admin, 'validation.match', navbar,
footer, main, questionsCreate,
questionsShow, constants, socket, util, 'ui.pagedown'
])
I seem to get the following error when trying to use the module:
Module 'ui.pagedown' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I seem to be doing something really wrong with bower and angular together, I'm also getting 400 errors in terms of formatting and I'm not sure on the injection process.
How angular-pagedown work:
bower install angular-pagedown --save
This will also install pagedown dependencies.
Import these files in your HTML:
pagedown/Markdown.Converter.js
pagedown/Markdown.Sanitizer.js
pagedown/Markdown.Extra.js
pagedown/Markdown.Editor.js
angular-pagedown/angular-pagedown.js
angular-pagedown/angular-pagedown.css
If you're using a build tool like grunt/gulp's main-bower-files, you don't need to import the files manually.
But add this in your bower.json
"overrides": {
"pagedown": {
"main": [
"Markdown.Converter.js",
"Markdown.Sanitizer.js",
"Markdown.Extra.js",
"Markdown.Editor.js",
"wmd-buttons.png"
]
}
}
Include dependency in your app angular.module("yourApp", ["ui.pagedown"]);