I ​recently published an npm module https://www.npmjs.com/package/splashup-widget.
I tried to install it in a 'create-react-app' sample app, but I got an error Cannot find module 'splashup-widget'
this is the webpack config:
var path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve('build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: 'babel-loader'
}
]
},
externals: {
react: "react"
}
}
This is a React code:
import logo from './logo.svg';
import './App.css';
import Quiz from 'splashup-widget'
function App() {
return (
<div className="App">
<Quiz />
</div>
);
}
export default App;
I checked this question: How to build an npm package so it is able to be imported/required
but it seems that it's not my case, since both entry and output filenames are 'index.js'.
Would greatly appreciate any help :-)
The main field in your package's package.json is incorrect; you should change it from index.js to build/index.js.
Related
I'm having an issue when attempting to import a webpack-built Node package into my NextJS project.
In this scenario, I have two packages my-site and toolkit. I am trying to import a function, myFunction into my my-site package from my toolkit package.
In a file in my my-site package, I have the following code:
import { myFunction} from "#myorganization/toolkit";
myFunction();
And upon visiting the relevant page of my Next site in the browser, I receive this error:
TypeError: _myorganization_toolkit__WEBPACK_IMPORTED_MODULE_3__.myFunction is not a function
My webpack config in the toolkit package is as follows:
import path from "path";
const config = {
mode: "development",
entry: "./ts/main.ts",
devtool: "source-map",
experiments: {
outputModule: true,
},
output: {
path: path.resolve("./js"),
filename: "main.js",
globalObject: "this",
library: {
type: "module",
}
},
module: {
rules: [
{
test: /\.ts(x)?$/,
loader: "ts-loader",
exclude: /node_modules/,
},
]
},
resolve: {
extensions: [
".tsx",
".ts",
".js",
],
},
};
export default config;
Oddly enough, if I log the value of myFunction to the console:
import { myFunction} from "#myorganization/toolkit";
console.log("myFunction: ", myFunction);
myFunction();
The stdout of the Next server correctly reports that it is a function, but the browser console reports it as undefined.
This leads me to believe that the issue has something to do with NextJS not 'forwarding' on the code from toolkit to the browser, but I am not sure how to fix this, nor am I even certain that that is actually what is going on.
How do I fix this issue?
I am trying to scaffold an Angular 6 app by hand (ie not using the CLI). I was doing OK until I ran into the following error when running webpack:
ERROR in window is not defined
Now from googling around it looks like I'm missing some polyfills since webpack uses node in order to generate it's output. I've reviewed the examples on Angular's site and added the polyfills.ts file to my application but I still can't get rid of the error.
Here is my webpack.confg.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
const { AngularCompilerPlugin } = require('#ngtools/webpack');
module.exports = function() {
return {
entry: {
index: "./src/client/client.ts",
polyfills: "./src/client/polyfills.ts"
},
output: {
path: __dirname + "/client-dist",
filename: "[name].client.js"
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loader: '#ngtools/webpack'
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.css$/,
loader: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src/client/index.html',
output: __dirname + '/client-dist',
inject: 'head'
}),
new ScriptExtPlugin({
defaultAttribute: 'defer'
}),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: './src/client/app/app.module#AppModule'
})
]
}
}
My polyfills.ts file:
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
And my client.ts file (entry point of my application):
import './polyfills'
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
I'm sure I'm just doing something stupid but any help would be appreciated. Thanks!
EDIT 1:
After reading the article posted by #SureshKumarAriya I tried changing the following in my webpack.config:
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: './src/client/app/app.module#AppModule',
skipCodeGeneration: true // This is new
})
And I get a different error: ERROR in Resolution of relative paths requires a containing file.
I'm guessing this means it can't resolve one of the typescript files I reference in client.ts? I'm not sure this has gotten me any closer but still interesting.
As always thanks for the help!
Inside output cofiguration. please add globalObject: "this".
output: {
// ...
globalObject: "this"
}
https://github.com/markdalgleish/static-site-generator-webpack-plugin/issues/130
Seems like your dependencies still rely on the window object.
Do validate
typeof window !== 'undefined'
Please refer to the following link.
Im trying to publish a project to npm that contains two or more Vue components so i can import, register and use both components like this:
import Component1 from 'npm-package'
import Component2 from 'npm-package'
this is my webpack file:
const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
var config = {
output: {
path: path.resolve(__dirname + '/dist/'),
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
include: __dirname,
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.css$/,
loader: 'style!less!css'
}
]
},
externals: {
moment: 'moment'
},
plugins: [
new webpack.optimize.UglifyJsPlugin( {
minimize : true,
sourceMap : false,
mangle: true,
compress: {
warnings: false
}
} )
]
};
module.exports = [
merge(config, {
entry: path.resolve(__dirname + '/src/plugin.js'),
output: {
filename: 'vue-project.min.js',
libraryTarget: 'window',
library: 'VueProject',
}
}),
merge(config, {
entry: path.resolve(__dirname + '/src/index.js'),
output: {
filename: 'vue-project.js',
libraryTarget: 'umd',
library: 'vue-project',
umdNamedDefine: true
},
resolve: {
extensions: ['', '.js', '.vue'],
alias: {
'src': path.resolve(__dirname, '../src'),
'components': path.resolve(__dirname, '../src/components')
}
}
})
];
and this is the index.js file i'm using as the entry point for the build process
import Component1 from './components/folder1/Component1.vue'
import Component1 from './components/folder2/Component2.vue'
export default {
components: {
Component1,
Component2
}
}
The build process using npm run build works fine and i can publish the project to npm and install it using npm install. Importing and using it works fine to, but when i run my project i get the error:
failed to mount component: template or render function not defined.
All other posts o found regarding this error did not solve my problem, as none of them tried to export multiple components.
Both components work completely as intended when im publishing them in two different projects.
What am i missing here? Thanks in advance!
You don't need to export using the components property, you simply need to do:
export {
Component1,
Component2
}
You would then do:
import {Component1} from 'npm-package';
import {Component2} from 'npm-package';
or
import {Component1, Component2} from 'npm-package';
see: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
I want to be able to use import in my react application for not only js/jsx files but also for css files. From what I've read, the best way to do that is to use the extract-text-webpack-plugin which will take your imported css files and bundle them together.
I've set it up so that its generating my bundled css file, but for some reason every time I load my page I get a syntax error:
SyntaxError: MyWebpage/views/global.css: Unexpected token, expected ; (1:5)
> 1 | body {
| ^
2 | margin: 0;
3 | }
My setup looks like this:
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
entry: ['babel-polyfill', './views/Index.jsx'],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public'
},
module: {
rules: [
{ test: /\.(jsx|js)$/, exclude: /node_modules/ , use: 'babel-loader' },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
module.exports = config;
The entry point ./views/Index.js is where I'm importing my css file:
Index.js
import React from 'react';
import Layout from './Layout.jsx';
import PageContent from './PageContent.jsx';
import './global.css';
class Index extends React.Component {
render() {
return (
<Layout title={this.props.title}>
<PageContent />
</Layout>
);
}
}
export default Index;
Inside the imported ./Layout.jsx file I'm using a <link> to include the bundled css file in my page:
Layout.jsx
import React from 'react';
class Layout extends React.Component {
render() {
return (
<html>
<head>
<title>{this.props.title}</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root">
{this.props.children}
</div>
<script type="text/javascript" src="./bundle.js"></script>
</body>
</html>
);
}
}
export default Layout;
I'm pretty confused because it seems like my app is building fine, but when I try to access my webpage I keep getting a syntax error.
Can anyone please help me understand what I'm doing wrong?
It seems problem with loaders below is example of webpack.config.js file working for jsx and css loaders :
module.exports = {
entry: './app/index.js',
output: {
path: __dirname,
filename: 'dist/bundle.js'
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'react-hmre']
}
},
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}]
}
};
it seems like babel or webpack is not loading the loaders.
This variant helps me with it (just include into webpack.config.js):
require.extensions['.css'] = () => {
return;
};
More here... [link]
We're hoping to use Rollbar.js in our node/webpack/babel/ES6/React-based project. It's not 100% clear what the right NPM package is to use, but it appears to be this one:
https://www.npmjs.com/package/rollbar
From there, the instructions are pretty straightforward: add a reference to package.json, install, and off you go. So here's the reference in package.json:
"rollbar": "0.6.2",
Running npm install appears to work just fine, but then when I run npm start, I get this error in the console:
ERROR in ./~/rollbar/lib/parser.js
Module not found: Error: Cannot resolve module 'fs' in [myProjectRoot]node_modules/rollbar/lib
# ./~/rollbar/lib/parser.js 7:9-22
ERROR in ./~/rollbar/package.json
Module parse failed: [myProjectRoot]node_modules/rollbar/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:9)
at Parser.pp.raise ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.unexpected ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
at Parser.pp.semicolon ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1469:73)
at Parser.pp.parseExpressionStatement ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1994:8)
at Parser.pp.parseStatement ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1772:188)
at Parser.pp.parseBlock ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:2009:21)
at Parser.pp.parseStatement ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1753:19)
at Parser.pp.parseTopLevel ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1666:21)
at Parser.parse ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1632:17)
at Object.parse ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
# ./~/rollbar/lib/notifier.js 14:18-44
I can't make any sense out of this. It appears to suggest that my webpack project cannot parse Rollbar's package.json file, but that doesn't seem possible, given that my webpack project has countless other NPM packages, each with their own package.json file.
Anybody run into this issue?
UPDATE:
In case it's relevant, here's our complete webpack.config.js file:
const path = require('path');
const webpack = require('webpack');
const glob = require('glob');
const modulesDirectories = glob.sync('src/**');
const assetsDirectories = glob.sync('assets/**');
Array.prototype.push.apply(
modulesDirectories,
assetsDirectories
);
modulesDirectories.push('assets');
modulesDirectories.push('/');
modulesDirectories.push('node_modules');
const modulesDirectoriesWithoutFiles = modulesDirectories.filter(directory => {
if (directory.slice(-4, -3) === '.' || directory.slice(-3, -2) === '.') {
return false;
}
return true;
});
module.exports = {
cache: true,
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill',
'webpack-hot-middleware/client',
'./src/index.js'
],
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel',
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: true
},
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.woff|.ttf|.eot|.woff2$/, loader: `file-loader` },
{ test: /\.(png|jpe?g|gif|svg)$/, loader: `url-loader?limit=8192` },
]
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
FIREBASE_CONFIG: JSON.stringify({
apiKey: [ourApiKey],
authDomain: [ourDomain],
databaseURL: [ourUrl],
storageBucket: [ourBucket],
})
})
],
resolve: {
extensions: ['', '.js', '.jsx'],
root: __dirname,
modulesDirectories: modulesDirectoriesWithoutFiles,
}
};
SECOND UPDATE:
Still can't get things to build, but I've got a little more information. If I remove the Rollbar import from my code, then the console errors go away. I've tried importing Rollbar in two ways, as follows:
import rollbar from "rollbar";
var Rollbar = require('rollbar');
Both attempts produce the same error. If I add node: {fs: "empty"} to my webpack.config.js file, then the 'fs' error disappears, but the "appropriate loader" error remains.
I was encountering the same issue. I fixed it by:
Installing fs using npm install --save fs. Alternatively, you can add node: {fs: "empty"} to your webpack config, as suggested in comments. Either of these takes care of the fs import in rollbar/lib/parser.js.
Installing a json loader, then adding this loader to your webpack config under modules -> loaders. This informs webpack that it should use the json loader when loading JSON files. Webpack should then be able to import package.json in rollbar/lib/notifier.js.
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
...
],
...
}