I am using webpack to create and bundle up a package. I’ve then published it to NPM. Then in a test environment I install the package but using import/export doesn’t work:
This is the webpack file for the package I uploaded.
/* webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
target: 'web',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
library: 'myWebpackPackage',
libraryTarget: 'umd',
},
};
The simple function I created in the index.js:
export function add(a, b) {
return a + b;
}
The package.json file:
{
"name": "my-first-npm-package-twelve",
"version": "1.0.6",
"description": "",
"main": "./dist/bundle.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "Me",
"license": "MIT",
"devDependencies": {
"cli": "^1.0.1",
"webpack": "^5.90.1",
"webpack-cli": "^5.1.4"
}
}
I successfuly publish to the NPM repository.
However when I come to importing it into my test environment it only works if I specifically label the path:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./node_modules/my-first-npm-package-twelve/dist/bundle.js"></script>
<script type="module" src="index.js"></script>
</body>
</html>
Index.js:
console.log(myWebpackPackage.add(5,6));
Which prints the answer 11 in the browser javascript console:
Please let me know what I am doing wrong, I’ve been struggling with this for the passed week.
I expected that by placing an import statement in the index.js that I could call the function from. the downloaded package.
