Aurelia with storybook
- Dominant language
- TypeScript
- Stars
- 11.7k
- Forks
- 608
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
Im trying to make aurelia work with storybook. I tried to initialize aurelia with webpack, but when storybook triest to load aurelia app i get this message:
```
in D:/SourceCodes/storybook/node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
Module not found: Error: Can't resolve 'aurelia-loader-context' in 'D:\SourceCodes\storybook\node_modules\aurelia-bootstrapper-webpack\node_modules\aurelia-loader-webpack\dist\commonjs'
@ D:/SourceCodes/storybook/node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js 154:23-64
@ D:/SourceCodes/storybook/node_modules/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js
@ D:/SourceCodes/storybook/app/aurelia/dist/client/preview/render.js
@ D:/SourceCodes/storybook/app/aurelia/dist/client/preview/index.js
@ D:/SourceCodes/storybook/app/aurelia/dist/client/index.js
@ ./.storybook/config.js
@ multi D:/SourceCodes/storybook/lib/core/dist/server/config/polyfills.js D:/SourceCodes/storybook/lib/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
```
Webpack config file:
```javascript
const path = require('path');
const AureliaWebPackPlugin = require('aurelia-webpack-plugin');
module.exports = {
entry: {
app: [],
aurelia: [
'aurelia-bootstrapper-webpack',
'aurelia-polyfills',
'aurelia-pal',
'aurelia-pal-browser',
'aurelia-binding',
'aurelia-dependency-injection',
'aurelia-event-aggregator',
'aurelia-framework',
'aurelia-history',
'aurelia-history-browser',
'aurelia-loader',
'aurelia-loader-webpack',
'aurelia-logging',
'aurelia-logging-console',
'aurelia-metadata',
'aurelia-path',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-task-queue',
'aurelia-templating',
'aurelia-templating-binding',
'aurelia-templating-router',
'aurelia-templating-resources',
],
},
output: {
// (2)
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist',
filename: '[name].js',
chunkFilename: '[name].js',
},
resolve: {
// (3)
extensions: ['.ts', '.js'],
modules: ['src', 'node_modules'],
},
module: {
// (4)
rules: [
{ test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.ts$/i, use: 'ts-loader' },
{ test: /\.html$/i, use: 'html-loader' },
],
},
plugins: [
new AureliaWebPackPlugin({ noWebpackLoader: true, aureliaApp: undefined }), // (5)
],
};
```
Full repo source code to clone is at https://github.com/bemon/storybook if anyone wants to take a look and try run.
I dont know how exacly configure webpack to proper load aurelia modules.
Contributor guide
Research direction
Clone the linked bemon/storybook repository and reproduce the failure using the Webpack configuration shown. Trace the missing module from aurelia-loader-webpack.js through aurelia-bootstrapper-webpack.js and the Storybook entry points in .storybook/config.js and app/aurelia/dist/client/preview/render.js. Done means Storybook loads the Aurelia app without the aurelia-loader-context resolution error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript, webpack
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100