I am attempting to create a storybook test that uses a react component in a module that uses typescript, babel, and webpack. My Map react component references and uses cesium and cesium-react components.
When I try to run start-storybook (yarn storybook) I get an error:
ERROR in ./node_modules/requirejs/bin/r.js
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| /**
| * @license r.js 2.3.5 Copyright jQuery Foundation and other contributors.
@ ./node_modules/cesium/index.js 5:16-36
@ ./node_modules/cesium-react/dist/cesium-react.es.js
@ ./src/components/Map.js
@ ./stories/map.stories.js
@ ./stories .stories.(ts?x|js)$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=
If I google this error 'Module parse failed. Unexpected character '#'. #4603' I see similar issues at the top of the result list that suggests a few things to try.
- Add a custom loader (reference 4603)
- Try using shebang loader (reference 4603/531)
- Simply don't test (reference 170)
- Also, one of these link to a very similar error for jsonstream which can be found by googling 'node target should ignore hashbang #2168'
My main questions are specifically:
- I have attempted using a custom loader and the shebang loader (reference 2168) but neither seem to work. Is it even possible to work around this error and run in storybook? Research about JSONstream suggests a workaround is possible using the shebang loader and that I just not configuring properly.
- Assuming that shebang loader is the best of the recommended possible solutions, then what might I be doing incorrectly in my .storybook/webpack.config.js (obviously what I am doing is not working).
I should note that:
- I can get storybook to run my Map component if I don't attempt to use typescript loader. I can run my Map story if I add it to a copy of cesium-react project from github.
- My Map component as shown here has been simplified as much as possible in order to try to identify and solve my import problem. However, the intent is that my actual Map component will be implemented using Typescript.
Here are snippets of what I think are relevant files but would happily post other files or snippets if asked.
.storybook/webpack.config.js
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js'); module.exports = (baseConfig, env) => { const config = genDefaultConfig(baseConfig, env); config.module.rules.push({ test: /\.(ts|tsx)$/, loader: require.resolve('ts-loader') }); // Add shebang to try to workaround unexpected character error. config.module.rules.push({ test: /node_modules\/cesium\/index\.js$/, loader: require.resolve('shebang-loader') }); config.resolve.extensions.push('.ts', '.tsx'); return config; };
.storybook/config.js
import { configure } from '@storybook/react'; // automatically import all files ending in *.stories.js or *.stories.ts?x const req = require.context('../stories', true, /.stories.(ts?x|js)$/); //interates through all files in ../stories that match the regex above //and adds them to list of stories to show function loadStories() { req.keys().forEach((filename) => req(filename)); } configure(loadStories, module);
stories/map.stories.js
import * as React from 'react'; import Map from "../src/components/Map"; import { withInfo } from '@storybook/addon-info'; import { storiesOf } from '@storybook/react'; storiesOf("Map", module) .add('Sample Map', withInfo('Map Stuff')(() => <Map /> ));
src/components/Map.js. The error will occur if I uncomment my cesium-react import in Map.js.
import * as React from 'react'; // Uncomment to see unexpected character error. import { Viewer } from "cesium-react"; export default class Map extends React.Component { render() { return ( <div>hello</div> ); } }
package.json (snippet, I can provide more of the file if deemed necessary)
"scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage", "test:ci":"jest --ci --testResultsProcessor='jest-junit'", "build": "webpack", "build:prod": "cross-env NODE_ENV=production webpack -p", "clean": "yarn clean:storybook-static && yarn clean:build && yarn clean:docs && yarn clean:node_modules", "clean:node_modules": "node ./utility/rimraf-standalone.js node_modules", "clean:build": "rimraf build", "clean:storybook-static": "rimraf storybook-static", "clean:docs": "rimraf docs", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", "pre:publish": "yarn lint && yarn test && yarn build:prod", "lint": "tslint -c config/tslint.json '/src/**/*.{ts,tsx}'", "generate:docs": "typedoc --out ./docs ./src/index.tsx" }, "devDependencies": { "@types/enzyme": "^3.1.6", "@types/jest": "^22.0.1", "@types/react": "^16.0.34", "@types/react-dom": "^16.0.3", "@types/react-test-renderer": "^16.0.0", "@types/storybook__addon-info": "^3.2.1", "@types/storybook__react": "^3.0.6", "@babel/core": "^7.0.0-beta.37", "@babel/plugin-proposal-class-properties": "^7.0.0-beta.37", "@babel/plugin-proposal-export-default-from": "^7.0.0-beta.37", "@babel/plugin-proposal-export-namespace-from": "^7.0.0-beta.37", "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.37", "@babel/preset-env": "^7.0.0-beta.37", "@babel/preset-react": "^7.0.0-beta.37", "@storybook/addon-actions": "^3.4.0-alpha.1", "@storybook/addon-info": "^3.3.8", "@storybook/addon-links": "^3.4.0-alpha.1", "@storybook/addon-storyshots": "^3.3.8", "@storybook/react": "^3.4.0-alpha.1", "babel-core": "^7.0.0-beta.37", "babel-eslint": "^8.2.1", "babel-loader": "^8.0.0-beta.0", "babel-plugin-istanbul": "^4.1.5", "cesium": "^1.41.0", "cesium-react": "^0.2.0", "classnames": "^2.2.5", "copy-webpack-plugin": "^4.3.1", "cross-env": "^5.1.3", "css-loader": "^0.28.8", "del-cli": "^1.1.0", "eslint": "^4.15.0", "eslint-config-prettier": "^2.9.0", "eslint-import-resolver-webpack": "^0.8.4", "eslint-plugin-babel": "^4.1.2", "eslint-plugin-import": "^2.8.0", "eslint-plugin-node": "^5.2.1", "eslint-plugin-react": "^7.5.1", "extract-text-webpack-plugin": "^3.0.2", "html-webpack-include-assets-plugin": "^1.0.2", "html-webpack-plugin": "^2.30.1", "jasmine-core": "^2.8.0", "karma": "^2.0.0", "karma-chrome-launcher": "^2.2.0", "karma-cli": "^1.0.1", "karma-coverage": "^1.1.1", "karma-jasmine": "^1.1.1", "karma-rollup-preprocessor": "^5.1.1", "karma-source-map-support": "^1.2.0", "npm-run-all": "^4.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "prettier": "^1.10.2", "prettier-eslint": "^8.8.1", "prettier-eslint-cli": "^4.7.0", "prop-types": "^15.6.0", "react": "^16.2.0", "react-dom": "^16.2.0", "react-hot-loader": "^3.1.3", "react-router-dom": "^4.2.2", "rollup": "^0.54.0", "rollup-plugin-babel": "^4.0.0-beta.0", "rollup-plugin-commonjs": "^8.2.6", "rollup-plugin-node-resolve": "^3.0.2", "rollup-plugin-replace": "^2.0.0", "rollup-plugin-uglify": "^2.0.1", "storybook-addon-jsx": "^5.3.0", "style-loader": "^0.19.1", "uglify-es": "^3.3.5", "webpack": "^3.10.0", "webpack-dev-server": "^2.10.1", "ts-jest": "^22.0.1", "ts-loader": "^3.2.0", "tslint": "^5.9.1", "tslint-config-airbnb": "^5.4.2", "tslint-react": "^3.4.0", "typedoc": "^0.9.0", "typescript": "^2.6.2", "url-loader": "^0.6.2", "shebang-loader": "^0.0.1" }, "dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0" }